May 9, 2017

/

Deploying a Create React App project to Azure with VSTS Build and Release

Deploying a Create React App project to Azure with VSTS Build and Release

Create React App is a great way to get started with creating your a JavaScript application with React with no configuration. It is essentially a number of tools (webpack mostly) bundled into one node module that creates and builds your application. In this article I’m going to show you how to build and release this using Visual Studio Team Services Build and Release tools. If you want to see the final code you can find it here in Github

Creating the project

I’m going to assume that you have a Visual Studio Team Services account with a fresh empty Team Project setup for this. If you don’t then follow Microsoft’s guide for creating an account and for creating a team project. I am also assuming you already have an Azure Subscription you can create a web app in. If not then create a free one now.

NOTE: I’m also assuming that you already have the node >=4 installed on your machine.

The first thing we need to do is create our app using Create React App and put it into our repo. To do this first install Create React App on your machine:

npm install -g create-react-app

Now go to a folder on your machine you would like to create the project and run the following:

mkdir create-react-app-vsts # this folder could be named anything you want
create-react-app create-react-app-vsts

This will spit out your brand new React app complete with everything you need to develop, test and build your application. To find out more about what Create React app supports and how to do common tasks read the User Guide. Just to test the application and make sure everything went alright try running the following:

cd create-react-app-vsts # this once again is just the name you gave in the previous step
npm start

If everything went okay this should launch the app in your browser at http://localhost:5000. While we are at it lets just test the build works too. From the root of the project folder run the following:

npm run build

After a minute or so this will create a folder in your project build which contains the optimized production version of the application. To test this out lets install the npm package http-server and see whether it works:

npm install -g http-server

Now you can cd into the build directory from the root of the project and run the server:

cd build
http-server 

If you open your browser and navigate to http://localhost:8080 you will see the production version running. This is essentially what we want to achieve but inside VSTS Build and Release and deployed to Azure!

Committing the code to VSTS

You probably already know this step but I can’t really leave it out… Run the following commands from your command prompt to push the code up into your projects VSTS git repository.

git init
git add . 
git commit -m "Created React Project"
git remote add origin {your-git-url-here}
git push -u origin master

VSTS build

VSTS Builds are made up of steps that create artifacts for deployment. You can also do the deployment in the build but its better to create a release artifact and deploy it using the release manager (which I will get to later). We will essentially be creating an automated build that will install the npm packages and build the JavaScript much like you do on your local machine. Then we create a ZIP folder of the output ready for deployment to an Azure Web App.

Creating the build

From Visual Studio Team Services you can create new builds for your project by hovering on the Build and Release tab on the top navigation, clicking on Build. On the lest hand side under Choose a template click on the link Empty Process. This will bring you to an empty build definition with only one step called Get Sources. If you like you can name the build something sensible. I have named mine “Create React App Build”.

Step 1 : Install dependencies

The first step is to install the NPM packages that are needed to build the application. Click on the Add Task button, enter “npm” in the search box, hover over the npm task and click Add. This will add an npm tasks to your build process and if you click on the item then you will see it has a few properties you can customize: Display Name, working folder, npm command and arguments. Make sure you have the following values:

Display Name: Install dependencies
working folder: (leave blank)
npm command: install
arguments: (leave blank)

Install Dependencies VSTS Npm Task

Step 2: Build

The next step is to run the npm run build command that we tested locally earlier. Click on the Add Task button, enter “npm” in the search box, hover over the npm task and click Add. Click on the newly created tasks and add the following values:

Display Name: Build
working folder: (leave blank)
npm command: run
arguments: build

Step 3: Create release package

In this step we will zip the output from the npm run build in the last step. Click on the Add Task button, enter “archive” in the search box, hover over the Archive Files task and click Add. Click on the new archive files build step and add the following values:

Display Name: Create release package
Root folder (or file) to archive: build
Prefix root folder name to archive paths: Unchecked
Archive type: zip
Archive file to create: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip

This will create a zip folder with an appropriate name using unique BuildId generated by VSTS and in the Artifacts Staging Directory. These values are build in variables and for a full list of them see the Build Variables Documentation.

Step 4: Publish release package

In this step we will publish the zip we created in the last step. Click on the Add Task button, enter “publish” in the search box, hover over the Publish Build Artifacts task and click Add. Click on the new Publish Build Artifacts tasks and add the following values:

Display Name: Publish release package
Path to Publish: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
Artifact Name: drop
Artifact Type: Server

This will create a release artifact called drop (this is just a conventional name and could be anything) containing the ZIP we created earlier. That’s it for all our steps. Lets run the build! Click on Save and Queue in the top right hand corner and click Queue. Now the build will run for us. While that is happening lets turn on continuous integration so that when we make changes in our repository it will trigger a new build.

Setting up continuous integration

Go back to the build definitions by clicking on Builds in the top left. Now you will see a list (of one) builds. If you click on the build you created earlier you will see the build summary page. On the top right click on Edit. This will take you back to the edit view we created the build in. From the edit page click on the Triggers tab above the Process list. Enable continuous integration by clicking on the switch and then however over Save & queue to select Save. We don’t need to trigger another build we just want to change its configuration.

Verifying the build

One cool thing about the VSTS build and creating a release package this way is that we can verify what is in our release package really easily. If you click on Build to go back to the build list and then click on the build we created you will be able to see if the build we kicked off earlier is complete. If it isn’t just wait until it is… Once complete you can click on the build number under Recently Completed and once its loaded there will be an Artifacts tab. This gives you access to the artifacts that were published in the build. Download the artifact drop and you can see that inside it is a zip folder containing the same files as were created and tested locally. You could even extract it and test it using http-server as we did before if you like!

Creating a release – App Service Deployment

There are a few ways you can deploy to an Azure Web App and the easiest way is to do an App Service deployment. But first we need a Web App…

Create the Web App

Log into http:///portal.azure.com and click New on the left hand side. In the search box enter Web App, in the results select Web App and click Create. In the following dialogue give it the following values:

NOTE: The App Name must be unique to the whole of Azure so I would suggest putting your name like “sethr” or something in place of {unique-name}.

App Name: create-react-app-{unique-name} Subscription: (Select your subscription) Resource Group: create-react-app-vsts App Service plan/Location: (Create a new one or select an existing one) Click Create and wait for the web app to finish deploying.

Creating the release definition

Go back to your Visual Studio team services account and hover on Build and Release and click on Releases to get to the release page. Click on New definition and then under **Select a template select Empty and click next. On the next screen make sure you have selected the build you created earlier and also check the box next to Continuous deployment to trigger this release whenever a new build is successful. Click on Add Tasks, click add next to Azure App Service Deploy then click close. Select your Azure subscription, click Authorize and follow the prompts to log into your Azure account. This is assuming you are using the same account for both VSTS and Azure. If not you need to create a service principal by following the instructions under “Connect your Azure subscriptions to VSTS in 3 clicks” in this article. When you come back you can press the refresh button and this should appear in the subscriptions list. It may take a moment to show up but in the App Service Name drop down you should find the Web App that you just created earlier. Select it and then click Save on the release definition.

Manually creating a release

Now that we have a build completed and a release definition ready to go lets get our code live in Azure! From the Releases Tab make sure you have the release you just created selected and click on the + Release button and click Create Release. In the popup you can select which build version you want to release (it defaults to the latest) and then select Create. You can see the progress of this by clicking on the link next to the definition name that says Releases and double clicking the row of the release you just created. Click on the Logs tab at the top to see the logs.

Testing the release

Now pop back into the Azure Portal click on App Services on the left hand side and find the app you created. Click on the link under URL and you should see you brand new React app deployed and running just as it was locally!

Enabling client side routing

Unfortunately out of the box if you have client routing in your React app Azure won’t know about this and it will give you a 404 if you try to visit a URL like http://myapp.azurewebsites.net/client-route. However thanks to this great guide and the power of continous integation this is an easy fix. Add a file web.config to your local project with the following content:

<?xml version=”1.0"?>
<configuration>
    <system.webServer>
    <rewrite>
    <rules>
    <rule name=”React Routes” stopProcessing=”true”>
    <match url=”.*” />
    <conditions logicalGrouping=”MatchAll”>
    <add input=”{REQUEST_FILENAME}” matchType=”IsFile” negate=”true” />
    <add input=”{REQUEST_FILENAME}” matchType=”IsDirectory” negate=”true” />
    <add input=”{REQUEST_URI}” pattern=”^/(api)” negate=”true” />
    </conditions>
    <action type=”Rewrite” url=”/” />
    </rule>
    </rules>
    </rewrite>
    </system.webServer>
</configuration>

Run the following to commit and push this to your repo:

git add .
git commit -m "Added web.config to handle client routing"
git push

If you followed all the instructions up until now this should kick off a new build, which in turn will kick off a new release and you will be good to add routing to your app and it will work perfectly in your Azure Web App with direct links! If you want to see the final code you can find it here in Github

Seth Reid

/

Deploying a Create React App project to Azure with VSTS Build and Release