Learn how to speed up your project workflow in minutes.
![](https://i0.wp.com/miro.medium.com/max/1050/1*U3lV0jl7VvGw2DJ5RrdeUw.png?w=1120&ssl=1)
In this guide, I will run through the steps to help you set up a project workflow with Azure and Github using a React App. Before we start, let’s go over the basics and why we are doing this.
What is CI/CD?
Continuous integration (CI) focuses on building and testing the new code changes.
Continuous delivery/deployment (CD) focuses on getting new changes ready for deployment in production.
![](https://i0.wp.com/miro.medium.com/max/1050/1*gp5bu9joMOkCAkwRfXJA4w.png?w=1120&ssl=1)
Benefits of CI/CD
CI/CD can help teams speed up the deployment process, allowing developers to make small code changes to minimize bugs in production.
(Optional) Step 0: Create a React App
If you already have an app ready, go to step 1.
npx create-react-app <project-name>
Step 1: Setup CI/CD pipeline
If you are new to Azure, check out Microsoft’s New User Guide; it explains the key concepts in Azure Pipeline.
Create an azure-pipeline.yml file in your project root directory. This file lists out the steps to build an artifact.
trigger:
- master
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool@0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm install
npm run build
displayName: 'npm install and build'
- task: CopyFiles@2
inputs:
Contents: 'build/**' # Pull the build directory (React)
TargetFolder: '$(Build.ArtifactStagingDirectory)'
- task: PublishBuildArtifacts@1
inputs:
pathtoPublish: $(Build.ArtifactStagingDirectory)
ArtifactName: 'www' # output artifact named www
Push up the azure-pipeline.yml file to GitHub and continue.
Step 2: Setup project
Go to portal.azure.com and then go to Azure DevOps organizations.
![](https://i0.wp.com/miro.medium.com/max/698/1*HPu9U8410Su3B9VM4XwoXw.png?w=1120&ssl=1)
If you are new to Azure, you need to set up a new organization before setting up a project. Click on the ‘Create new organization’ button on the top right corner.
![](https://i0.wp.com/miro.medium.com/max/729/1*MUmPR02FMNDMIjC4BUY4Ig.png?w=1120&ssl=1)
Once you created a new organization, select a ‘New Project’ and fill out the project details. Then you should see the project homepage.
![](https://i0.wp.com/miro.medium.com/max/1050/1*2gdEmTFlxyah0aNS0FlDLA.png?w=1120&ssl=1)
Go to ‘Pipelines’ and select ‘Create Pipeline.’ First, we need to connect the codebase, so select ‘GitHub.’
![](https://i0.wp.com/miro.medium.com/max/1031/1*k80yByVlK5OGZj-aQ2ISvw.png?w=1120&ssl=1)
Once you select GitHub, you should be directed to a GitHub page for authentication and approval. Make sure you grant Azure access to the correct repo.
![](https://i0.wp.com/miro.medium.com/max/1050/1*-NVgauwMOHjQMZC7zj7hhg.png?w=1120&ssl=1)
Next, we need to configure the CI/CD pipeline. Select ‘Existing Azure Pipelines YAML File.’
![](https://i0.wp.com/miro.medium.com/max/959/1*OnC5pNFugLdVd0z_cBHWLg.png?w=1120&ssl=1)
Use the azure-pipeline.yml file.
![](https://i0.wp.com/miro.medium.com/max/701/1*w4FxRFdfCnA8cSCOoHkLwg.png?w=1120&ssl=1)
Then, run your pipeline to create an artifact and go to jobs to see a realtime build.
![](https://i0.wp.com/miro.medium.com/max/1050/1*DvhzAXApYI4KVngdoQ_VjQ.png?w=1120&ssl=1)
Step 3: Set up App Service
Navigate back to the portal and go to App Services to set up the project URL.
![](https://i0.wp.com/miro.medium.com/max/579/1*ISVvfXAGPwblX79mIqu4iQ.png?w=1120&ssl=1)
Click on ‘Add’ and fill in the project details. Here is a basic web app set up.
![](https://i0.wp.com/miro.medium.com/max/1050/1*GdP1x0UA4NC_9piXYX5qXg.png?w=1120&ssl=1)
If you don’t have a resource group, go to the search bar and lookup ‘Resource Group’ and create a basic group like the screenshot below.
![](https://i0.wp.com/miro.medium.com/max/1050/1*LFUupPcRm4iQp1nMHScG4w.png?w=1120&ssl=1)
The same goes for Windows Plan, lookup ‘App Service Plan,’ and create a plan.
![](https://i0.wp.com/miro.medium.com/max/1050/1*yxOLIcBJzFGmIG0PvrF-pw.png?w=1120&ssl=1)
Step 4: Create a release pipeline
Now go back to the project homepage and select ‘Releases’ under the pipeline tab.
![](https://i0.wp.com/miro.medium.com/max/900/1*SnFESLMTCTXKjwNNzfmIjQ.png?w=1120&ssl=1)
Apply ‘Azure App Service deployment’ and then select ‘Add an artifact.’
![](https://i0.wp.com/miro.medium.com/max/905/1*ndTBGiSk0nTTgTRUpqp6WA.png?w=1120&ssl=1)
Now we need to add a deployment trigger. In this guide, the trigger is set on the master branch. So whenever new code gets pushed to master, a new build will start. Click on the lightning bolt next to the article to enable the trigger.
![](https://i0.wp.com/miro.medium.com/max/852/1*W7YUc3u3VgUkjkOvp6Zrvw.png?w=1120&ssl=1)
The pipeline should look like this.
![](https://i0.wp.com/miro.medium.com/max/1002/1*pmyanKfZTxMrK8gKSWdhYw.png?w=1120&ssl=1)
Go the ‘Tasks’ tab to select the correct subscription and app service name.
![](https://i0.wp.com/miro.medium.com/max/1050/1*o1Me_nMD8qj6NaFj4AO0-g.png?w=1120&ssl=1)
Select ‘Deploy Azure App Service’ and go to ‘Package or folder.’ Replace the original path with the following.
$(System.DefaultWorkingDirectory)/<sourcec-alias>/www/build
For example, it should look like this.
![](https://i0.wp.com/miro.medium.com/max/956/1*xJtJRwBwDcGEEOT-JWAUoQ.png?w=1120&ssl=1)
Step 5: Test CI/CD
To test your CI/CD pipeline, make some changes to the app and push up the code. Once you do, go to the repo on GitHub, you should see a yellow dot next to the commit hash.
![](https://i0.wp.com/miro.medium.com/max/815/1*cb6Q8Q0IMltaPH55twwb4A.png?w=1120&ssl=1)
Once the build is complete, it should trigger the release pipeline. Go to ‘Releases,’ and you should see the release progress in realtime.
![](https://i0.wp.com/miro.medium.com/max/1050/1*mn_fqjXo5CjLiUCD9hZ6CQ.png?w=1120&ssl=1)
To view the website, go to <web-app-name>.azurewebsites.net
The web-app-name is the name from the create web app page.