Using Environment Variable With Angular

This article will help you use environment variables to replace generic variables you want to use inside any Angular project.

Developing an application can be done with just localhost URLs, but when it comes to building and deploying software, we need to change these URLs to appropriate values.

While working with Angular, it might be painful to replace all these values without making any mistakes or complex configurations. Some guides say it can be done by configuring “Webpack,” but I find them quite confusing. Here is a workaround solution that will work for all bundlers and can also work with Docker builds.

The method I will tell you about will work with all NodeJS-based projects. You can probably adapt this method to other languages.

Firstly, we need to determine which parameters should be replaced for different environments. It is mostly backend HTTP request URLs that need to be changed. We will create a file for templating these variables.

Create a new folder under src/ named environments and a new file called environment.template.ts. Add your variables as shown below. You can add as many variables as you want.

export const environment = 

{

    production: '${IS_PRODUCTION}',

    API_URL: '${BACKEND_URL}${BACKEND_PORT}'

};

After you have created the template file, let’s add a JS file for replacing these values. This script will go through your environment variables and replace their values with them. What it does is similar to the envsubst command on Linux. 

//replace_environment_variables.js file

const fs = require("fs");

// this will get argument from command line

let config = process.argv[2];

// read template file as string

let template_environment = fs.readFileSync("./src/environments/environment.template.ts").toString();

// for every keys you have defined on environment this will loop over them and replace the values accordingly

Object.keys(process.env).forEach(env_var => {

    template_environment = template_environment.replaceAll(`\${${env_var}}`,process.env[env_var])

});

// if config is given use it on file name.

if(config)

    fs.writeFileSync(`./src/environments/environment.${config}.ts`, template_environment);

else

    fs.writeFileSync("./src/environments/environment.ts", template_environment);

Lastly, we need to run this script before the “ng serve” or “ng build” command. To do that, we need to add commands to NPM scripts inside package.json. Add “replace-vars” to the scripts section of the package.json file. You can pass arguments while running this command like `npm run replace-vars prod.` This will create an environment file with a given input, such as environment.prod.ts. 

"scripts": {

    "ng": "ng",

    "replace-vars": "node ./src/environments/replace_environment_variables.js",

    "start": "npm run-script replace-vars && ng serve",

    "build": "npm run-script replace-vars && ng build",

  }

You can also combine this script with ng build and ng serve. It should run just one time to replace those variables so you can skip combining commands, as shown above.

Inside the replace_environment_variables.js file, you can get your variables from wherever you want, connect to a database, or make a request to an API; it is your choice as your requirement goes.

Let’s see how can we use this logic inside a Dockerfile. First, we need to define arguments that will be used for replacing environment.template.ts.

FROM node:latest as node

ARG BACKEND_API_PORT 

ARG BACKEND_API_URL

WORKDIR /app

ARG BACKEND_URL=$BACKEND_API_URL

ARG BACKEND_PORT=$BACKEND_API_PORT

RUN npm install

RUN npm run build --prod

Now, we can pass these arguments as docker build-arg. You can either use your environment variables where you build your docker images, or we can pass them manually. 

# For linux

docker build --build-arg BACKEND_API_URL=$BACKEND_API_URL --build-arg BACKEND_API_PORT=:$BACKEND_API_PORT -t docker-image-name:latest .

# For windows

docker build --build-arg BACKEND_API_URL=$Env:BACKEND_URL --build-arg BACKEND_API_PORT=:$Env:BACKEND_PORT -t docker-image-name:latest.

# Manuel variable passing

docker build --build-arg BACKEND_API_URL=http://some-cool-address.com/api --build-arg BACKEND_API_PORT=:8443-t docker-image-name:latest.

After the build is done, you can check if the container is replaced correctly by running the container with the below command.

docker run -it container-id bash

cat src/environments/environment.ts

You should see your input from the Docker build command.

We Provide consulting, implementation, and management services on DevOps, DevSecOps, DataOps, Cloud, Automated Ops, Microservices, Infrastructure, and Security

Services offered by us: https://www.zippyops.com/services

Our Products: https://www.zippyops.com/products

Our Solutions: https://www.zippyops.com/solutions

For Demo, videos check out YouTube Playlist: https://www.youtube.com/watch?v=4FYvPooN_Tg&list=PLCJ3JpanNyCfXlHahZhYgJH9-rV6ouPro

If this seems interesting, please email us at [email protected] for a call.

Relevant Blogs: