Try SalesScreen Essentials free for 30 days. No credit card required to sign up! 🚀 
SalesScreen Logo
CI/CD for React application using Azure DevOps Pipelines and webpack

In this blog we cover a simple CI/CD example using Azure DevOps and Azure CDN. Our goal is to publish a webpack build to the CDN when changes are pushed to a Git branch.

Creating an Azure CDN endpoint

In order to create a new Azure CDN endpoint you first need to make sure that you have an active Azure account. If you don’t already have an Azure account you can create a new one here.

Create an Azure storage account

The first step when setting up a new CDN endpoint is to create a storage account that will hold all your assets. The CDN caches the content of your storage account and exposes it through the endpoint that you will create below. Read more about creating and Azure storage account here.

Create an Azure CDN profile and Endpoint

Once you have set up your storage account, you can go ahead and create an new CDN profile and endpoint. You can read about creating the profile and endpoint in Mircosoft’s offical docs. I would recommend using the Azure CDN Standard from Microsoft if you do not have very specific needs regarding how the CDN should behave.

Once you have completed the steps above you should have your very own CDN up and running with an endpoint that looks something like this: https://your-cdn-endpoint.azureedge.net.

webpack setup

As there are many guides that cover general webpack setup, we will only mention a few things that we find beneficial for the CI/CD process in the webpack.config.

Cache busting

To make sure the CDN always deliver the latest file versions we utilize webpack’s Output property to name the emited bundle files. In this example we use chunkhash to name our files.

// webpack.config.js\t\t
module.exports = {
 // ...
 output: {
 // ...
 filename: '[name].[chunkhash].js'
 }
};

This will generate filenames that look like: app.0a59a86f5f04cd1da625.js. You can read more about webpack caching here.

Public path

Since we are going to be using a CDN to host our assets, we have to set the base path for all our application assets. This is done by setting the publicPath option to the CDN endpoint hostname.

// webpack.config.js\t\t
module.exports = {
 // ...
 output: {
 // ...
 publicPath: 'https://your-cdn-endpoint.azureedge.net',
 filename: '[name].[chunkhash].js'
 }
};

Asset manifest

We will also be using the webpack-manifest-plugin to generate a manifest.json file as part of the build. This will allow us to identify the correct output file names for our source files.

// webpack.config.js\t\t
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
 // ...
 plugins: [
 new ManifestPlugin()
 ]
};

manifest.json example

// manifest.json\t\t
{
 'runtime~app.js': 'https://your-cdn-endpoint.azureedge.net/runtime~app.bc9d02a19fd6cba183df.js',
 'vendors~app.js': 'https://your-cdn-endpoint.azureedge.net/vendors~app.775c28f32146871f9e9d.js',
 'app.js': 'https://your-cdn-endpoint.azureedge.net/app.cc91b80d22a21f16f98d.js'
}

Azure Pipelines CI/CD setup

To get started with Azure DevOps you must first create new Azure DevOps organization. Once you have created your new account, you need to create a new project. You should now be ready to create your first pipeline.

Create a build pipeline (CI)

Navigate to Pipelines in the left menu inside your newly created project and click New Pipeline in the top right corner. Go through the steps and connect the pipeline with your Git repository. It’s easiest to select one of the hosted agent pools when creating a new build pipeline.

Pipeline trigger

Create a new pipeline trigger and check Enable continuous integration. CI/CD for React application using Azure DevOps Pipelines and webpack

Select the branch you want to watch. In this example we have chosen the master branch. This means that when we push changes to this branch, a new build pipeline will run.

Build pipeline tasks

We are now ready to create some pipeline tasks. First, make sure that Get Sources is correctly connected to your Git repo and branch.

Click the 3 dots to the right of your pipeline name and select Add an agent job. Give the agent job a name e.g “Frontend Build”. You can now start adding tasks to the newly created agent job.

In total, we are going to add 4 tasks to our agent job. CI/CD for React application using Azure DevOps Pipelines and webpack

The first tasks runs npm install CI/CD for React application using Azure DevOps Pipelines and webpack The second task runs npm build CI/CD for React application using Azure DevOps Pipelines and webpack The third task copies build files to an Artifact for further use CI/CD for React application using Azure DevOps Pipelines and webpack The final task publishes the build artifact that contains all your build files that was generated by npm run build. CI/CD for React application using Azure DevOps Pipelines and webpack

Create a release pipeline (CD)

We can now go ahead and create a new release pipeline. Navigate to Releases in the left menu and click New above the list of pipelines.

When our build pipeline has completed, we want it to get picked up by the release pipeline. Under Artifacts, connect the build trigger with your build pipeline. CI/CD for React application using Azure DevOps Pipelines and webpack

Release pipeline tasks Start by creating a new agent job similarly to the build pipeline. We are going to include 2 tasks in this agent job. CI/CD for React application using Azure DevOps Pipelines and webpack

The first task in an Azure CLI task that will delete the existing content in the storage account blob. This is to avoid having a lot of old files laying around in storage. CI/CD for React application using Azure DevOps Pipelines and webpack

The next task is an Azure file copy task that takes the files included in your build artifact and adds them to the storage. CI/CD for React application using Azure DevOps Pipelines and webpack

You are now all set, every time you push changes to your master branch, the files in your storage account will be replace with the files related to the new build.

You can navigate to https://your-storage-account.net/manifest.json to see the path to all the assets included in your build. We use the storage account url instead of the CDN url here since we don’t want a cached version of the manifest.json file. If you want to retrieve this from the CDN you will have to purge the CDN endpoint.

You can then use this on your server to make sure you always request the correct files from the latest build.

Happy coding!

Our latest blog posts

Go to Blog overview
The Spooky Spreadsheet Woes Sales Managers Can’t Escape

The Spooky Spreadsheet Woes Sales Managers Can’t Escape

September 6, 2019

SalesScreen’s Stellar Customer Satisfaction Highlighted in G2’s Fall Reports

SalesScreen’s Stellar Customer Satisfaction Highlighted in G2’s Fall Reports

September 6, 2019

The Proof is in the Review: We’re Sales Gamification Leaders in G2’s Summer 2024 Report!

The Proof is in the Review: We’re Sales Gamification Leaders in G2’s Summer 2024 Report!

September 6, 2019

How a Sales Incentive Program Engages Sales Reps to Succeed

How a Sales Incentive Program Engages Sales Reps to Succeed

September 6, 2019

We're on a Winning Streak: Ranked #1 Sales Gamification Software by G2

We're on a Winning Streak: Ranked #1 Sales Gamification Software by G2

September 6, 2019

2023: A Year in Review

2023: A Year in Review

September 6, 2019

Go to Blog overview

This is the closer. If you’re not convinced yet, no coffee for us.

Give us some details, not too much, not too little, just enough to talk to you about our results, company and what we believe in.

Reviewed Favorably By Industry Experts

Leader - Summer
Momentum - Summer
Implementable - Summer

By submitting this form, you consent to be contacted on how SalesScreen can help your organization.