Environment Settings

React Storefront allows you to specify environment specific settings via Moov Console's "blob" feature. This guide shows you how to configure a blob in development and in the cloud.

In general, blobs are used to store values which are either different for each deployed environment, or for security reasons should not be checked into source control, such as API keys and passwords.

Development

Your React Storefront project contains a file src/blob.dev.js, which contains the configuration to be used during local development. By default this file contains an empty object:

// src/blob.dev.js

export default {
  // Configuration settings and secrets such as API keys should be stored
  // in a blob via the Moov Console: https://console.moovweb.com/

  // Those values are not accessible during development, so we put dev equivalents here
  // The shape of this object should match the blob in the cloud
}

Add configuration settings by editing this file. For example, to add a setting called "api_key":

// src/blob.dev.js

export default {
  api_key: "ABC123"
}

Moovweb XDN

To configure a blob for an environment in Moovweb XDN:

  1. Open Moov Console in your browser: https://console.moovweb.com/
  2. Navigate to your project.
  3. Select "Project Settings"
  4. Select "Blobs Admin"
  5. Create a blob. Content should be in JSON format. The shape of the object should be the same as the one in blob.dev.js
  6. Navigate back to the project homepage and select the mode to which the blob should be assigned.
  7. Click "Mode Settings"
  8. Select the blob you want to assign and click "Save Changes"

Changes will take effect when you deploy a new version of the app.

Note that you cannot edit blobs in Moov Console. Each time you need to change the blob, you need to create a new blob and assign it using the process above.

Accessing Configuration Settings

You can access data in the blob using react-storefront/Config:

import Config from 'react-storefront/Config'

console.log(`API Key is ${Config.get('api_key')}`)

Note: Config is only accessible to code running on the server. The blob cannot be accessed from the client. If you need to access configuration data on the client, add the fields you need to your AppModel and include them in the responses returned from your handlers.