Jenkins CI/CD To Deploy Angular Application On Azure Storage

This tutorial deploys a Simple Angular web application from Bitbucket /Bitbucket on Azure Storage by setting up continuous integration and continuous deployment using Jenkins.

In my case, I am using Bitbucket.
jenkins-ci-cd
In this tutorial, you’ll complete five tasks:

  • Install Jenkins plug-ins so you can build from Bitbucket, deploy to Azure Storage.
  • Fork the sample Bitbucketrepo so you have a working copy.
  • Configure multiple branches for deployment on different Storages.
  • Create the Jenkins pipeline that builds and deploys the sample app each time you update the app in Bitbucket.
  • Push an app update in Bitbucket, which triggers Jenkins to build and redeploy to Azure.
  • If you don’t have an Azure subscription, create a free account before you begin.

Prerequisites

To complete this tutorial, you need these items:

  • A Jenkins server. (You can install locally or any server AWS/Azure).
  • A Bitbucket account so you can get a working copy (fork) for the sample Angular app.
  • Azure account for Azure storage service.

Install Jenkins Plug-Ins

  1. Sign in to your Jenkins web console.
  2. On the Jenkins main page, select Manage Jenkins > Manage Plugins.

Jenkins CI/CD To Deploy Angular Application

On the Available tab, select these plug-ins:

  • Windows Azure Storage plugin (For azure service using, will need for Azure CLI)
  • Git (For git)
  • Bitbucket plugin (Connect Bitbucket)

To install your selected plug-ins, select Download now and install after restart.

After you’re done, on the Jenkins menu, select Manage Jenkins so that you return to the Jenkins management page for future steps.

Check Out What It Takes To Build A Successful App Here

Create Azure Storage SAS Key

  • Before moving to Jenkins setup you need SAS key to communicate with Jenkins. For creating SAS key goto Azure
  • Create a Resource

add services

  • Search for Storage Account and create one. (For better practice and free tier you can follow any Microsoft documentation for creating Storage account.)
  • Once the Storage account is created just simply go to Shared access signature -> Give permissions and create a SAS key, Once created just copy the Blob service SAS URL as this will need for future purpose.

Jenkins CI/CD To Deploy Angular Application

  • Now you need to enable the static website for that Search for Static Website and enabled that.
  • Now you will find the Endpoints/web URL as well as you need to add index.html and error.html file name. (In my case index.html and error.html are same so I kept the same name.)

Jenkins CI/CD To Deploy Angular Application

We Build Streamlining Accreditation Process For Physicians

Create A Jenkins Pipeline

In Jenkins, create the pipeline job for building and deploying your app.

  • Return to your Jenkins home page, and select New Item.

Jenkins CI/CD To Deploy Angular Application Jenkins CI/CD To Deploy Angular Application

  • Provide a name for your freestyle job, for example, “My-Angular-App”, and select Freestyle project, select OK.

Jenkins CI/CD To Deploy Angular Application

  • Now set up Jenkins as following
  • General: Add Just description for your project.

Jenkins CI/CD To Deploy Angular Application

  • Source code management: Add Bitbucketrepository URL. Also, select the branch to which you want to configure your deployment. Even you can configure multiple branches for multiple Storages. In my case, I have added development and staging.

Jenkins CI/CD To Deploy Angular Application

Note: For credentials, you can add your username and password of the Bitbucket account or you can use SSH authentication in case if you don’t want to share credentials.

  • Build Triggers: In build triggers just select Build when a change is pushed to BitBucket.
  • Build Environment: Check Delete workspace before build starts for better practice.
  • Build: Now in the build section select Execute Shell and use the below code for the building project and deployment.
  • Now use the below script for deployment, here you’ll need the SAS key which was created previously.
#!/bin/bash
echo "${GIT_BRANCH}"
BRANCH_NAME=${GIT_BRANCH}
echo "$BRANCH_NAME"
echo "installing..."
npm install || exit 1

if [ "$BRANCH_NAME" == "origin/development" ]
then
echo "building development..."
ng build || exit 1
ls
sudo azcopy copy 'dist/**' '<SAS URL DEV>/$web?<REST QUERY PARAMS>' --recursive
fi

if [ "$BRANCH_NAME" == "origin/staging" ]
then
echo "building staging..."
ng build --configuration=staging || exit 1
ls
sudo azcopy copy 'dist/**' '<SAS URL STAGING>/$web?<REST QUERY PARAMS>' --recursive
fi

Above Script Explanation:

  • echo “${GIT_BRANCH}” : To print branch name for verification.
  • BRANCH_NAME=${GIT_BRANCH} : Assign branch name to the temp key
  • npm install || exit 1 : Install npm
  • if [ “$BRANCH_NAME” == “origin/development” ]
    then
    echo “building development…”
    ng build || exit 1
    ls
    Check the committed branch and then build the app.
  • sudo azcopy copy ‘dist/**’ ‘<SAS URL DEV>/$web?<REST QUERY PARAMS>’ –recursive : Move to build in the container.
coma

Conclusion

  1. You will need to install npm on the server where your Jenkins setup is installed
  2. You need to add a container name i.e. $web in the SAS URL after the end on the endpoint URL as default container get created as $web when you enabled static website on Azure storage account.

Here, so we have configured everything whatever we needed. You want to configure Post-build actions you can do that like notifications and all.

Now we are good to go, Just commit on your branch and your Angular project will get deployment on Azure storage.

If you encounter any issues with the above process you can write it down in the comment section, I would love to help you guys.

Get Wide Array Of Angular JS Development Services Tailored To Your Needs

Deepak

Tech Expert

Deepak is a Full-stack developer with around 3 years of experience. He is an expert in building Java integrated web applications, Creating REST APIs with well designed, testable and efficient and optimized code. He is having experience in web technologies like AngularJS, Angular6, JavaScript, etc. He is a Lead developer at Codegrip. He loves to solve technical problems and helping others.

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give
coma

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

author
Bart Mendel
Founder, Mindworks