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.
Before we begin
If you are new to VSTS and Continuous Delivery, I recommend my blog post:
How to setup Continuous Delivery using VSTS within minutes. The purpose is to get a brief understanding of the VSTS platform and how easy it is to get a release pipeline up and running.
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 :)