Docker for Angular 7

Deploy Angular 7 to Docker Hub in 5 Minutes

💁 Hello Friends, In this tutorial I’ll show you how to create docker container for Angular application and deploy into Docker Hub using Linux.

What is Docker?

Installations and Configurations

Nodejs & npm

$ sudo apt-get update
$ sudo apt-get install nodejs npm

Docker

$ sodo apt-get install docker.io

Install Angular CLI and initialize the basic project

$ npm install -g @angular/cli
$ ng new ng-docker-example
? Would you like to add Angular routing? (y/N) // Press N

Open “ng-docker-example” with your favorite editor, I’m using vscode

• Add a Dockerfile to the project root — “A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image”.
• Add a .dockerignore to the project root — “The .dockerignore file allows you to exclude files from the context like a .gitignore file allow you to exclude files from your git repository”
• Open “Dockerfile” and type:

• Open “.dockerignore” and ignore all “not necessary” items:

• Build Docker image

$ sudo docker build -t ng-docker-example .

• Run Docker Image

$ sudo docker run --rm -d -p 5801:5801 ng-docker-example:latest

open your browser in port localhost:5801

Deploy “ng-docker-example” to Docker Hub

If you don’t have account in Docker Hub, signup before.

After you signed up, you need to login into your account via docker cli

$ docker login

• Enter your details:

Username: //Enter your usernme
Password: //Enter your password
Login Succeeded

• Tag “ng-docker-example” image

$ docker tag ng-docker-example [your_username]/ng-docker-example

• Push The Image

$ docker push [your_username]/ng-docker-example

😃 And we made it!!!

😎 Congrats

You completed this dense piece of content about Docker and Angular.