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”.
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.
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.
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 masterYou 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.
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.
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.
Make sure you select the correct “Version control” for your project. If you are using Github, then “Git” is the correct answer.
Now click on the “Build And Release” tab.
Select “New Definition”
Search for “Empty” template and select the 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.
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.
Add a second npm task, but this time set it to custom and “run build”.
Search for the “App Service Deploy” 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
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!
