Dockerize and run angular Application in an efficient way

Agenda

Introduction

A short introduction to Angular:

The output folder is dist/project-name/ by default. To output to a different folder, change the outputPath in angular.json..

Create Angular Project:

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

If you are using your own Angular project then change the application name docrize-angular-app in the last line to your application name. Rest of the code works fine with any Angular application if you place the Dockerfile in the root of the Angular project.

Build Docker Image:

docker build -t angular-app-image .
docker image ls

Run the image

docker run -d -p 80:80 angular-app-image
http://localhost:80/ or http://ip_address:80/

Make our image more efficient

node_modules
npm-debug.log
.git
.gitignore
dist

Conclusion

--

--

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