Deploy Angular and Express app in Docker Containers

In this blog post I would like to show you how to run your Angular application and Express application in Docker container.

As we are focusing on containerization of application only, so we will not go into creating express application or angular application

Lets start with the Express Application first :

When you are done with your express application creation and development and tested it locally then copy all files and directories except node_modules and paste in seperate new directory with any name.
In this example we are using expressapp as new directory name.

Create a file named Dockerfile in parent directory of expressapp and paste the below code into it

FROM node:12
WORKDIR /usr/src/app
COPY expressapp/package*.json ./
RUN npm install
COPY expressapp/ .
EXPOSE 3001
CMD [“node”, “app.js”]

Let’s understand step by step whats happening above:
1. In first step we pulled node:12 image from docker hub
2. Changed our working directory to /usr/src/app
3. Copied package.json from our expressapp directory to our containers working directory.
4. Installing node dependencies
5. Copy express application files to working directory
6. Exposing port where our express app will run i.e. app.listen(3001)
7. Command to run the express app on container start

Now we will create docker image using above Dockerfile,
We will use below command for it

docker build --tag express-web-app .

To Run container with above image, use command

docker run --name firstexpressapp -p 8080:3001 -d express-web-app 

To check container is running in terminal type:

$ docker container ls
CONTAINER ID  IMAGE            STATUS         NAMES
f7086a503ddb  express-web-app  Up 8 minutes  firstexpressapp

And if you now enter http://localhost:8080/ you’ll see that it’s running!
We are done with deployment of our express application app.

Now let’s move to containerization of Angular application

First create build of Angular application using below command

ng build --prod

After completion of above command execution ,in your angular application directory a new directory with name “dist” is created and inside dist another directory with your app_name got created which conatiner all build files.
We are going to use this app_name build directory for deployment

Create a new Dockerfile inside “dist” folder and paste below code into it

FROM docker.io/nginx:latest
COPY default.conf /etc/nginx/conf.d/default.conf
COPY app_name /usr/share/nginx/html
RUN chown -R nginx:nginx /usr/share/nginx/html/
EXPOSE 4200

Create one more file default.conf and paste below code into

server{
listen 4200;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html{
root /usr/share/nginx/html;
}
location /api{
proxy_pass http://localhost:4200/api;
}
}

Let’s understnd whats happening here:

1. We are using nginx as web server so we pulled nginx image from docker hub.
2. To overwrite default configurations of nginx with our configurations, we replaced default.conf file of nginx with our default.conf file.
3. Copy our angular app index.html and other build files to nginx/html.
4. Setting permissions for nginx.
5. Expose port on which our app will run. Here we using 4200 but we can choose any unutilized port.
   Note — The port we expose from Dockerfile and port value of listen property in default.conf file should be same.

Create docker image for this angular application using command

docker build --tag angular-app .

To launch container with above image, run command

docker run --name firstangularapp -p 8081:4200 -d angular-app

To check container is running in terminal type:

$ docker container ls
CONTAINER ID  IMAGE        STATUS         NAMES
f7086a503ddb  angular-app  Up 12 minutes  firstangularapp

Now enter http://localhost:8081/ you’ll see that it’s running!

We hope this tutorial helped you get up and running a simple Express application and Angular application on Docker.