--- schema_version: "1" id: 52b3f8982fe4f9bd71cdc6f7bd1f3785a1c674d9fcbe7e454b642010beae7b09 title: Use Environment Variables in React.js collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/pwa-kit-managed-runtime/guides/env-var-feature-access.md canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/env-var-feature-access.html source_site: developer.salesforce.com content_type: documentation content_hash: 669e3fb4eb1b62e142e29b24fee93af431b70e26164cb56f60ea919c33c0dab9 products: - Composable Storefront - Salesforce APIs --- # Use Environment Variables in React.js Managed Runtime environment variables allow you to add variables to the application process running in an environment, without having to make code changes. Environment variables are stored securely, making them ideal for use cases such as: - Calling third-party resources that are protected by API keys - Conditionally changing React.js rendering For more details, see [Environment Variables](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/environment-variables.md). In this tutorial, we'll use environment variables to alter React.js rendering without changing code. You access environment variables through [`process.env`](https://nodejs.org/docs/latest/api/process.html#processenv), which is only available in Node.js and not in browsers. PWA Kit rendering is isomorphic, in that it renders on both the client and the server. So to make environment variables available in React.js, you can add them to your PWA Kit configuration files as shown in this tutorial. In this example, we'll use an environment variable to enable a feature on your site. For instance, for a limited time, you can test a new feature such as express checkout. You can then monitor shopper engagement with the feature to understand its impact. ## Prerequisites To complete this tutorial, first: - Get access to Managed Runtime and Runtime Admin. See [Managed Runtime Administration](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/managed-runtime-administration.html). - Have an API key to use the Managed Runtime API. To find your API key, log in to the [Runtime Admin](https://runtime.commercecloud.com/) tool and go to the [Account Settings](https://runtime.commercecloud.com/account/settings) page. - Have a developer or admin role on the project for which you’re setting environment variables. If you don't have access, ask someone in a Managed Runtime admin role to help you with that. ## On Your Local Machine Before running the commands in this tutorial, replace any placeholders with actual values. Placeholders are formatted like this: `$PLACEHOLDER`. ### Local Testing Prerequisite In your project, create your chosen content or feature. For example, create a hero banner on your homepage. ### Test the Environment Variable Locally 1. To set the environment variable in the current session, open a terminal and run this command: - **Windows:** `set ENABLE_FEATURE='true'` - **Most Unix-like operating systems, including macOS:** `export ENABLE_FEATURE=‘true’` 2. Check if the environment variable is set correctly by running: - **Windows:** `echo %$ENABLE_FEATURE%` - **Most Unix-like operating systems, including macOS:** `echo $ENABLE_FEATURE` The command returns this output: `true` 3. Add this JavaScript code to the configuration file in your project — `config/default.js`: ```jsx function parseEnvVar(envVarName) { const val = process.env[envVarName]; if (val === undefined) { throw new Error(`Environment variable ${envVarName} is required.`); } try { return JSON.parse(val); } catch (err) { throw new Error( `Environment variable ${envVarName} must be a valid JSON string.` ); } } module.exports = { app: { enableFeature: parseEnvVar("ENABLE_FEATURE") || false, }, }; ``` 4. Add this JavaScript code to the home page in your project — `app/pages/home/index.jsx`: ```jsx import { getConfig } from "@salesforce/pwa-kit-runtime/utils/ssr-config"; const Home = () => { const config = getConfig(); const enableFeature = config.app.enableFeature; return enableFeature &&

My New Feature

}; export default Home; ``` 5. Start the development server using `npm start` then navigate to the homepage locally to see your feature rendered. ## In a Non-production or Production Environment We recommend testing these steps in a non-production environment before deploying your changes to production. Before running the commands in this tutorial, replace any placeholders with actual values. Placeholders are formatted like this: `$PLACEHOLDER`. 1. Call the [projects_target_env_var_partial_update](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/references/mrt-admin?meta=projects_target_env_var_partial_update) API endpoint and set a feature flag as an environment variable. This deploys your bundle. Wait for the environment to redeploy before using the environment variable in your code. You can also use Runtime Admin to manage environment variables. See [Environment Variables](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/environment-variables.md). Use the [B2C CLI](https://developer.salesforce.com/docs/commerce/b2c-commerce/guides/b2c-developer-tooling.md): ```bash export MRT_API_KEY='your-runtime-admin-api-key' npx @salesforce/b2c-cli mrt env var set 'ENABLE_FEATURE=true' \ --project my-storefront --environment staging ``` Alternatively, use the API: ```bash curl "https://cloud.mobify.com/api/projects/$PROJECT_ID/target/$ENVIRONMENT_ID/env-var/" \ --request 'PATCH' \ --header 'Content-Type: application/json' \ --header 'Accept: application/json' \ --header "Authorization: Bearer $MOBIFY_API_KEY" \ --data '{"ENABLE_FEATURE": {"value": "true"}}' ``` 2. [Deploy your bundle](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pushing-and-deploying-bundles.html) from your local machine to your chosen environment. ## See Also - [Environment Variables](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/environment-variables.md) - [Environment Variable Tutorials](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/environment-variables.md#tutorials) - [Troubleshoot Environment Variables](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/environment-variables.md#troubleshoot-environment-variables) - [Debugging Locally](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/debugging.html#debugging-locally)