🐳 Dynamic Docker Environments: Angular & .NET Edition 🔄
🚀 Optimizing Angular & .NET Apps with Runtime Variables 🚀
Welcome back to the second part of our Docker journey with Angular & .NET! In the previous part, we explored the process of migrating our Angular and .NET application into Docker containers. We delved into accessing and managing these applications within Docker, laying a solid foundation for seamless deployment.
In this continuation, we aim to enhance the flexibility and adaptability of our setup by dynamically parameterizing Angular and .NET environment variables within Docker. Our focus lies in understanding how to modify these variables during runtime and seamlessly integrate them into Docker’s environment.
Angular applications traditionally embed environment variables during the build process, making them static and requiring separate builds for different environments. However, within the containerized world, configuring applications through environment variables is a prevalent practice. We’ll explore how to transition from static to dynamic configuration, empowering us to effortlessly manage our Angular application across diverse Docker environments.
Let’s dive into the intricacies of this process and uncover the steps to achieve seamless environment variable management within Docker. By the end, you’ll be equipped with the knowledge to streamline your Angular and Dotnet application’s adaptability and resilience in any Docker environment.
Understanding Angular and .NET Environment Variables
The Angular and .NET applications utilize hardcoded URLs to connect to the backend during the login and signup processes.
Angular application:
login.component.ts
login() {
if (!this.loginData.Username || !this.loginData.Password) {
this.errorMessage = 'Please enter both Username and Password.';
return;
}
this.http.post<any>('http://165.232.144.187:8081/api/Auth/login', this.loginData)
.subscribe(response => {
// Handling successful login response
console.log('Login successful', response);
// Redirect to dashboard
this.router.navigate(['/home', this.loginData.Username]);
}
);
}signup.component.ts
signup() {
if (!this.signupData.Username || !this.signupData.Password || !this.signupData.confirmPassword) {
this.errorMessage = 'Please fill all fields.';
return;
}
if (this.signupData.Password !== this.signupData.confirmPassword) {
this.errorMessage = 'Passwords do not match.';
return;
}
this.http.post('http://165.232.144.187:8081/api/Auth/signup', this.signupData)
.subscribe( response => {
// Handle successful signup response
console.log('Signup successful', response);
// Redirect to login page or perform any other action upon successful signup
this.router.navigate(['/login']);
})
}Dotnet application:
Promgram.cs
builder.Services.AddCors(options =>
{
options.AddPolicy("AllowOrigin",
builder => builder.WithOrigins("http://165.232.144.187")
.AllowAnyHeader()
.AllowAnyMethod());
});The above three login.component.ts, signup.component.ts, and Program.cs files have hardcoded URL’s which will be used to connect backend(i.e., dotnet) and frontend(i.e., Angular) respectively.
However, relying on these static URLs presents challenges, especially in dynamic deployment environments like Docker.
To address this, we’ll transition from static URLs to dynamic configuration using environment variables. By doing so, we ensure flexibility in specifying backend URLs during runtime, facilitating seamless application deployment across different environments.
Implementing Dynamic Configuration in Angular
In Angular, we modify components such as login.component.ts and signup.component.ts to utilize dynamic backend URLs. Instead of hardcoded URLs, we utilize environment variables imported from the environment.ts file.
Let’s create environment.ts under client/src/environments/environment.ts with below content.
By referencing environment variables, such as apiUrl, we ensure that backend URLs can be configured dynamically during runtime. Now update the components files(login.component.ts and signup.component.ts) according to the environment variables.
login.component.ts
signup-component.ts
If you want to make API_URL dynamic and get its value from an environment variable provided by Docker Compose, you can create the shell script to read the value dynamically from an environment variable. And this script can be a ENTRYPOINT in your dockerfile. So that before the application get started, API_URL value load from the docker compose environment variable.
entrypoint.sh
Now, when you run your Docker container, you can pass the API_URL environment variable through Docker Compose, and it will be dynamically read by the script and used to replace the placeholder in environment.ts.
This approach streamlines the deployment process, allowing Angular applications to seamlessly adapt to different backend configurations without code modifications.
Implementing Dynamic Configuration in Dotnet
In Dotnet, we modify Program.cs to utilize dynamic frontend URLs. Instead of hardcoded URLs, we utilize system environment variables(i.e., container system variables) imported from the Dockerfile.
By reading the CORS origin URL directly from the environment variable CORS_ORIGIN_URL, you can dynamically configure the CORS policy without hardcoding any values in your code.
Updated Program.cs file
Here we have added below line
// Read CORS origin URL from environment variable
var corsOriginUrl = builder.Configuration["CORS_ORIGIN_URL"];You can retrieve the CORS origin URL from the environment variable CORS_ORIGIN_URL.
This approach allows you to change the CORS origin URL without modifying the code, simply by updating the environment variable CORS_ORIGIN_URL.
Build Docker Images for above changes
You can directly clone the all docker files and dependent code by using the below command.
git clone https://github.com/anveshmuppeda/docker-with-dotnet.gitBuild Angular Docker Image:
Run the docker build command to build the Docker image for the frontend.
$ cd docker-with-dotnet/dockerfiles/frontend
$ docker build -t frontend-image-name:tag --file angular.Dockerfile .Build Dotnet Docker Image:
$ cd docker-with-dotnet/dockerfiles/backend
$ docker build -t backend-image-name --file dotnet.Dockerfile .Write Docker Compose File
Create docker-compose.yml using below content
Testing and Validation
Deploy Application:
- Open a terminal and navigate to the directory containing your
docker-compose.ymlfile(i.e, docker-with-dotnet/dockerfiles). - Run the
docker-compose upcommand to start the deployment.
docker-compose up -dVerify Deployment:
- Access your application using the specified ports (e.g.,
http://<angular-url>:80). - Verify that both frontend and backend services are running correctly.
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
1f3ef00d910b anvesh35/docker-with-dotnet:dotnet-vcdaaa30 "/opt/bitnami/script…" 28 hours ago Up 28 hours 0.0.0.0:8081->5106/tcp, :::8081->5106/tcp dockerfiles_backend_1
3d1b938c7c32 anvesh35/docker-with-dotnet:angular-vdc711b3 "entrypoint.sh ng se…" 28 hours ago Up 28 hours 0.0.0.0:80->4200/tcp, :::80->4200/tcp dockerfiles_angular_1
Conclusion
By following these next steps, you’ll create a comprehensive and informative guide that empowers readers to optimize their Angular and .NET applications for dynamic configuration within Docker environments.
Source Code
You’re invited to explore our GitHub repository, which houses a comprehensive collection of source code for Docker With Dotnet, alongside Application code, Docker files and handy installation guides. Dive in to access valuable resources for deploying simple Docker with dotnet in a DevOps real time environment.
Also, if we welcome your feedback and suggestions! If you encounter any issues or have ideas for improvements, please open an issue on our GitHub repository. 🚀
Releases
Stay updated with our project milestones and releases on GitHub:
- Version 1.0.1: Release v1.0.1
- Version 2.0.0: dynamic
Contributors
Our project thrives on community collaboration. Meet our dedicated contributors:
Teja Sai Srinivas Khajjayam : Github Repos
Saketh Rao Vardhineni : Github Repos
Connect with me
If you found this blog insightful and are eager to delve deeper into topics like AWS, cloud strategies, Kubernetes, or anything related, I’m excited to connect with you on LinkedIn. Let’s spark meaningful conversations, share insights, and explore the vast realm of cloud computing together.
Feel free to reach out, share your thoughts, or ask any questions. I look forward to connecting and growing together in this dynamic field!
Happy deploying! 🚀
Happy Dockerizing! 🚀
