Dynamic Configuration Of Angular API URL Using Docker Compose YML File

Angular applications often have config settings that vary depending on which environment they are running in. For example, when running it in production, an application may need to use a different URL to connect to a backend API, compared with a staging environment, or locally on a developer’s machine.

So we have one option using that we set the environment variable into the config.json file.

Firstly, I will request you please read my Docker .Net Core API and Angular End-To-End Application Using Docker Compose article and follow the steps to create an application, and then you easily understand whatever things we cover in this article.

Each one of you has a few ideas like how we configure API URL using config.json file or environment.ts file as I mentioned below

{
    “apiServer”: {
        “url”: “https://localhost:8089",
        “version”: “v1”
    }
}

So here, this is the default config.json file and we set API URL to this file and use it throughout our frontend application to fetch data from the backend API.

Now we have created another JSON file which we are going to use at runtime to replace the API_LINK using the YML file. So for that, we create another file under the same folder where our default config.json is present and name it config.template.json.

{
    “apiServer”: {
        “url”: “${API_LINK}”,
        “version”: “v1”
    }
}

In the above, you can see we use ${API_LINK} variable which we are going to use in the YML file to set the dynamic API URL whatever URL we want which is in running mode.

Next, we create entryPoint.sh scripting file at root folder, with .sh extension, which Is a scripting language commands file that contains a computer program to be run by a Unix shell. It can contain a series of commands that run sequentially to carry out operations such as file processing, execution of programs, and other such tasks.

entryPoint.sh File

#!/bin/bash
envsubst < /usr/share/nginx/html/assets/config/config.template.json > /usr/share/nginx/html/assets/config/config.json && exec nginx -g ‘daemon off;’

Here you can see we use envsubst one-line command, Generally, the envsubst program can be used to feed environment variables into a file. So with our above example of a config.json file:

Then I modify my Dockerfile, so that when the container starts up, it replaces the environment variable names in the config.template.json file, with the values of those variables, and overwrites the config.json file with the result, before starting the web server.

# Stage 1: Build an Angular Docker Image
FROM node as build
WORKDIR /apps
COPY . .
RUN npm install
COPY . /apps
ARG configuration=production
RUN npm run build — — outputPath=./dist/out — configuration $configuration
# Stage 2, use the compiled app, ready for production with Nginx
FROM nginx:alpine
COPY /nginx-custom.conf /etc/nginx/conf.d/
RUN rm -rf /usr/share/nginx/html/*
COPY — from=build /apps/dist/out/ /usr/share/nginx/html
# Copy the EntryPoint
COPY ./entryPoint.sh /
RUN chmod +x entryPoint.sh
ENTRYPOINT [“sh”,”/entryPoint.sh”]
CMD [“nginx”, “-g”, “daemon off;”]

So here, you can see the last four lines in the Dockerfile, we copy the entryPint.sh file in the Nginx, Then set the permission and put it into the ENTRYPOINT.

In this section I’m using the Nginx image to run the application, If you are using anything else then make the changes as per your need.

We will use envsubst which is present in our entryPoint.sh file which is used to use for replacing the variables at runtime when the Nginx server starts.

Now we will see how we pass that API_LINK when we run the Docker Image

version: ‘3.5’
services:
webapp:
image: ${DOCKER_REGISTRY-}webapp:v1
build:
context: .
dockerfile: Dockerfile
environment:
- API_LINK=https://localhost:4015
ports:
- “4014:80”

Here, in the above docker-compose file, you can see we pass API_LINK using the environment section of docker which is used to set the configuration and we also mentioned ports 4014.

Also, one thing I want to be mentioned here, see I set the API_LINK here by using the docker-compose YML file, So If you want to set that using Dockerfile then that is also possible, It's up to you as per your need.

So next I want to set the fresh port and API_LINK in both the docker-compose file of the frontend and backend application as I mentioned below

version: ‘3.4’
services:
webapi:
image: ${DOCKER_REGISTRY-}webapi
build:
context: .
dockerfile: WebAPI/Dockerfile
ports:
- “9001:443”

So this is our backend docker-compose file of .Net Core API and we set the port 9001 and run the application using docker-compose.

In the above image, you can see our backend API is running on the 9001 port.

Next, we are going to set up the frontend docker-compose file and set the port and API_LINK into that as below.

version: ‘3.5’
services:
webapp:
image: ${DOCKER_REGISTRY-}webapp:v1
build:
context: .
dockerfile: Dockerfile
environment:
- API_LINK=https://localhost:9001
ports:
- “9002:80”

So here, see we set the API_LINK which is in running mode, and frontend port 9002 on which we want to run our frontend application.

Now you can build and run the frontend docker application using docker-compose(Note: Confirm your backend .net API is also in running mode if you use Visual Studio).

docker-compose build

docker-compose up

you can see our both frontend and backend API application is in running mode in the container section of Docker Desktop.

Here you can see our frontend is running on 9002 port which we set through docker-compose YAML file.

In the above images, see our frontend access the data from the backend URL https://localhost:9001/demo and also update the config.json file with backend API_LINK which we set using the YML file.

So this way we set all the configurations related to our backend and frontend application using YML and ensubst. I hope you have to understand all things.

Happy Learning!