Creat-React-App on Azure

The create-react-app boilerplate is pretty good. It’s easy to get up and running in react with this package. It also provides useful tools for compiling the application into a production ready deployment.

Unfortunately this doesn’t fit perfectly into the Azure pipeline because Microsoft wants to build things on the server. The Azure platform is great and they’ve got good support for Node.js apps. But with the create-react-app in particular a few steps need to be completed in order to get this up and running properly. There’s documentation for this out there but I ran into a couple small snags along the way.

  • Obviously you want to have a create-react-app set up in a repository.  You can clone the project from this Github Repo. Read the documentation on setting it up
  • You’ll need custom deployment scripts for this app. Install azure-cli then use

    azure site deploymentscript --node --sitePath build

    where “build” is the output directory from the npm run build command

  • The deploy.cmd must be modified to properly build the app then copy it over to the actual wwwroot. This Stack Overflow Answer helped point me in the right direction

kudu

  • In my case I’m doing “npm install” then “npm run build” and finally using the kudu sync to copy the compiled app to the wwwroot folder.
  • Connect your Azure web app to your repository. Microsoft provides support for a variety of source control repos for this. It’s fairly straightforward and well documented at here
  • Properly set the node version: I had some problems where my node and npm versions were incorrect. The version can be set in the package.json file or the application settings. This blog post explains both.
  • I needed to install the create-react-app and babel packages globally to handle proper transpiling. Log into Kudu from the Azure portal and run the npm install -g commands

If all goes well doing a commit and push to remote will kick off a build on the azure web app. From there the custom script will kick in and build the app using the create-react-app build script. Finally it should copy this to the wwwroot folder leaving you with a clean website.

The nice thing with the custom script is I’ll be able to get my unit tests running in there making it all automatic. The deploy will fail if the tests fail leaving the environment untouched. I’m excited to get this working for a very simple and streamlined CI pipeline.

 

Another useful post by Jeff Wilcox describing setting up custom builds on an Azure web app

The Pipeline

Continuous integration and Continuous deployment have once again changed for the better. Thanks to automation and Git hooks people are now doing deployments triggered directly off commits. This should drastically improve and speed up the overall CI and deployment paths.

I’m looking to implement this in Microsoft Azure which provides support for this

 

Continuous Deployment to Azure App Service

 

We are currently using a three environment configuration : CI, QA and Production with a staging slot meant for blue green deployments (ref: Martin Fowler).