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:
- Following resource are required to run/complete this demo
- Visual Studio Code: Download from here https://www.docker.com/products/docker-desktop
- Docker Desktop: Download from here https://code.visualstudio.com/download (if you are using window so Window 10 Professional is required)
- Node.Js: Download from here https://nodejs.org/en/download/
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
· 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
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:
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
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 😊
No comments:
Post a Comment