Steps to publish your React Single Page Application into Azure App Service using Azure DevOps
This blog would help setting up your Azure DevOps project creation, repository management, configuring the build and release pipeline, and CI/CD enablement.
Let’s get started by creating a new React project using the CLI (command line interface), you can navigate to a directory of your choice and run the following command:
npx create-react-app az-demo
Once the project gets created, let’s navigate to the project (cd az-demo) from the command line and open it with Visual Studio Code
The structure of your project should look something like this:
There is a starter script inside our package.json which will build and run our application. From the command line run the following command:
Open your browser and access the application via localhost:3000
Let’s open the App.js file and then modify Devops Demo like below and finally save to reload
Run npm start and then you should see that the application is running
Reload the browser and access the application again to view the modified content via localhost:3000
Navigate to https://dev.azure.com/ and create a new project in your Azure DevOps organization. I’ve named it “React Demo”.
Click on the repo’s tab to navigate to the repo. Once there let’s use the link provided to push our react project.
Navigate to pipeline
Let’s click on “create a pipeline” and choose “use the classic editor”
Select the Azure Repos Git option and then click on continue
Select start with an “empty job” option
Click on the Agent job 1 and let’s add two npm tasks and one publish artifacts task.
Create all the required tasks and then Save each task added to the pipeline
a. npm install: This will install all the react library (dependencies)
We can leave the npm install task as it is
b. npm run build: This will create a build folder that we will then use to publish our application.
Let’s rename the second task to “npm build”. Under command choose “custom” from the dropdown and enter “run build” under “Command and arguments”.
c. Publish Artifact: Click on the publish task
Set the “Path to publish” to build, so that our release pipeline will have access to the generated build.
Click on the Run pipeline option. This should create a build archive at the end. Next let’s Save and Run to test it out.
You should now see the newly created pipeline and its status as queued to be run.
Now that the build pipeline has succeeded, we should be able to see the published artifact.
Click on Edit pipeline option
Let’s enable Continuous Integration for this pipeline.
And then click on Save & queue
I have also created an app service ReactDeleteDemo
Navigate back to your Azure DevOps Pipelines and create a new Release
Select the “Azure App Service Deployment” template
You can then give your stage a name. I’ve named mine as “Dev”.
Let’s click on “Add an artifact”. Then choose your pipeline and the artifact that was generated when you ran the pipeline. Once you select the artifact, click the “Add” button
Double-check to see if CI/CD is enabled properly.
Now, click on the “1 job, 1 task” option under your stage and select the “Azure App Service Deploy” task
Select the appropriate Azure Subscription, Resource Group, App Service Name and required startup commands.
You could also add any App Settings as required
Go ahead and create a release from the pipeline created. If you visit the Azure WebApp URL, you should now see your website!!
Test CI/CD by changing the code
Modify your source code by adding some more text and run npm start
Verify the results on your local browser
To commit the changes to the repository, please run the below commands
git add .
git commit -m “second commit”
git push -u origin –all
The last command will push the source code to the repository
Upon the push to the repository, we should see the CI/CD has triggered
We should then see that the Build pipeline has succeeded
The release pipeline should automatically be triggered.
The deployment should complete successfully like below