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-router
to 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.