Add Custom Variables

By default, this template comes with one predefined environment variable called BACKEND_ENDPOINT. This variable can be used in the ReactJS application with window.env.BACKEND_ENDPOINT.

You can also add more custom environment variables by following the steps below. In this example we will add a new variable called MyCustomVar.

• Update the input properties in the ./.microtica/schema.json file by adding the new variable of type string.

• Update the CloudFormation template by adding the new variable as parameter and then reference the parameter in the DeploymentCustom resource properties.

• The last step is to update the logic that provides the environment variable in your web application. This code stores a /env.js file that assigns all environment variables under window.env. The new variable can be used with window.env.MyCustomVar.

• At the end, please check if you have the /env.js file imported in the public/index.html file.

• Commit and push your changes. Automated build and deploy should start, once the deployment is done, go to Website resource settings, enter the value of the new environment variable

You can repeat the same process for additional environment variables.