Deploying create-react-app on Microsoft Azure

3 min readJan 2, 2017

Creating React apps has never been easier with the advent of tools likecreate-react-app ornext but deploying them is both easy and hard at the same time.

Since I usually deploy apps on Microsoft Azure, it was natural to deploy a shiny new frontend on an Azure Website. The CLI tool can build your React app that can be served as a simple static site since it consists only of a single html file, a single js file and a bunch of static images and style sheets.

Building a website

Our first step is ensuring we havecreate-react-app installed on our system. To do that, run the following command:

npm i -g create-react-app

To create a new project, simply invoke the tool with a project name:

create-react-app AzureTest

This will create a new folder namedAzureTest that will contain all the files used for developing and building your website. Let’s build the project using the following command:

npm run build

After it is finished, a new folder namedbuild is created which contains everything you need to run the website in production.

Deploying on Azure Website

Let’s create a new website that will host our React app. Go into Azure Portal and create a new Web App. Let’s assume it is namedAzureReactTest1 and before continuing download the publish profile which contains FTP credentials.

Once connected via the FTP client, copy the entire content of thebuild folder created earlier into the/site/wwwroot/ folder on your Azure Website.

Refresh the site in a browser and it should display the default page.

Client-side routing

Once routing is added into the mix, problems appear. If routing is done on the client side, e.g. if you are usingcreate-react-app andreact-routerto build a single page app, the urlsite.com/section won’t work out of the box.

This means if we try to open the link above manually in a browser, we would get a 404 error page because the Azure is trying to find anindex.html (or some otherindex.* named) file inside asection folder. To fix this, Azure needs to know how to pass the intended route to the one and onlyindex.html placed at the site’s root. Create a new file in the/site/wwwroot folder namedweb.config 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>

This will tell Azure to rewrite all urls as if they are pointing to our root file and our SPA application can handle the links correctly.

Conclusion

Deploying React apps is as simple as deploying static sites — provided one is aware of the routing problems. In the next post we’ll setup a CI integration on our Azure website.

by the author.