Build and Deploy Simple React Web App using Azure DevOps.
Implementing CI/CD in your Web App
Prerequisites
- Git Bash
- An Azure account with active subscription.
- Azure DevOps (https://dev.azure.com/)
- Code editor (Vscode.)
- Node.js (Install the required npm package)
Step 1: Creating the React App and Test Locally.
Open GIT bash and make a folder using below command
- mkdir App
- cd App
- create the app using — npx create-react-app <app-name>.
- Cd into the app and start the app using -- npm start.
This will open a browser http://localhost:3000/
Once done, use Ctrl+C to stop the server from the terminal,then open in Visual Studio Code.
Step 2: Configure Azure App Service.
Login into https://portal.azure.com
- Create an App Service with a basic B1 App service Plan.
Step 3: Create the Azure DevOps Project and connect to the App service instance.
Login into https://dev.azure.com/ and create a new project.
Click on repos to copy the Git credentials on a notepad.
Push from the local to remote repository using the below git commands on Git bash.
— git init
— git add .
— git commit -m “<commit message>”
— git remote add origin <url to your Azure DevOps repo>
— git push — set-upstream origin master
This brings a prompt, login into your Azure DevOps portal then this shows that the App has been push to the Azure repo.
Step 4: Create a Build Pipeline.
To connect the pipeline to the App service instance created.
- Create pipeline.
- Use Classic editor -to create a yaml file from scratch using empty job.
Using empty job to create tasks for build pipeline, with Agent job this allows tasks run synchronously by searching for the below commands
— npm install( to install the npm package)
— npm run build (To run the build command)
— Publish Build artifacts (To publish the artifact from the build step 2 above)
— The last step would be to click save and queue to run the list of commands.
Step 5: Creating the release pipeline and Deploying to Azure
This is to push the code from the build pipeline from CI/CD to Azure Web App.
— Enable continuous integration on the project.
— The build project is what will be pushed to azure
The build pipeline would trigger, then the release pipeline would also trigger automatically. The release pipeline has one job which is to push to azure and that is the sole purpose of continuous integration as the CI is already enabled in the previous step.
Step 6: Adding another task on the empty job to deploy to App service
The deploy stage depends on the build stage, only a successful build will trigger a deployment. The new added task — task: Simplereactappptells the pipeline to use the artifact from the build stage, deploy it to our web app created.
Now that we understand the contents of the file, click on “Save ” in the pipelines page, enter a commit message, click on “save and run” which will immediately trigger the pipeline
Next is to make some changes to the source code and git push using the git commands.
Once the task is done, it will trigger the release pipeline and then the release pipeline pushes to azure. Any changes on the source code get committed and pushed using git commands.
Now we have a successful deployment, we can navigate on to the Web App URL https://<your-web-app-name.azurewebsites.net which should be running.
Resources Clean Up
To prevent incurring charges on the Azure resources created in this tutorial, you can delete the resource groop hosting the web app which will delete all resources in it. Resource deletion
Conclusion
Thank you for reading and following through. In this article we have deployed a React web App to an Azure App services also integrating an Azure CI/CD pipeline that automatically builds and deploys the code. You can add other functionalities in your pipeline, such as test scripts, security checks, multi stages deployment etc.
Feel free to lookup my Github and connect with me on Linkedin and Twitter.
