DEV Community

loading...
Cover image for Dockerizing an angular app

Dockerizing an angular app

Guillermo Fernandez
Guillermo is a Computer Engineer graduated from the UDELAR ( Universidad de la Republica). He is a very dedicated and passionate professional with more than 10 years in the software industry.
・2 min read

In this article I will show you how to dockerize an angular application using nginx server. If you would like more information about the nginx server you can find it here: https://www.nginx.com/

To get started we create a dockerfile with two stages:

Stage 1
Installing and building the angular application:

  1. Copy the angular code from a local machine to a docker machine.
  2. Copy the packages.json to install dependencies.
  3. Install the angular-cli and npm dependencies.
  4. Build an angular application.

For this stage we use a node machine image from the dockerhub https://hub.docker.com/_/node

Stage 2

  1. Copy the angular dist folder from the previous docker machine named build on to the nginx location folder.
  2. Then we use the default cmd that starts the nginx server.

For this stage we will use a node machine from the dockerhub https://hub.docker.com/_/nginx

FROM node:12.7-alpine AS build
WORKDIR /app
COPY / ./
COPY package*.json ./

RUN npm install -g @angular/cli@10.0.4 && \
    npm install && \
    ng build
COPY . .
Enter fullscreen mode Exit fullscreen mode

STAGE 2: Run

FROM nginx:1.17.1-alpine
WORKDIR /app
COPY --from=build /app/dist/ui /usr/share/nginx/html
Enter fullscreen mode Exit fullscreen mode

Once that is done, we will create the Dockerfile, and build the image to run it.

> docker build -t <image_name> -f Dockerfile .
Enter fullscreen mode Exit fullscreen mode

Now we can verify if the image is created by running the following command.

> docker images
Enter fullscreen mode Exit fullscreen mode

Now that we have created the image in order to run it we have two options:.
1) Run it using the docker command line or 2) run it using the docker-compose.
If we decide to run it using the docker-compose we have to create a docker-compose.yml file like this:

version: '3'
services:
    server:
        image: <image_name>
        ports:
            - "80:80"
        tty: true
        expose:
            - "80" 
        stdin_open: true
        environment:
            - MODE=dev
        command: <command to run>
Enter fullscreen mode Exit fullscreen mode

If we want to run a command when we run the image we can specify on command.
In addition to that, we can run the image without the docker-compose by using a command line.

docker run -d -p 80:80 <image_name> command
Enter fullscreen mode Exit fullscreen mode

Hope you liked and also helps you in case you have to dockerize an angular app.

Discussion (1)

Collapse
danielfrascarelli profile image
danielfrascarelli • Edited

an amazing article!! as usual , @ollita7 !