Angular Environment Variables for Flexible Builds and Docker
Managing Angular environment variables is simple during local development. However, things change once you start building and deploying applications. At that stage, hardcoded URLs and config values quickly become a risk.
Fortunately, you can replace these values safely without complex Webpack changes. In this guide, you will learn a clean and bundler-agnostic way to handle Angular environment variables. Moreover, this approach works well with Docker and Node.js-based projects.
Why Angular Environment Variables Matter in Real Projects
During development, localhost URLs are enough. However, production environments demand different API endpoints, ports, and feature flags.
Because of this, teams often struggle with manual edits or fragile build scripts. As a result, deployments become error-prone and hard to scale.
Angular environment variables solve this problem by keeping configuration flexible. At the same time, they support cleaner CI/CD pipelines and containerized builds.
Defining Angular Environment Variables with a Template
Create an Environment Template File
First, decide which values should change between environments. In most cases, backend API URLs are the main concern.
Next, create a new folder under src/ called environments. Inside it, add a file named environment.template.ts.
export const environment = {
production: '${IS_PRODUCTION}',
API_URL: '${BACKEND_URL}${BACKEND_PORT}'
};
This file acts as a blueprint. Therefore, you can add as many variables as needed without touching application logic.
Replacing Angular Environment Variables Using Node.js
Build a Simple Replacement Script
Now, create a JavaScript file named replace_environment_variables.js. This script scans system variables and replaces matching placeholders in the template.
const fs = require("fs");
let config = process.argv[2];
let template_environment = fs
.readFileSync("./src/environments/environment.template.ts")
.toString();
Object.keys(process.env).forEach(envVar => {
template_environment = template_environment.replaceAll(
`\${${envVar}}`,
process.env[envVar]
);
});
if (config) {
fs.writeFileSync(
`./src/environments/environment.${config}.ts`,
template_environment
);
} else {
fs.writeFileSync(
"./src/environments/environment.ts",
template_environment
);
}
This logic works like the Linux envsubst command. Consequently, it remains compatible with any Angular bundler.
Running Angular Environment Variables Before Build
Update NPM Scripts
To apply the replacement automatically, update the scripts section in package.json.
"scripts": {
"ng": "ng",
"replace-vars": "node ./src/environments/replace_environment_variables.js",
"start": "npm run replace-vars && ng serve",
"build": "npm run replace-vars && ng build"
}
As a result, Angular environment variables are injected before every build or serve command. You can also pass arguments, such as npm run replace-vars prod, to generate environment-specific files.
Using Angular Environment Variables in Docker Builds
Define Build Arguments in Dockerfile
Angular environment variables integrate cleanly with Docker. First, define build arguments inside your Dockerfile.
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
Because these values are injected at build time, the final image remains clean and secure.
Pass Variables During Docker Build
You can now pass values using docker build.
# Linux
docker build \
--build-arg BACKEND_API_URL=$BACKEND_API_URL \
--build-arg BACKEND_API_PORT=:$BACKEND_API_PORT \
-t angular-app:latest .
# Windows
docker build `
--build-arg BACKEND_API_URL=$Env:BACKEND_URL `
--build-arg BACKEND_API_PORT=:$Env:BACKEND_PORT `
-t angular-app:latest .
# Manual values
docker build \
--build-arg BACKEND_API_URL=http://api.example.com \
--build-arg BACKEND_API_PORT=:8443 \
-t angular-app:latest .
After the build completes, verify the output:
docker run -it angular-app:latest bash
cat src/environments/environment.ts
You should see the resolved Angular environment variables inside the container.
Best Practices for Angular Environment Variables
According to the official Angular documentation, environment configuration should stay simple and predictable to support CI/CD workflows (Angular Docs – Configuration Guide).
Therefore, avoid runtime mutation inside the app. Instead, inject values during build time, especially when working with containers and microservices.
Scaling Angular Environment Variables with ZippyOPS
As applications grow, configuration management becomes part of a bigger operational picture. This is where ZippyOPS adds value.
ZippyOPS provides consulting, implementation, and managed services across DevOps, DevSecOps, DataOps, Cloud, Automated Ops, AIOps, and MLOps. In addition, teams benefit from expertise in Microservices, Infrastructure, and Security.
If you are standardizing Angular environment variables across cloud-native platforms, ZippyOPS can help design scalable pipelines and secure build workflows. You can explore their
services: https://zippyops.com/services/
solutions: https://zippyops.com/solutions/
products: https://zippyops.com/products/
For practical demos and tutorials, their YouTube channel offers hands-on insights: https://www.youtube.com/@zippyops8329
Conclusion: A Simple and Scalable Approach
Angular environment variables do not need complex tooling. Instead, a small Node.js script combined with Docker build arguments provides a clean and reliable solution.
In summary, this approach improves deployment safety, supports containerized builds, and scales well with modern DevOps practices.
If you want expert guidance on implementing this across enterprise environments, contact ZippyOPS at sales@zippyops.com.
