Deploy create-react-app to Azure from github using VSTS CI/CD

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.

Prerequisite:

  1. You have react project created using create-react-app CLI
  2. You have Azure subscription and have Web App created ready to use
  3. 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

npm install

  • 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,.

 

Advertisements

Is it worth to try Typescript in React Project

My Answer is NO.

The reason is pretty simple, the typescript packages contains too much errors and issues, it will introduce more problem and bugs than the benefit it brings to you.

Another issue it comes is the version compatibility issue. As the react project grows, each one of these new react related components, Redux, React-Redux, React-Router etc, every single one of these components will need its corresponding typescript type definitions, and I am sure they will have compatibility issue between the current supported version and latest version, just like what it is now. When your project grow, you will end up having lots of constraints to adapt a very simple new version of one of these component.

So for now, at this stage, don’t use typescript.

how to use Keys in React Dynamic children the right way

Recently I was stuck in a react component which children components doesn’t update no matter how I set the state or props. I eventually find the solution is really easy and simple: set the Key value unique across the parent context all the time.

Problem:

The issue can happen in all cascade drop down scenarios. For example, the parent dropdown is a list of countries, and the child dropdown is a list of cities. If the country drop down list changes, the cities drop down should reload with the corresponding country’s cities. However once the cities drop down option changed, it will always keep  the current selected status when I change the countries drop down.

Solution:

The solution is pretty simple: always make sure the Key value in the child list unique across the countries, not just the current selection.

Case study:

My previous thought was that just make the the Key value unique, and the simplest way is just pass the index of the child children array, and it works in most cases, as long as you don’t have a cascade dropdown. and it is true in that case. However in the cascade drop down scenario, the index is not unique across parent drop down selection, which means the child index 1 of city New York in the drop down for United State, is not the same for London for United Kingdom. If the index of the array is still passed to child dynamic list, it will cause the child component think it’s the same component as its previous one, so just leave it and don’t update the child component. In my scenario, I just need to pass the id of country and id of city as the Key value, and it fix the problem.

Lesson Learnt:

  1. React can only determine child dynamic component based on the Key
  2. always make sure the Key is unique across the parent component, not the current selection