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

 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 😊

 

Web App for Containers Azure Step by Step Example

Deploy and Run a Containerized Web App with Azure App Service

Today we are going to talk about the "how to deploy and run a Containerized Asp.net Core Web App with Azure App Service"? 
It'll be great if you a basic understanding of the followings:

1. You should have basic knowledge about the Azure App Service
2. .Net and Visual Studio
3. Docker and Containerizations

Development Env Setup

1. You need Azure subscription (if you don thave then get a free one)
2. You need Visual Studio 2019, click here to download
3. You need to install docker on your local dev Machine

We shall complete the whole exercise in next 4 steps only

Step 1: Create Azure Container Registry

Go to the Azure portal and click on Create New Resource>>Containers and Click on the Container Registry

Fill up the Create Container Registry Form, and also Enable Admin User and click on Create Button. see below for your reference

finally, your registry container will be created with the given name.

Step 2: Visual Studio 2019 -Create a Web App

Open Visual Studio 2019 and  Click on "Create a new project"

Select "ASP.NET Core Web Application"

Provide the project name 

Tick the "Enable Docker Support" checkbox and click on Create Button

Here you must have the running Docker on your machine same you can see just below the "Enable Docker Support" checkbox 

Setup 3: Publish Web Application

Complete the following steps to send your web application contents to Azure Container Registry, which uses the instructions in the Docker file to build the image and store it.

Right Click on Solution and Click on Publish >> Start >> Container Registry >> Select Existing Azure Container Registry and then click on Create Profile button, Here is a screenshot for the reference

May it ask to login, so use your azure portal credentials to login purpose here.
Now Select the recently(in step 1) created Azure container registry.

Click on the OK button and wait for the few minutes it will publish apps images/binary to Azure Container Register and you can validate with the same like the following screenshot:

Step 4: Create a Web App for Containers

Click in Create New Resources and sear for the "Web App for Containers"

Fill up the form with all the required field Here is a screenshot for your reference

Click on "Next: Docker >" button and fill Azure container registry options details according to above created in step 1

Click on "Review + Create" button and finally you will the below screen, review the provided data and click on Create button

Wait for the few minutes and your app will be provisioned  and ready to use
finally, visit your web app URL to see your first running web in the container.

Once the deployment is completed visit your web app explores the URL to see the running application

Congratulation you have done with the hello world docker host and web app!!