Deploying a React App As a Static Site On Azure

Building apps is fun! Deploying them can be slightly frustrating; but it doesn’t have to be. In this guide, we’ll take a detailed look at all of the different ways to deploy React to Azure as a static application.

Static means that we aren’t deploying any server code; just the front end files. Azure will do all of the web work for us.

While this guide assume the use of create-react-app, this is of course not necessary to run a React app on Azure. If you don’t have an Azure account and would like one, you can get a fully functional trial by going to https://azure.microsoft.com/en-us/free/

Create A New Web App

First, you need to create a new website on Azure. You can do that by searching for “Web App” in the search field and then selecting “Web App”.

Azure: Create A New Web App

When asked for Windows / Linux (preview), leave the default at Windows.

IMPORTANT:

You will need to configure Azure to handle your routes. Otherwise the application will break when you add in client-side routing.

Static: FTP

To find your site’s FTP path, username and password, download the site’s publish profile.

That file (which is just XML despite having a “.publishSettings” extension) contains all of the necessary FTP information.

Just use your favorite FTP client (mine is Filezilla) and publish.

Static: Git

You can also have Azure pull directly from Github. This can be accomplished via the CLI or the portal. The CLI is well covered in the documentation, so we’ll use the portal here.

Select “Deployment Options” on your site.

Azure: Deployment Options

Select “Choose Source”. You will see a bunch of different deployment options. Azure supports both local Git and Github. Local git is just you pushing code to a Github repo on Azure. Github is Azure pulling from your Github repo.

Static: Local Git

If you select Local Git, you will get a new setting on the Overview page which shows you the git clone url and your local git username. That username is coming from the “Deployment Credentials” tab where you can change it or the password at any time.

Azure: Git Credentials

Remember that we don’t want to push the entire project to production — with the source code, node_modules and the whole bit. We only want the “build” folder. If you aren’t currently using another git, this is easy. Just move into the “build” folder and do…

git init
git add .
git commit "initial build"
git remote add azure your-git-clone-url
git push azure master

You can see from your terminal output that the deployment succeeded. Note that I trimmed out some items to make it smaller so yours will look more verbose.

Terminal: Local Git Deployment Output

Static: Github

It’s likely that your project is already under source control, in which case you may already have it up on Github.

Go to “Deployment Options” and select Github. Connect to your Github account and then select the repo that you want to deploy.

Azure then pulls in all of the code from your repo. By default, create-react-app adds a .gitignore entry for the “build” folder. You are going to need to commit your build for this to work, so go ahead and remove that entry.

Now tell Azure where your “index.html” file lives by adding a new “Default Documents” entry.

Azure: New Default Documents Entry

Static: Continuous Integration With VSTS

Usually people do not want to commit their “build” folder, hence its automatic inclusion in .gitignore. What we really want to be able to do is have Azure pull our code from Github, run npm build and then deploy just the build folder. We can do that with Visual Studio Team Services, which is completely free to use for 5 users or less. Perfect for setting up CI with create-react-app.

Start a new “Build And Release” project.

VSTS: New Project

Make sure you select the correct “Version control” for your project. If you are using Github, then “Git” is the correct answer.

VSTS: Project Details

Now click on the “Build And Release” tab.

VSTS: Build & Release

Select “New Definition”

Search for “Empty” template and select the Empty Template.

VSTS: New Empty Template

Select Process, and then set the Default Agent Queue to “Hosted”.

Now select the Get Sources tab. Select “Github” and authorize VSTS to your account.

It takes some time to populate the drop downs if you belong to several organizations and have several repos.
VSTS: Connect To Github

Now add a task to run “npm build” on the code that gets pulled from the Github repo.

To do that, search for “npm” and select the npm task. Add it to the process. By default the npm task just runs npm install, which is precisely what we need to do, so there is no more work to be done here.

VSTS: npm install task

Add a second npm task, but this time set it to custom and “run build”.

VSTS: npm run build task

Search for the “App Service Deploy” task.

VSTS: App Service Deployment Task

Select the correct Azure subscription and click “Authorize”.

Now select the correct App Service Name. You may have to click the little refresh arrow next to the drop down to get the list to populate.

Make sure that you point the “Package or folder” to

$(System.DefaultWorkingDirectory)/build
VSTS: Configure App Service

Now click “Save & Queue”. This will queue your job up for build and deployment.

Don’t Forget To Update Your Web.config!

I mentioned this earlier in the article, but please refer to this article for how to create and deploy a web.config that will do routing correctly. The route will work from inside your app, but there will be no deep linking because Azure will try to route https://yourapp.com/customers/add to “index.html” from the path “customers/add” instead of just loading the root “index.html” file and letting React handle the rest.

Happy deployment!