website logo
Sign Up PricingApp Templates
⌘K
⏰Changelog
📚Ready-to-use Templates
Strapi Serverless
Medusa Server
Appwrite
SPA on CloudFront
Amazon EKS
Node.js
n8n Workflow Automation
Next.js
🚀Getting started
Create an account in Microtica
Create an application from template
Import an existing application
Scaling Applications in Microtica
Assign a Custom Domain
🔄Integrated CI/CD
Manual deployments
Automated deployments
Deploy from multiple Git branches
Pipeline Notifications
Deployment Insights
đŸšĻPipelines
Pipeline Syntax
Steps
Stages
Artifacts
Variables
â†Šī¸Automated Rollbacks
💰Cloud Cost Optimization
Cost Reports
Cost Dashboard
Automated Saving Schedules
🔗Integrations
Connect an AWS account
Connect an Existing Kubernetes Cluster
Connect a Container Registry
🤖Migrate to Microtica
Migrate from Heroku to AWS
âš™ī¸Project Settings
Manage teammates
Manage pricing plan and billing
Docs powered by
Archbee
Ready-to-use Templates
SPA on CloudFront

Add Custom Variables

7min

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
|
<html lang="en">

<head>
    <!-- 
      Import environment variabes provided through Microtica Portal.
      Variables will be assigned on window.env
      
      E.g. window.env.BACKEND_ENDPOINT
    -->
    <script src="/env.js"></script>
</head>

</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
Add Custom Variables in Microtica
Add Custom Variables in Microtica
īģŋ

You can repeat the same process for additional environment variables.

Updated 03 Mar 2023
Did this page help you?
PREVIOUS
Configure a Custom Domain
NEXT
Amazon EKS
Docs powered by
Archbee
Docs powered by
Archbee