Dockerize and run angular Application in an efficient way

Agenda

  • Introduction
  • A short introduction to Angular.
  • Create Angular Project.
  • Create Dockerfile.
  • Build Docker Image.
  • Run the image.
  • Make our image more efficient.
  • Conclusion

Introduction

A short introduction to Angular:

How is the Angular application deployed on the cloud server?

How to deploy the Angular application using Docker?

Create Angular Project:

Note

ng new docrize-angular-app

Create Dockerfile:

# first stage of building angular image
FROM node:slim as build
RUN mkdir -p /app
WORKDIR /app
COPY package.json /app/
RUN npm install
COPY . /app/
RUN npm run build --prod

# second stage
FROM nginx:alpine
COPY --from=build /app/dist/docrize-angular-app /usr/share/nginx/html

First stage

  • FROM node:slim as buildgetting Node Docker image from the registry and naming the compilation stage as build (so we will be able to refer to it in another stage). Check the node image from here
  • RUN mkdir -p create a new directory if it doesn’t exist, -p means create the directory if it doesn’t exist otherwise will not create it.
  • WORKDIR setting default work directory.
  • COPY copying package.json file from local root directory - this file contains all dependencies that our app requires,
  • RUN npm installinstalling necessary libraries (based on a file copied in the previous step).
  • COPY copying all remaining files with a source code.
  • RUN and finally compiling our app.

Second stage

  • FROM nginx:alpine getting Nginx Docker image from the registry. Check the node image from here
  • COPY ... Copy the compiled application (we did it in the first stage) to the container.
  • --from=build copy compiled files from the build stage (also the source path has changed because files are located in a different folder).

Build Docker Image:

docker build -t angular-app-image .
  • -t angular-app-image gave Docker a tag for the image. Since we only supplied a name, we can see that Docker tagged this build as the latest in the last line of the build output. We’ll look more closely at tagging below.
  • The final argument, dot (or “.”), told Docker to look for the Dockerfile in the current working directory.
docker image ls

Run the image

docker run -d -p 80:80 angular-app-image
  • -d detaches from a container (running in the background)
  • -p 80:80 maps network ports
  • Finally, the image name is always last :).
http://localhost:80/ or http://ip_address:80/

Make our image more efficient

node_modules
npm-debug.log
.git
.gitignore
dist

Conclusion

--

--

--

Software engineer, Problem solver, Geek.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Algorithms 101: next greatest element

Extracting data from DOM tree of a web page into a python dictionary

Retaining Idempotency in Web service

The Secrets of Memory Leaks in JavaScript You Don’t Know

Execution Contexts and The Call Stack

An Alternative Approach to JavaScript Error Handling

Build a Real-time Chat Application With Nestjs and PostgreSQL

Build a real-time chat application with Nestjs and PostgreSQL

The API I wish JavaScript GraphQL Implementations supported

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdlrahmansaber

Abdlrahmansaber

Software engineer, Problem solver, Geek.

More from Medium

How to count number of files in folder and Delete all folder files

A Byte of Coding Issue #208

Correct file ownership when mounting local folders in Docker on Linux

Implementing CI/CD with GitLab CI and Docker