DEV Community

Cover image for Dockerizing an angular app
Guillermo Fernandez
Guillermo Fernandez

Posted on

Dockerizing an angular app

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:

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

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

FROM node:12.7-alpine AS build
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
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'
        image: <image_name>
            - "80:80"
        tty: true
            - "80" 
        stdin_open: true
            - 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.

Top comments (1)

danielfrascarelli profile image
Daniel Frascarelli • Edited

an amazing article!! as usual , @ollita7 !