Templates
SPA on CloudFront

Add Custom Variables

5min
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 microtica/schema json { "properties" { "inputs" { "mycustomvar" { "type" "string" } } }, } update the cloudformation template by adding the new variable as parameter and then reference the parameter in the deploymentcustom resource properties microtica/index json { "parameters" { "mycustomvar" { "type" "string" } }, "resources" { "deploymentcustom" { "type" "aws cloudformation customresource", "properties" { "mycustomvar" { "ref" "mycustomvar" } } } } } 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 microtica/functions/deployment/src/index ts async function uploadfiles(event cloudformationcustomresourceevent) promise\<void> { await s3 upload({ bucket destinationbucket, key path, body `window\ env=${json stringify({ backend endpoint event resourceproperties backendendpoint, // new environment variable here mycustomvar event resourceproperties mycustomvar })}`, contenttype mime lookup(path) || null }) promise(); } at the end, please check if you have the /env js file imported in the public/index html file public/index html 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