Part 8. Clock-in/out System: Deploy frontend (Angular 6+) using environments
Tags: javascript, typescript, node, nest
Published: 2019-04-01 10:31:10

---
title: Part 8. Clock-in/out System: Deploy frontend (Angular 6+) using environments
published: true
description: Here is a common solution for the management of environment variables in angular, using angular-cli (which we will use shortly). Another solution is to create your own deployment system by using a tool such as gulp or webpack.
tags: javascript, typescript, node, nest
series: clock-in/out system
canonical_url: https://carloscaballero.io/part-7-deploy-docker-docker-compose/
cover_image: https://cdn-images-1.medium.com/max/1000/1*KhCkmbtORw2Ux3n5WCrtzA.png 
---

This post is part of a Series of post which I’m describing a clock-in/out system if you want to read more you can read the following posts:


* [Part 1. Clock-in/out System: Diagram.](https://dev.to/carlillo/part-1-clock-inout-system---diagram-4kgj)
* [Part 2. Clock-in/out System: Basic backend — AuthModule.](https://dev.to/carlillo/part-2-clock-inout-system-basic-backend-i--authmodule-d2l)
* [Part 3. Clock-in/out System: Basic backend — UsersModule.](https://dev.to/carlillo/part-3-clock-inout-system---basic-backend-ii---usersmodule-5hf5)
* [Part 4. Clock-in/out System: Basic backend- AppModule.](https://dev.to/carlillo/part-4-clock-inout-system---basic-backend-iii---appmodule-5anb)
* [Part 5. Clock-in/out System: Seed Database and migration data](https://dev.to/carlillo/part-5-clock-inout-system-seed-database-and-migration-data-320m)
* [Part 6. Clock-in/out System: Basic frontend.](https://dev.to/carlillo/part-6-clock-inout-system-basic-frontend---angular-28pg)
* [Part 7. Clock-in/out System: Deploy backend (nestJS) using docker/docker-compose.](https://dev.to/carlillo/part-7-deploy-backend-nestjs-dockerdocker-compose-3cmb)
* [Part 8. Clock-in/out System: Deploy frontend (Angular 2+) using environments.](https://dev.to/carlillo/part-8-clock-in-out-system-deploy-frontend-angular-6-using-environments-nog)
* [Part 9. Testing: Backend Testing — Unit Testing - Services](https://dev.to/carlillo/part-9-clock-in-out-system-testing-backend-testing-3imk)
* [Part 10. Testing: Backend Testing — Unit Testing - Controllers](https://dev.to/carlillo/part-10-testing-backend-testing-unit-testing-controllers-573a)
* Part 11. Testing: Backend Testing — E2E Testing
* Part 12. Testing: Frontend Testing — Unit Testing
* Part 13. Testing: Frontend Testing — Integration Testing

### Introduction

In the last post (Part 7. Clock-in/out System: Deploy backend (nestJS) using docker/docker-compose), we deployed our system’s backend using environment
variables and docker/docker-compose in a production server. In this post, we will deploy our frontend, developed in Angular, using environment variables (created with Angular CLI) and docker/docker-compose.

Here is a common solution for the management of environment variables in angular, using angular-cli (which we will use shortly). Another solution is to create your own deployment system by using a tool such as gulp or webpack.

Finally, our code is deployed using [docker’s containers](https://www.docker.com/). We will create an image from our code, and
[docker-compose](https://docs.docker.com/compose/).

### Angular’s Environment variables

By default, the Angular CLI creates an src/environments folder which contains environment files. Initially, there are two files: 1) `environment.ts` and 2) `environment.prod.ts`.

The `environment.ts` file is used for a development environment, while the `environment.prod.ts` file is used in production environments. These files are both referenced in the `angular.json` file.

![](https://cdn-images-1.medium.com/max/1000/1*gypdxSLP_4U_Q3cfwX8RUA.png)

The `fileReplacements` array is angular's environment key, since it is used to indicate which file will be replaced when `production` configuration is used.

In our code, we only need to import the object from the environment file to use our environment variables. The following code shows a component which imports said environment file.

![](https://cdn-images-1.medium.com/max/1000/1*gbYlLmnTSqej5MJJgFJM-Q.png)

The method to switch between different environments is to use the `--configuration` option , which may be used in both `ng serve` and `ng build` commands:

![](https://cdn-images-1.medium.com/max/1000/1*ahv-Zh0V0J3vpJzn8ecgVg.png)

We can have as many configuration environments as we like. For example:

1.  `environment.test.ts`. This configuration can be used to change several variables in unit test environment.
2.  `environment.e2e-test.test`. This configuration can be used to change several variables in e2e test environment.
3.  `environment.qa.ts` . This configuration can be used to change several variables in QA environment.

Therefore, the content of our environment files is the following:

![](https://cdn-images-1.medium.com/max/1000/1*9kmbQgGylnR-R7UUJ7DlfQ.png)

![](https://cdn-images-1.medium.com/max/1000/1*zsJGyAu-LnMkx61GxxGBZg.png)

The variables which change between environmnent files are `APIENDPOINT_BACKEND`
and `production`. The `production` variable is used in the `main.ts`file to call the `enableProdMode` which is used to make several optimizations in the final `bundle`.

![](https://cdn-images-1.medium.com/max/1000/1*t5OWGAJoZc50KEWUuHknog.png)

In our project, there is a file which contains the project’s constants. This file contains the list of endpoints, which are relations using the `APIENDPOINT_BACKEND`. The idea is to use the environment file (`environment`), as you may observe in the following code:

![](https://cdn-images-1.medium.com/max/1000/1*sE-LerIthjLeph633v8mmQ.png)

### Deploy: Docker and Docker-compose

The idea is to use the same environment in both development and production. In this context, Docker is the perfect tool, due to it allowing us to configure different containers, which switch the environment’s configuration. We need to build our own image, a docker container, which will be orchestrated by using `Docker-compose`.

### Docker

Our `dockerfile` file is based on the `nginx:alpine` image, due to the project not needing a system library. This image merely copies the `nginx.conf` configuration and the angular project after it built to distribution using the command `ng build --configuration=prod`.

![](https://cdn-images-1.medium.com/max/1000/1*oBp4fJbUzIom-8Bq2vcTdg.png)

It is very important for the angular code to be deployed in a webserver, such as `apache` or `ngnix`.

The `nginx` configuration is now the following:

![](https://cdn-images-1.medium.com/max/1000/1*5sKR7uuRlklbxaDUgOlsLA.png)

### Docker-compose

In our project, we have a docker-compose file which is used to deploy our docker image. The file is very simple, since it merely deploys the container which
contains the compiled code of our Angular project.

![](https://cdn-images-1.medium.com/max/1000/1*MSUJCC_TNf8ElC-9Rcu0TA.png)

### Shell script to deploy

The last step of our process would be to automate the construction and execution of the containers. I have two scripts to do this task; the first script creates the image (first removing the image, should there be one) and the second script
deploys the code by using docker-compose.

![](https://cdn-images-1.medium.com/max/1000/1*xAerpYSNPjixJH3gfGXDNQ.png)

![](https://cdn-images-1.medium.com/max/1000/1*M9WUfCPHSZZqXr1OxoIjCA.png)

### Conclusion

In this post I’ve explained how you can deploy your frontend with Angular by using docker and docker-compose. The most interesting feature of this code, is the fact that we can load our own environment variables, switching between development and production environments using Angular-CLI.

*****

Originally published at [www.carloscaballero.io](https://carloscaballero.io/part-8-deploy-frontend-angular-docker-docker-compose/) on February 15, 2019.