Deploying create-react-app on Microsoft Azure

Creating React apps has never been easier with the advent of tools like create-react-app or next 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 have create-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 named AzureTest 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 named build 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 named AzureReactTest1 and before continuing download the publish profile which contains FTP credentials.

Once connected via the FTP client, copy the entire content of the build 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 using create-react-app and react-routerto build a single page app, the url site.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 an index.html (or some other index.* named) file inside a section folder. To fix this, Azure needs to know how to pass the intended route to the one and only index.html placed at the site’s root. Create a new file in the /site/wwwroot folder named web.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.