Depending on the environment they are being used in, Angular applications frequently have different configuration options. An application may require a different URL to connect to a backend API when running in production as opposed to a staging environment or locally on a developer’s machine.
Consequently, we only have one choice: we may set the environment variable in the config.json file.
I’ll start by asking that you read my Docker. You may easily comprehend everything we cover in this post if you read the Net Core API and Angular End-To-End Application Using Docker Compose article and follow the instructions to develop an application.
Each of you has some suggestions for how to configure the API URL using the environment.ts file or the config.json file, as I’ve described below.
{
“apiServer”: {
“url”: “https://localhost:8089",
“version”: “v1”
}
}
In order to fetch data from the backend API, we set the API URL to this file, which we then utilize throughout our frontend application. This is the default config.json file.
Now that we have another JSON file, we can use it at runtime to swap out the API LINK for the YML file. Therefore, we make a new file with the name config.template.json and place it in the same location as our default config.json.
{
“apiServer”: {
“url”: “${API_LINK}”,
“version”: “v1”
}
}
As you can see in the example above, we are using the $API LINK variable to set the dynamic API URL, which can be any URL that is in running mode.
The next step is to create the entry point.sh scripting file, which has the.sh extension and contains a computer program that can be run by a Unix shell. It may include a string of commands that are executed one after the other to perform actions like processing files or running programs, among other things.
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;’
You can see that we used the one-line envsubst command here. Typically, environment variables can be added to a file using the envsubst program. As a result, using the config.json file example from above:
Then I change my Dockerfile such that, before starting the web server, the container overwrites the config.json file with the result and changes the environment variable names in the config.template.json file with their values.
# 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;”]
As you can see in the Dockerfile’s final four lines, we copy the entry point.sh file into Nginx, adjust the file’s permissions, and then place it in the entry point.
I’m running the application in this section using the Nginx image; if you’re using something different, adjust as necessary.
At
version: ‘3.5’
services:
webapp:
image: ${DOCKER_REGISTRY-}webapp:v1
build:
context: .
dockerfile: Dockerfile
environment:
- API_LINK=https://localhost:4015
ports:
- “4014:80”
You can see that we specified ports 4014 and passed API LINK utilizing the environment section of the docker file, which is used to set configuration, in the aforementioned docker-compose file.
Another point I want to make is that you can see that I set the API LINK using a Docker-compose YML file. However, you are free to configure it using a Dockerfile if it suits your needs.
Next, as I said below, I want to create a new port and API LINK in the docker-compose files for the frontend and backend applications.
our entry point.sh file, which is used to replace variables at runtime when the Nginx server starts, we will use envsubst.
When we launch the Docker Image, we will now see how we pass that API LINK.
version: ‘3.4’
services:
webapi:
image: ${DOCKER_REGISTRY-}webapi
build:
context: .
dockerfile: WebAPI/Dockerfile
ports:
- “9001:443”
So, this is the docker-compose file for our backend. Net Core API, port 9001 is specified, and docker-compose is used to start the application.
You can see that the 9001 port is where our backend API is executing in the image up top.
The port and API LINK will be set into the frontend docker-compose file as seen below.
version: ‘3.5’
services:
webapp:
image: ${DOCKER_REGISTRY-}webapp:v1
build:
context: .
dockerfile: Dockerfile
environment:
- API_LINK=https://localhost:9001
ports:
- “9002:80”
Since we want to execute our frontend application on frontend port 9002, you can see that we have configured the API LINK, which is in running mode, in this instance.
Using docker-compose, you can now create and execute the frontend docker application (Note: Confirm your backend .net API is also in running mode if you use Visual Studio).
docker-compose builddocker-compose up
In the container area of Docker Desktop, you can see that our API application’s frontend and backend are both in the running mode.
You can see that our frontend is currently running on port 9002 thanks to a docker-compose YAML configuration file.
See how our frontend updates the config.json file with the backend API LINK that we set using a YML file, as well as how our frontend accesses the data from the backend at https://localhost:9001/demo in the photos above.
Thus, using YML and ensubst, we configured all aspects of our backend and frontend applications in this manner. I’m hoping you can comprehend everything.
