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

Schedule postman collection run in Node.js

Angular: Helping patients safely access healthcare

How to develop API with Node.js and Express Series

Zustand, yet another lovely state manager in React

What Is & How to Use XMLHttpRequest

Intro to React Native

React Native — Future of cross-platform app development

Creating a Scroll-Based Progress Bar in Vue

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

Docker Compose

How to Check WhatsApp numbers using API

How to Check WhatsApp numbers using API

A Glimpse About docker

Create your own hello-world image in Docker