Deploying React apps to Azure Web App with Azure DevOps

welcome to the session in this video we are going to see how to deploy a react.js a pleasure app service using Azure DevOps as our initial step we will create a react application in our local system next push our code to Azure repo then create an azure build pipeline for building the react.js application our second last step is to create an app service in Azure to deploy our application and is the final step create an azure release pipeline for releasing the react.js application to Azure so now let's create the react application open the terminal and navigate to the directory where we want to create our react application type MPX create - react - app and then your project name and our basic react application is ready in the current directory get inside the folder and run the command NPM start you this will open the browser on localhost port 3000 and as you can see a react app is up and running now back to our terminal and press control C to stop the server our next move is to create the build pipeline in Azure DevOps for that first log in to dev - or comm as your DevOps provides integrated features such as scrum board build and release pipelines and many more explore those features as well which makes your work plans really simple so for the time being we are going with the pipelines initially we create a new project let's name it react app and then push our local code to the azure repo as we have already created the source code in our local system let's go with the second option which will push an existing repository using the command line first of all ensure that you are inside the project folder then copy all the commands and directly paste it in the console and hit enter you consequently this will push all the local source code to the remote Azure repo our next move is to create the build pipeline where we build our react j/s code and push the output to the build artifacts for now we can go with classic editor where our work will be done with a little bit of code by default go for the repository as react app as we have only one repository in this project hence the react app loaded make the branch as master currently we don't have any other branch click the continue button select the empty job as we don't have any built-in template for react j/s we can use Windows or Ubuntu as the agent for now let's set it as Windows now we can add agent jobs to build and push the files to artifacts click on the plus icon search for NPM just add NPM tasks to our build pipeline you can see that NPM install command over here this will internally run the command and install all the NPM modules which are mentioned in our package JSON as our current project is in the root folder we don't have to choose any separate working folder but we can pick one to a root folder of the project where the package dot JSON file is present if necessary again let's add one more node task to the build pipeline at this moment we need to run the NPM run build we can change the task name to npm build to run npm build choose command as custom and in command textbox we can add run build command our next step is to keep the build file to the build artifacts therefore when we do the release we can use the same file to release it to multiple stages search for publish build artifacts and add it to our build pipeline change the path to publish field value to build that's it now you can build and run so that we can see the artifacts you here we will be able to see the steps which are executing internally later if there is any error in the build because of wrong code or something we can see the error details here once the build is done we can see one artifact file added over here by clicking on the link we will be able to view or download the artifact files locally at this point we have to activate the trigger which allows us to start our build once a commit happens to this branch you that's it our build pipeline is set before we move on to release pipeline we have to set up our Azure web app service where we are going to deploy our react.js application as your web app is a cloud computing based platform for hosting websites created and operated by Microsoft log into Azure and create a new Azure app service from all resources page click on the plus icon which will redirect you to the create page we need to choose a resource group resource groups are containers that holds related resources for an azure solution for this assignment we will create a new resource group named react tap now we need to provide a unique valid name for our Azure app service let's try the name with test my react it's valid accordingly we can access this site as test my react dot as your website's dotnet select runtime stack as asp.net choose the app service plan I am going to select my free service plan paid services are also available depending on the requirements you can make a choice for the moment we can skip the monitoring tab later on in any of my future videos I will explain the application insights in depth just leave tags tab as it is now let's quickly review and create the resource click on the create button this will create the web app as your pause service for us go to the resource where we can see the app service is running click on the URI which will open the website yes that's our default web page provided by Asher once our release pipeline deploys our code here this content will be replaced by our react j/s page now let's move on to the release pipeline area create a new release pipeline we can select empty job or as your app service deployment let's go with empty job for now let's mention the stage name is dev as your release pipeline allows us to deploy the same build to multiple stages now we can choose the artifacts from the build pipeline so we can select the azure repo as our source type because our artifacts which we created is in the azure build pipeline select the build pipeline name which we created a few minutes back and hit the Add button next step is to enable our continuous deployment trigger so that whenever there is a build successfully completed our release pipeline will trigger automatically now we can configure our release pipeline let's add a new task to the pipeline we can choose as your web app task this task will deploy our react j/s code to the azure web app we can choose the azure subscription where we created our as your web app resource as i have already integrated the azure with this devops my Azure subscription is showing here else we have to go click the manage link and integrate the azure to DevOps choose app type as web app on Windows now we can choose the azure web app name here select the test my react which we created an erasure select our package your folder by clicking the three dots next select the drop folder which we created in our build pipeline also we are not going with the deployed a slot option as we have only one slot created in our azure web app let's save the release pipeline now we can verify our build and the release pipelines are working fine by making some changes in our source code I have removed the entire rendering code from app dot J's file and just kept it simply hello Asher now it's time to commit the changes next we can push our changes to Azure repo back to the azure build pipeline here we can see the build is already triggered as we have made the changes in the azure repo and now the build process is in progress once the build process is completed immediately the release pipeline must be triggered let's have a look at the release pipeline as expected it is triggered deployment to Azure is in progress now let's open the azure web app and go to our website Wow our new page with message hello Asher is here beautiful that is as simple as that we just modified our source code and did a check and that's it the changes are then automatically deployed to Azure without any manual interventions these type of CI CD pipelines will be useful when you work on the agile methodology so whenever there is a rework in the master branch the changes are automatically deployed to the particular environment and testing team will be able to start testing the code instead of waiting for the developers to deploy every time they made some changes and push to the master branch we can also trigger this release on a particular time for example a release can be set up to trigger every day at a specific time say at 9 p.m. and all those code alterations are published to the environment that's pretty cool and yes that's all for now thanks for watching see you in next session with an exciting new topic

Channel: Techies Lounge

Views: 42,994

Keywords: Azure, DevOps, CI/CD, ReactJs, Build pipeline, Release pipeline

Id: Ny5vJRfQito

Length: 11min 7sec (667 seconds)

Published: Sun Jun 21 2020