During one of my recent projects, my team faced the challenge of Dockerizing an Angular app, as we wanted the UI to be deployed in a separate container on AWS.

To understand this article, you should have a basic understanding of Docker.

Dockerization Tasks

We will start by creating an Angular application via the CLI provided by Angular: https://cli.angular.io/

Once the project is created, we need to run the command: " ng build --prod ". This will create a dist folder that contains all the deployables.

Further steps will be performed by a Dockerfile: Install Ngnix inside the Docker image using the FROM command. Remove the default HTML files inside Nginx installed on Docker. Copy contents of the dist folder to an HTML folder inside Nginx. Start Docker



Actual Implementation

Go to the directory where the new application should be created, create the app, and then start the server with the help of a few commands.

Assumption: The Angular CLI is already installed. If not, install that first.

ng new angular-docker-app cd angular-docker-app : You should see the following files inside your folder.

ng serve

The application should be running on the localhost.

http://localhost:4200/





Begin Dockerization

Create a Dockerfile inside the project folder and add the following lines to it.

FROM nginx:1.13.3-alpine ## Remove default nginx website RUN rm -rf /usr/share/nginx/html/* ## From 'builder' stage copy over the artifacts in dist folder to default nginx public folder COPY /dist /usr/share/nginx/html CMD ["nginx", "-g", "daemon off;"]





Create the Docker image and run it by using the following commands:

ng build --prod

docker build -t angulardockertest .

docker run -p 80:80 --name angulardockertest angulardockertest

Now try to hit http://localhost:80/.

Stopping the Container

Run the command docker ps to find the container id

docker stop <container Id>

docker rm <container Id>

You can download the source code here: https://github.com/86rishab/angular-docker-app.

Once Dockerization is complete, it can easily be pushed to the cloud.