Dockerize an Angular App with Nginx

1. How to create angular application?

Before creating angular application you need to setup development environment and install required tools. Before going further install the following:

Installing Angular CLI

npm install -g @angular/cli@latest

To create an initial application, navigate to the folder where you want to create an application, and execute the command ng new [project name] in the terminal window.

C:\@supriya>ng new angular-app

2. Create and Writing Dockerfile in our Angular app folder.

A Dockerfile is a text file that contains instructions for creating a Docker image. Docker can build images automatically by reading the instructions from a Dockerfile. A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image.

At the root of the project create a Dockerfile as shown below.

Copy below instructions to Dockerfile

# Download Node latest image from docker hub
FROM node:latest as node

# Create directory
RUN mkdir -p /usr/src/app

# Set working directory
WORKDIR /usr/src/app/

# Copy other files to working directory
COPY package.json .
COPY package-lock.json .

#Install dependencies
RUN npm install 
RUN npm install @angular/cli

# Copy other files and folder to working directory
COPY src ./src
COPY angular.json .
COPY tsconfig.json .
COPY tsconfig.app.json .
COPY .browserslistrc .

# Build Angular application
RUN npm run build

# To serve the static content we need NGINX.
# Download NGINX Image
FROM nginx:alpine

# Copy built angular app files to NGINX HTML folder
COPY --from=node /usr/src/app/dist/angular-app /usr/share/nginx/html

#nginx configuration
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app/
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Exposing a port, here it means that inside the container 
# the app will be using Port 80 while running
EXPOSE 80

Create nginx.conf at the root of the project

Copy paste the below code to nginx.conf

server {
    listen 80;
    server_name _;
    root /usr/share/nginx/html;
    index index.html;

    location / {
            try_files $uri $uri/ /index.html;
    }
}

3. Create image from Dockerfile

docker build -t angular-app .

-t: Tag if not specified, docker will take latest by default

Note: If you are facing ng build error: Invalid version: "15.2-15.3"

Update "@angular-devkit/build-angular": "~13.2.5",

4. Create a docker container

docker run -p 8000:80 angular-app

-p: 8000:80 Here you'll need to define a port on which the container will be hosted and the port on which app is hosted inside the container

Syntax: [host-port]:[docker-port]

5. Build and run Angular application in a Docker container

Docker container running on Port 8000 and your application running on localhost:8000

If you’re interested in Docker topic you can check my other blog posts:

Docker - Complete Beginner’s guide

Docker Commands with Examples

Supriya's blog