DEV Community: Usama Ansari

Containerizing Angular application for production using Docker

Usama Ansari — Mon, 30 Mar 2020 22:39:37 +0000

In this post, we will containerize angular application using Docker.

Pre-requisites
Creating Sample Application
Creating Docker file
Creating docker ignore file
Building a docker image
Running a container
Publish image to docker hub

Pre-requisites:

Install Docker for Desktop
Install Node js
Install Angular CLI Make sure you have the latest version of Angular CLI installed.

Creating Sample Application

If you already have Angular application you can skip this step

Open Terminal / Command Prompt
Create new folder mkdir AngularDocker
cd AngularDocker
Initialize Angular application ng new SampleApp
Navigate to created project cd SampleApp
Make sure app is running ng serve -o
Navigate to https://locahost:4200 in your browser.
Feel free to make any changes.

Creating Docker file

To create a docker image we must create the docker file and specify the required steps to build the image.

Open the Project in Code Editor I'm using VS Code feel free to use your favorite code editor.
Create the Dockerfile without any extension in the root of your project.
We will use docker multistage build to create an optimized image. In this process, we will start with the node image to build our angular application and then copy the required file in the nginx server image. You can learn more about Docker multistage build here
Let's create our docker file
FROM node:12.16.1-alpine As builder

This line will tell the docker to pull the node image with tag 12.6.1-alpine if the images don't exist. We are also giving a friendly name builder to this image so we can refer it later.
WORKDIR /usr/src/app

This WORKDIR command will create the working directory in our docker image. going forward any command will be run in the context of this directory.
COPY package.json package-lock.json ./

This COPY command will copy package.json and package-lock.json from our current directory to the root of our working directory inside a container which is /usr/src/app.
RUN npm install

This RUN command will restore node_modules define in our package.json
COPY . .

This COPY command copies all the files from our current directory to the container working directory. this will copy all our source files.
RUN npm run build --prod

This command will build our angular project in production mode and create production ready files in dist/SampleApp folder.
FROM nginx:1.15.8-alpine

This line will create a second stage nginx container where we will copy the compiled output from our build stage.
COPY --from=builder /usr/src/app/dist/SampleApp/ /usr/share/nginx/html

This is the final command of our docker file. This will copy the compiled angular app from builder stage path /usr/src/app/dist/SampleApp/ to nginx container.

Complete Dockerfile

Creating docker ignore file

When COPY . . command execute it will copy all the files in the host directory to the container working directory. if we want to ignore some folder like .git or node_modules we can define these folders in .dockerignore file.

Create .dockerignore file in the root folder of your project.
Copy below content in it.

Building a docker image

Navigate the project folder in command prompt and run the below command to build the image.

docker build . -t usmslm102/sampleapp

This command will look for a docker file in the current directory and create the image with tag usmslm102/sampleapp. with -t command you can specify the tag for the image the default convention is <DockerHubUsername>/<ImageName> e.g. usmslm102/sampleapp. usmslm102 is my docker hub username and sampleapp is the image name

run docker images command to list all the docker images in your machine

Running a container

You can run the docker image using the below command.

docker run -p 3000:80 usmslm102/sampleapp

-p flag publishes all exposed ports to the host interfaces. we are publishing container port 80 to host 3000 port.
Navigate to your browser with http://localhost:3000

Publish image to docker hub

Docker hub is a container registry maintained by docker. Make sure you have a docker hub account.

docker login

Provide valid username and password. once the login is succeed run below command to publish.
docker push <UserName>/<ImageName>

Replace UserName and ImageName with your username and image name. e.g. docker push usmslm102/sampleapp
My image url: https://hub.docker.com/r/usmslm102/sampleapp

Note: By default, the image will be public. Navigate to docker hub image setting to make it private.

Git - Cheat Sheet

Usama Ansari — Tue, 10 Dec 2019 06:54:45 +0000

What is git?

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Basic Commands:

Initialize local git repository
> git init
check files to commits and branch name
> git status
add files to staging area.
> git add FileName.txt
add all modified and new files to staging area
> git add --all
add all files of directory to staging area
> git add folder/
Commit changes to local repository
> git commit -m "Message to commit"
history of commits
> git log --
Get help for any command
> git help <Command>
set global user name
> git config --global user.name "Name"
Show un-staged differences since last commit
> git diff
View staged differences
> git diff --staged
Un-stage files and HEAD Refers to last commit
> git reset HEAD FileName
Blow away all changes since last commit
> git checkout -- FileName
SKIP STAGING AND COMMIT and Add changes from all tracked files. this Doesn’t add new (untracked) files
> git commit -a -m "Modify readme"
Reset into staging and Move to commit before ‘HEAD’
> git reset --soft HEAD^
Add to the last commit with new commit message
> git commit --amend -m "New Message"
Undo last commit and all changes
> git reset --hard HEAD^
Undo last 2 commits and all changes
> git reset --hard HEAD^^
ADDING A REMOTE
> git remote add <name>origin <address>https://giturl
show remote repositories
> git remote -v
To push to remotes
> git push -u <name>origin <branch>master
Remove remote
> git remote rm <name>
Clone remote repository
> git clone <address>https://giturl
Create branch
> git branch <BrancName>
create and checkout branch
> git checkout -b <BrancName>
list available branches
> git branch
list remote available branches
> git branch -r
Switching between branches
> git checkout <branch name>
merge 2 branches
> git merge <branch name>
Delete branch
> git branch -d <branch name>
Force delete branch
> git branch -D <branch name>
get remote changes
> git pull
- get the remote changes to local remote branch
  > git fetch
- merge local remote branch changes to local master branch > git merge <local branch>
shows branches alignments
> git remote show origin
remove remote branch
> git push origin :<branch name>
To clean up deleted remote branches
> git remote prune origin
List all tags
> git tag
Create tag
> git tag -a <Tag Name> -m "Tag message"
Push new tags to remote
> git push --tags
Revert to existing tag.
> git checkout <tag name>

This article was originally published at my blog git-cheat-sheet

Please feel free to mention your favorite git commands in comments ❤ 👇

My Favorite Visual Studio Code Extensions

Usama Ansari — Mon, 09 Dec 2019 08:26:42 +0000

Visual Studio Code is an open source cross-platform code editor developed by Microsoft which runs on Windows, Mac, and Linux.

Top Features:

Cross-platform runs everywhere
Free and Open Source
Very Lightweight (Believe me it's fast ⚡)
Supports many languages (JavaScript, TypeScript, C#, Go ....)
Built-in intellisense and code debugging
Built-in Git Support ❤
Highly customization (thousands of great extensions)

Where to get?

You can download VS code from https://code.visualstudio.com/
The source code is hosted on GitHub

VS code has thousands of great extensions built by communities and individual developers. You can explore all extensions at Visual Studio Marketplace

Below are my favorite extensions:

Settings Sync

This extension will come to your rescue if you use multiple computers or just switching from one machine to another. It syncs your settings, extensions, key bindings and snippets across VS code installations by using gist.
Settings Sync

Git History

If you use git this should be your go to extension. Although VS code has built-in Git support but this extension just take it to the next level.
Git History

Similar extension:

GitLens — Git supercharged

Auto Rename Tag

This is a very simple extension but comes very handy if you write lot of HTML it just auto close your tags and makes your life easy.
Auto Rename Tag

Live Server

It creates a local live server with auto refresh. comes very handy if you are developing/designing static sites or just doing some quick prototype.
Live Server

Docker

If you are doing containerized application development with docker then this extension is extremely useful. This will help you to automate Dockerfile, docker-compose.yml, and .dockerignore file generation and deployments.
Docker

C#

If you are .NET developer and working on .NET Core (cross-platform .NET implementation for websites, servers, and console apps on Windows, Linux, and macOS) then you can develop a .NET application on your choice of OS without installing Visual Studio.

C# extension will ease your .Net Core development on VS Code and comes with editing support, including Syntax Highlighting, Debugging, IntelliSense, Go to Definition, Find All References, etc.
C#

VS Live Share 🔥

Note: Visual Studio Live Share is currently in preview. Features and user experience is not final.

If you ever co-authored any document either in google docs or Microsoft word then this extension will help you to co-edit and co-debug your application.
This is really cool I would encourage you to give it a shot you will ❤ it. It even works with Visual Studio.
VS Live Share

Themes

I told you VS code is highly customizable code editor and we have tons of Themes in VS code marketplace Themes section. Below are my two favorite themes.

One Dark Pro

One Dark Pro Theme Official

Dracula Official

Dracula Official

Please feel free to mention your favorite extension or theme in comments ❤ 👇

Create & Deploy Azure Function ⚡ using VS code and Azure DevOps (CI/CD)

Usama Ansari — Sat, 30 Mar 2019 14:33:19 +0000

Azure Function 🚀 is Microsoft faas (function as a service) offering. Where you can build apps without worrying about server and infrastructure that scale to meet demands. You can use your choice of programming language.

Let's get started...

Pre-requisites

Azure Devops Account (Get for Free)
Azure Account (Sign up for Free)
Visual Studio Code (Download)

This article is quite long. please feel free to jump to the desired section

Create an Azure DevOps Project

Create Azure function locally

Add Azure Resource Manager (ARM) Template

Push code to git Repository

Create Build / CI (Continuous Integration) Pipeline

Create Release / CD (Continuous Delivery) Pipeline

Create an Azure DevOps Project

Follow the below steps to Create a new Azure DevOps Project:
1. Login to Your Azure DevOps tenant http://dev.azure.com/[username] replace [Username with your tenant name] e.g http://dev.azure.com/usmslm102
2. Click on Create Project and Provide the required details
3. Once the project is created you will be redirected to welcome page.
Create Azure function locally

Follow the below steps to create and run azure function locally
1. Open Visual Studio Code and install Azure Functions and C# extensions if you already have it installed then skip.
2. click on extensions from the sidebar and search for Azure Functions and click on the install button
3. Search for C# extension and click install
4. Create a new folder named AzureFunctions and open in vs code
5. Press ctrl/cmd (on MAC) + shift + p and type Create Function
6. Select Create Function and select current folder
7. You will get a prompt saying "The selected folder is not a function app project. Initialize Project?" click Yes
8. Select C# as a language
9. VS code will initialize function app and will ask to select the function template
10. Select HttpTrigger and press enter with default "HttpTriggerCSharp" function name and "Company.Function" for namespace
11. Select Access Rights as Function and press enter
12. Press F5 to test our function locally and copy the function URL
13. Navigate to copied URL and provide the parameter called name e.g. ?name=World
14. Voila, our function is up and running 😱
Add Azure Resource Manager (ARM) Template

We need to create Azure Resources before deploying our function. we will use ARM template to create below Azure resources.

Azure Function App
Azure Storage Account
Consumption app service plan

Below ARM template will create all 3 resources:

Create a functionapp.json file inside folder Templates and paste below content

functionapp.json
Create a functionapp.parameters.json file inside folder Templates and paste below content

functionapp.parameters.json

Note: Change the appName value to unique name in functionapp.parameters.json
Final folder structure looks like below:

Push code to git Repository

We are all set to push the code to our git repository. When we created Azure DevOps project we get the default git repository same as the project name.
Navigate to Azure DevOps project and click on Repos on the left navigation. You will see we have an empty repository named "AzureFunction" same as our project name.

There are several ways to push our code changes to a remote repository:

Clone remote repository to your computer and start adding files
Push existing local repository to remote repository

As we have already created our project lets use 2nd option and push our project to a remote repository.
Open your favorite command prompt and navigate to our project folder or as we are using VS code we can use it's integrated terminal press ctrl + ` to open it.

Copy the git remote push command from Azure DevOps Repos page.

> git init
> git add .
> git commit -am "Add function app"
> git remote add origin <git Repo Url>
> git push -u origin --all

Refresh your Azure DevOps Repos page and you should see the function app files. 😎

Create Build / CI (Continuous Integration) Pipeline

Our Repository contains the source code for function app which needs to be compiled before publishing to Azure. As our function app is .net core project let's create the CI pipeline to build function app project and publish the required artifices.

Navigate to Azure DevOps project and click on build under pipelines. currently, we don't have any CI Pipeline. Let's create one. click on New Pipeline button.
Azure DevOps will ask us where our source code resides. Azure DevOps supports multiple SCM providers such as Azure Repos, GitHub, BitBucket, Subversion etc. As our source code is hosted on Azure Repos select "Azure Repos Git" and provide the required details and click on continue button.
click on "Empty Job" as we will define our tasks
As our function based on .net core let's add restore, build and publish task to generate our build artifacts
Click on "+" button and search for .net core task and click on add button. Select .NET core task and change values as follows dotnet restore:
dotnet restore:
- Display name: dotnet restore
- Command: restore
- Path to project(s): **/*.csproj This step will restore the nuget packages for our project
Repeat above step for Build and publish task
dotnet build:
- Display name: dotnet build
- Command: build
- Path to project(s): **/*.csproj This step will build our project
dotnet publish:
- Display name: dotnet publish
- Command: publish
- Un-Checked: Publish Web Projects
- Path to project(s): **/*.csproj
- Arguments: --no-restore --configuration Release --output $(Build.ArtifactStagingDirectory)
- Checked: Zip Published Projects
- Checked: Add project name to publish path This step will take our build files and zip it and put in ArtifactStagingDirectory
Now we need to published the compiled code and ARM templates as build artifacts so we can use these packages in our Release pipeline. Click on '+' and search for task publish build Artifacts. select the task and click add
- Display name: Publish Artifact: drop
- Path to publish: $(Build.ArtifactStagingDirectory)
- Artifact name: drop
- Artifact publish location: Azure Pipelines/TFS This step will take our zip files from ArtifactStagingDirectory and publish it to Azure Pipelines build artifacts in the drop folder
Let's publish our ARM templates to drop folder as well. Click on '+' and search for task publish build Artifacts. select the task and click add
- Display name: Publish ARM: drop
- Path to publish: Templates
- Artifact name: drop
- Artifact publish location: Azure Pipelines/TFS This step will take our ARM files from SourceDirectory and publish it to Azure Pipelines build artifacts in the drop folder
Our final pipeline looks like:
Let's Save and queue our pipeline. click on "Save & Queue" drop down from the top and select Agent pool: "Hosted VS2017" and Branch: "master" then click on the button "Save & Queue". Azure DevOps will find the available agent and run our tasks.
Navigate to builds pipeline page from left navigation and select our build pipeline. we can see all our build on this page. click on latest build. It will show us the logs of the specified tasks in our build pipeline. on top right click on Artifacts drop down and select drop. It will open artifacts explorer. expand drop folder and we can see our ARM template and compiled function app in the zip package. We will use these artifacts in our Release pipeline.
We don't want every-time to open Azure DevOps and click on queue button to build our code changes. we want if our code changes then the build should automatically trigger. Let's enable Continuous integration to achieve this.

Edit our build pipeline and navigate to Triggers tab and check "Enable continuous integration" and select master as branch filter and click on the Save & queue drop down and select Save.
We are done with our CI pipeline and we are getting build artifacts as well. let's use these artifacts and deploy to Azure using Release/CD pipeline

Create Release / CD (Continuous Delivery) Pipeline

Navigate to Azure DevOps project and click on Releases under pipelines. currently, we don't have any CD Pipeline. Let's create one. click on New Pipeline button.
Azure DevOps will ask us to select a pre-defined template. As we will define our own tasks let start with an Empty Job.
Click on Empty Job.
We have to define the deployment stage. type stage name as Production and close the pop-up by clicking on x.
We need to tell our release pipeline from where to get the deployment artifacts. click on big "Add an artifact" button.
Select source type as Build and select our build pipeline in "Source (build pipeline)" section.
select Default version as Latest. so that every release will take the latest artifacts by default.
click on the Add button.
Before we define our deployment tasks lets enable the Continuous deployment trigger to automatically deploy our changes as soon as new build artifacts are available. click on the ⚡ icon and enable Continuous deployment trigger and close the pop-up by clicking on x.
Let's define our tasks by clicking on "1 job, 0 task" link under our production stage. This will open the task window same as build pipeline.
We need to create two tasks first we have to create Azure function app and its dependencies using our ARM template then we will deploy Azure function package on it.
click on "+" and search for Azure Resource Group Deployment and click add. This step needs our Azure account details and ARM template files
- Azure subscription: select Azure subscription from drop down. if required click on the Authorize button to configure an Azure service connection.
- Action: Create or update resource group
- Resource group: type AzureFunction as
- Location: East US
- Template location: Linked artifact
- Template: click on ... and select functionapp.json from drop folder. final URL will like this $(System.DefaultWorkingDirectory)/_AzureFunction-CI/drop/functionapp.json
- Deployment mode: Incremental This step will deploy our ARM template to create function app and its dependencies in the defined Resource group under defined subscription
click on "+" and search for Azure App Service Deploy and click add. This step needs our Azure account details and zip package file.
- Azure subscription: select Azure subscription from drop down. if required click on the Authorize button to configure an Azure service connection.
- App Service type: Function App on Windows
- App Service name: type app Name which you specified in the functionapp.parameters.json file under Add Azure Resource Manager (ARM) Template section.
- Package or folder: $(System.DefaultWorkingDirectory)/**/*.zip
Before we save our pipeline lets rename it to AzureFunction-CD and click on Save button.
Let's create a release and deploy our resources to Azure.😎
Click on Release > Create a Release. Finally, click on the Create button
Navigate to Releases pipeline page from left navigation and select our Release pipeline. we can see all our Release on this page. click on latest Release and see the progress.
Once the release is finished. navigate to the Azure portal and open the AzureFunction Resource Group. Voila, function app and its dependencies are created now.
open function app and get the function URL to test it.

Cheers 🥂