The main focus of this article is to learn about CI CD setup for react application by creating build pipeline first and then creating release pipeline and creating App Service on Azure portal and deploying react based application on azure portal app service.
First step is we need a react application on Dev Azure Repository.
First of all we usually run a series of steps which are as:
- npm install — to install node_modules locally
- webpack — to create bundled files
Let’s check with my package.json where i have set up npm script to run webpack command
npm run build command will execute webpack command and generate bundled files in dist folder. Dist folder will have two files. one is bundled js file and other is index.html which will be generated in dist folder
Now lets create Build Pipeline by going to Pipelines section in left and select the template of Node.js with gulp option. It will come up with predefined tasks which we can change as per our requirement.
First select node task , where we will run npm install command
Next we will remove Run gulp task and add another node task from right side
Click on npm Add Task button and it will display below first task.
Change the display name from npm install to npm run build and change command from install to custom option. It will display the command and arguments input box, please type npm script command given in package.json and it to ‘run build’ command
Now move to next step to archive files. Here we will tell from which folder to archive files.
Change the root folder by clicking three dots on right side and select path to dist folder as it will be folder where index_bundle.js file will be created and index.html will be copied by previous task.
Now move to publish artifacts task and select the path from where to pick files and define artifact name which will be used in release pipeline
Now save and queue build and see if your build succeed or fails.
We can manually run this script by clicking on run or we can setup auto trigger by selecting option to enable auto-trigger Build Pipeline whenever code is pushed to specific branch.
After you receive the success notification of build pipeline. We are done with Continuous Integration Step of DevOps.
Now lets move to Continuous Deployment Step of code.
Lets click on Add New Release Pipeline option.
After clicking on adding release pipeline, we are presented with a list of options as to which type of release pipeline we want to create. Select Azure App Service deployment option. Now we can edit stage name.
After editing stage name, click on 1 job, 1 task option and we will be presented with a screen as below
Here we need to supply Azure Subscription and App Service Name.
And Click on Manage link. It will show a list of service connections if already created and a link to create a new service connection.
Here is the post on How to Create Service Connection.
Now add the details for Azure Subscription and app Service name.
Now click on save and go back to release pipeline step and click on add an artifact
There we will select source build pipeline name as previously created to use its artifact.
Now click on Add to add this artifact to this release pipeline.
We are done with creating our release pipeline. Now can create a new release and trigger it to deploy React App on Azure Portal App Service Url.
Now we are done with creating release pipeline with 1 job and 1 artifact .
You can run this release by clicking on Deploy button and it will push react application to Azure Portal.
Once release is successfully deployed. We can see react app deployed on azure portal.
