14 May, 2020

Angular 9 with Docker Step by Step example

Angular 9 with Docker Step by Step example

 

I had the plan to learn docker and use an angular app running under the docker environment. I was struggling to get the right and simple steps to start with. So I invested almost 2 days to learn basic docker and working with angular 9 and finally I was able to make it. Congrats to me!! 😊

Setting up the local environment and workspace

Prerequisites:

Angular Project Setup :

After installing the above tools open you CMD/Angular CLI 

installed Angular: If you are new to an angular good visit here learn and step  https://angular.io/guide/setup-local

Step 1: Install the Angular CLI

               npm install -g @angular/cli

Step 2: Create Hello World application

ng new hello-world

Step 3: Run the application

cd my-app

ng serve --open

 or Open your working folder(hello-world) in vs code and run ng serve --open

Great you are down with your angular project and your application is running now you can verify visiting over http://localhost:4200/ 

Docker Setup for your Hello-World Applications

 What is Docker?

·        Docker is a set of platforms as a service products,

·        Uses OS-level virtualization to deliver software in packages called containers.

·        Developed by: Docker, Inc.

·        and Written in: Go,

·        Initial release date: 20 March 2013

What can I use Docker for?

·        Fast, consistent delivery of your applications

·        Responsive deployment and scaling

·        Running more workloads on the same hardware

 you are new to Docker, then visiting the following docker official website https://www.docker.com/ to learn

Visuals Studio Code Setup:

Got VS Code >> Extensions >> Search “Docker” >> install one from Microsoft only

visual-studio-code-docker-extension

Step 4: under your project root directory create a file named DockerFile (Without any Extensions), you can also create docker file with help VS CODE Command Palette...

Step 5: paste the following code to your DockerFile:

        Get a docker file code and details from here: http://4cb.online/blogs/Angular-app-with-Docker-Step-by-Step-exampleile data from here:  

Note*: If you are facing any issue related to Nginx Just install with the following command

Npm install nginx

What is nginx?

NGINX is open-source software and provides a mechanism for web serving, reverse proxying, caching, load balancing, media streaming, etc. It started out as a web server designed for maximum performance and stability. In addition to its HTTP server capabilities, and load balancer for HTTP, TCP, and UDP servers.

Step 6: Build Image with VS Code

               Open your docker file created in Step 5

               Right Click(mouse) >> Build Image...

               Select your latest project:   "hellodocker:latest"

Step 7: RUN your image with the following command in terminal

               docker run --rm -it  -p 80:80/tcp hellodocker:latest

               or

               got to your image >> right click>> RUN

 

docker-run-vscode


You have done with your first docker app, by default it is running on port:80, http://localhost/

Finally, here we go with the angular running app

Push to Docker Hub 

As you know docker runs on images(can be called out stopped Containers), you push your hello-world image to docker hub for your future use or next-level learning.

·        Go to https://hub.docker.com/

·        Create your account

·        Note down your docker ID that will be used to push your images

·        To push your hello-world image

·        Open vs code >> right click on image>>push

·        It will ask for docker ID and password first provide it 

And all done 😊

 

docker hub



No comments:

Post a Comment

Microservices vs Monolithic Architecture

 Microservices vs Monolithic Architecture Here’s a clear side-by-side comparison between Microservices and Monolithic architectures — fro...