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.

In this tutorial, we’ll use environment variables to alter React.js rendering without changing code. You access environment variables through process.env, 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.
Have an API key to use the Managed Runtime API. To find your API key, log in to the Runtime Admin tool and go to the 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

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’
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
Add this JavaScript code to the configuration file in your project — config/default.js:

1function parseEnvVar(envVarName) {
2  const val = process.env[envVarName];
3  if (val === undefined) {
4    throw new Error(`Environment variable ${envVarName} is required.`);
5  }
6  try {
7    return JSON.parse(val);
8  } catch (err) {
9    throw new Error(
10      `Environment variable ${envVarName} must be a valid JSON string.`
11    );
12  }
13}
14module.exports = {
15  app: {
16    enableFeature: parseEnvVar("ENABLE_FEATURE") || false,
17  },
18};

Add this JavaScript code to the home page in your project — app/pages/home/index.jsx:

1import { getConfig } from "@salesforce/pwa-kit-runtime/utils/ssr-config";
2
3const Home = () => {
4  const config = getConfig();
5  const enableFeature = config.app.enableFeature;
6  return enableFeature && <h1>My New Feature</h1>
7};
8
9export default Home;

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.