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
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
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 😊