create-react-app is one of the easiest way to create your react boilerplate project. For developers from .Net background, it is a natural choice to use Azure as the hosting environment. However it’s not so easy to do the deployment to Azure for react project, especially in case you want to setup Continuous Integration and Continuous Delivery.
Some people have written articles how to deploy to Azure manually, but not with CI/CD which is a great practise. Here I show step by step how to use Visual Studio Online to create CI to deploy your react application to Azure.
- You have react project created using create-react-app CLI
- You have Azure subscription and have Web App created ready to use
- You have Visual Studio Online account where you can host your source code and create CI/CD, if your source code is in github, it’s OK, we can only use the CI/CD from VSTS and use github as your source repository.
Step 1: Create react app and customize to your need
- create your react boilerplate app using create-react-app. You can easily follow the instruction from facebook create-react-app git to create your react app. Just noted that by default it use yarn instead of npm
- install npm packages
- add the source to github repository
- create a new project in your github account
- in the code section, it will give you the detailed instruction how to publish your code to the repository
- Open the package.json using your preferred editor (I will use Visual Studio Code through this article), inside the scripts node, it lists all the commands you can use.
- As the create-react-app has everything you need to build a modern SPA, including JSX,ES6, service worker, etc. However these tools are pre-configured to work in a specific way. To take full control of your project, you need to eject to be able to customize it. run the command to eject and you will see all the pre-configured configuration files are generated and available for your.
npm run eject
- If you are building a SPA, it’s ready to check in your change to the github. If you are not and want to add react routing, redux, etc, I will include the details in the next article.
- after you check in the latest code to github, login to your visualstudio.com
Step 2: create build definitions
- Create a new project inside your visualstudio.com
- navigate to the Build and Release section, and create a new Builds definition
- In the Select a source section, you can select Github and pick the repository and branch you want to deploy and click continue
- we will start from scratch, so we will pick empty template
- In the phase 1, give it a name, here I give it npm since it’s an npm build process
- Click + button to add task, search and add npm, the display name is Install dependencies, Command would be install. this task will install all packages defined in the package.json before we start build
- click + button to add another npm task, the display name is build, Command is custom, and we will enter run build in the command and arguments field. this task will create the build folder and generate all files ready for product release
- click + button to add another task, search and add Archive Files task, leave the name as Create release package $(Build.BinariesDirectory), Root folder or file to archive is build, set archive type to zip, and Archive file to create is $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip, tick the Replace existing archive checkbox
- click + button to add another task, search publish and add Publish Build Artifacts task. enter the display name Publish release Package. set path to publish to $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip, change Artifact name to drop. Since we are going to use Visual Studio release script to pickup the build file, we select Visual Studio Team Services/TFS from the Artifact publish location.
now when we save and queue the build definition, we will see the build will pickup your source code from github and generate a zip file ready to deploy.
step 3: create web app in Azure. This is pretty straight forward and simple, I will skip this in detal
step 4: create release definition
- navigate to Releases folder, and search template azure app service and select Azure App Service Deployment under Featured section in the search result
- Click Add artifact box, select Build as source type, and pick the same project, select the build definition just created for the source, leave Latest as defult version, click Add to save. Tick the lighting icon to enable/disable continuous deployment trigger.
- select Environments box, and click the link with text 1 phase, 1 task
- In the deployment process section, select your Azure subscription, and it will cascade dropdown show your web app created in step 2.
- Fill the missing bit in Deploy Azure App Service section. Leave the default as it is.
- Once you have filled the required fields and back to the release definition, you should not see any error indication anymore.
- Click Save button to save your release definition.
Now you can manually start your release definition to get your code released to Azure Web App,.