Angular App into Docker container

How to create a new angular project

• Initialize the environment

ng new democontainer
cd democontainer
npm install
ng serve
ng build --prod

• Create the file Dockerfile and add the following lines

### STAGE 1: Build ###
FROM node:12.7-alpine AS build
#FROM node:14.9.0-alpine3.10 AS build

WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod

### STAGE 2: Run ###
FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
WORKDIR /usr/share/nginx/html
COPY --from=build /usr/src/app/dist/democontainer .

• Create the file .dockerignore and add the following lines

dist
node_modules
npm-debug.log
Dockerfile*
docker-compose*
.dockerignore
.git
.gitignore
.env
*/bin
*/obj
README.md
LICENSE
.vscode

• Create the file nginx.conf and add the following lines

http {

    include /etc/nginx/mime.types;

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

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

• Build image and run the container

docker build -t genocs.democontainer .
docker run -p 88:80 -d --name kp-container genocs.democontainer

• Publish on DockerHub

docker tag genocs.democontainer genocs/democontainer
docker push genocs/democontainer
docker pull genocs/democontainer:latest