1 YEAR AGO

How to continuously deploy a ReactJS website to Azure using VSTS

For one of our latest internal projects using Kentico Cloud, we decided to create a ReactJS Single Page Application. While I typically work with Visual Studio and .NET, I found it interesting to explore this new world of JavaScript web magic! This post contains the steps to deploy ReactJS to Azure using a simple build definition in VSTS.

This post assumes that you know how to develop with ReactJS. In our application, we used one of my colleagues GitHub projects: Create React Intro. Thanks Dave!

Create the ReactJS build definition

Let's start with creating a new build definition based on one of the NodeJS templates. Alternatively you can start with the empty process. Update the build definition according to the following screenshot:

The key thing here is to update the template with nmp tasks, linked to the package.json file in the working directory:

npm with command install

npm with command run and argument test

npm with command run and argument build

The first task will ensure that the depending packages will be installed. The second task will run the test scripts. The third task will produce the build output, which we will use to deploy to Azure.

To achieve deployment to Azure, we add the "Azure App Service Deploy" task and update the "Package or folder" value to: $(System.DefaultWorkingDirectory)/build
This will ensure that only the necessary files will be deployed.

Optionally enable the Continuous Integration trigger and you are good to go! Hope this helps :)