{"id":38186,"date":"2020-01-10T06:00:57","date_gmt":"2020-01-10T13:00:57","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/premier-developer\/?p=38186"},"modified":"2020-01-09T11:03:55","modified_gmt":"2020-01-09T18:03:55","slug":"deploying-react-apps-to-azure-with-azure-devops","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/deploying-react-apps-to-azure-with-azure-devops\/","title":{"rendered":"Deploying React apps to Azure with Azure DevOps"},"content":{"rendered":"<p>In this post I will walk you through the steps of publishing your React SPA application into Azure using Azure DevOps. One of my favorite quotes is from the Chinese philosopher Confucius where he says: \u201cI hear and I forget. I see and I remember. I do and I understand.\u201d So, feel free to follow along as I believe you will get some added benefit from it.<\/p>\n<p>First of all, let me introduce myself. My name is Sidi Merzouk and I\u2019m Dev Consultant at Microsoft. In my role here at Microsoft I focus on Open Source and ALM (application life cycle management). You may also know me from my previous blog post <a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/using-azure-devops-rest-api-with-node-js-to-retrieve-repo-permissions\/\">Using Azure DevOps Rest API with Nodejs to retrieve project permission<\/a>.<\/p>\n<p>Here a list of requirements if you\u2019ve decided to follow along:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/\">Nodejs<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/devops\/organizations\/accounts\/create-organization?view=azure-devops#prerequisites\">Azure DevOps Organization<\/a><\/li>\n<li><a href=\"https:\/\/azure.microsoft.com\/en-us\/free\/\">Azure Free Account<\/a><\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/\">VS Code<\/a><\/li>\n<li><a href=\"https:\/\/git-scm.com\/downloads\">Git<\/a><\/li>\n<\/ul>\n<p>Lets get started by creating a new React project using the CLI (command line interface). From the command prompt (window terminal\/terminal\/shell\u2026etc) you can navigate to a directory of your choice and run the following command: <strong>npx create-react-app az-demo<\/strong><\/p>\n<p>Once the project gets created, let\u2019s navigate to the project from the command line and open it with Visual Studio Code.<\/p>\n<p><img decoding=\"async\" width=\"1927\" height=\"1274\" class=\"wp-image-38187\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image.png 1927w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-300x198.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-1024x677.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-768x508.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-1536x1015.png 1536w\" sizes=\"(max-width: 1927px) 100vw, 1927px\" \/><\/p>\n<p>The structure of your project should look something like this:<\/p>\n<p><img decoding=\"async\" width=\"3195\" height=\"1643\" class=\"wp-image-38188\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-1.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-1.png 3195w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-1-300x154.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-1-1024x527.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-1-768x395.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-1-1536x790.png 1536w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-1-2048x1053.png 2048w\" sizes=\"(max-width: 3195px) 100vw, 3195px\" \/><\/p>\n<p>There is a starter script inside our <strong>package.json<\/strong> which will <strong>build<\/strong> and <strong>run<\/strong> our application. From the command line run the following command:<\/p>\n<p><strong>$\u00a0npm\u00a0start<\/strong><\/p>\n<p>This should\u2019ve run and automatically opened a browser for you with the out of the box react logo.<\/p>\n<p><img decoding=\"async\" width=\"3240\" height=\"1760\" class=\"wp-image-38189\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-2.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-2.png 3240w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-2-300x163.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-2-1024x556.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-2-768x417.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-2-1536x834.png 1536w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-2-2048x1112.png 2048w\" sizes=\"(max-width: 3240px) 100vw, 3240px\" \/><\/p>\n<p>Let\u2019s open App.js file and modify &lt;p&gt; tag to say \u201cHello World\u201d instead \u201cEdit src\/App.js and save to reload.\u201d<\/p>\n<p><img decoding=\"async\" width=\"3240\" height=\"1836\" class=\"wp-image-38190\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-3.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-3.png 3240w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-3-300x170.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-3-1024x580.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-3-768x435.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-3-1536x870.png 1536w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-3-2048x1161.png 2048w\" sizes=\"(max-width: 3240px) 100vw, 3240px\" \/><\/p>\n<h5><\/h5>\n<h5>Step 2:<\/h5>\n<p>Create a project in your Azure DevOps organization. I named it \u201cReact Demo\u201d <img decoding=\"async\" width=\"2758\" height=\"1597\" class=\"wp-image-38191\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-4.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-4.png 2758w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-4-300x174.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-4-1024x593.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-4-768x445.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-4-1536x889.png 1536w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-4-2048x1186.png 2048w\" sizes=\"(max-width: 2758px) 100vw, 2758px\" \/><\/p>\n<p>Press on the repo\u2019s tab to navigate to the repo. Once there let\u2019s use the link provided to push our react project.<\/p>\n<p><img decoding=\"async\" width=\"1954\" height=\"1204\" class=\"wp-image-38192\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-5.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-5.png 1954w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-5-300x185.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-5-1024x631.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-5-768x473.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-5-1536x946.png 1536w\" sizes=\"(max-width: 1954px) 100vw, 1954px\" \/><\/p>\n<p>Your repo would look something like this:<\/p>\n<p><img decoding=\"async\" width=\"3214\" height=\"1838\" class=\"wp-image-38193\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-6.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-6.png 3214w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-6-300x172.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-6-1024x586.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-6-768x439.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-6-1536x878.png 1536w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-6-2048x1171.png 2048w\" sizes=\"(max-width: 3214px) 100vw, 3214px\" \/><\/p>\n<h5><\/h5>\n<h5>Step 3:<\/h5>\n<p>Let\u2019s click on \u201ccreate a pipeline\u201d and choose \u201cuse the classic editor\u201d and choose start with an \u201cempty job\u201d<\/p>\n<p><img decoding=\"async\" width=\"2746\" height=\"1186\" class=\"wp-image-38194\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-7.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-7.png 2746w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-7-300x130.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-7-1024x442.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-7-768x332.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-7-1536x663.png 1536w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-7-2048x885.png 2048w\" sizes=\"(max-width: 2746px) 100vw, 2746px\" \/><\/p>\n<p>Press on the Agent job 1 and let\u2019s add two <strong>npm<\/strong> tasks and publish artifacts task.<\/p>\n<p><img decoding=\"async\" width=\"1144\" height=\"476\" class=\"wp-image-38195\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-8.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-8.png 1144w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-8-300x125.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-8-1024x426.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-8-768x320.png 768w\" sizes=\"(max-width: 1144px) 100vw, 1144px\" \/><\/p>\n<p>We can leave the npm install task as it is. For the second one let\u2019s rename the task npm run build under command choose from the dropdown \u201ccustom\u201d and for the \u201ccommand and argument\u201d enter \u201crun build\u201d<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-38244\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/npm-build-step.png\" alt=\"\" width=\"1566\" height=\"1038\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/npm-build-step.png 1566w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/npm-build-step-300x199.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/npm-build-step-1024x679.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/npm-build-step-768x509.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/npm-build-step-1536x1018.png 1536w\" sizes=\"(max-width: 1566px) 100vw, 1566px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Npm install: will install all the react library (dependencies) it\u2019s the equivalent of a dotnet restore to restore the nuget packages.<\/p>\n<p>Npm run build: will create a build folder that we will then use to publish our application.<\/p>\n<p>Click on the publish task and set the \u201cpath to publish\u201d to <strong>build<\/strong>, so that our release pipeline we&#8217;ll have access to the generated build.<\/p>\n<p><img decoding=\"async\" width=\"1592\" height=\"1030\" class=\"wp-image-38197\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-10.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-10.png 1592w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-10-300x194.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-10-1024x663.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-10-768x497.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-10-1536x994.png 1536w\" sizes=\"(max-width: 1592px) 100vw, 1592px\" \/><\/p>\n<p>This is the moment of truth if everything worked as expected this should create a build archive at the end, so let\u2019s save and queue to test it out.<\/p>\n<h5>Step 4:<\/h5>\n<p>Let\u2019s create an App service to deploy our application to, we can do that from the <a href=\"https:\/\/portal.azure.com\">https:\/\/portal.azure.com<\/a> and by choosing \u201cWeb Apps\u201d -&gt; \u201cCreate app service\u201d:<\/p>\n<ol>\n<li>Choose your free subscription<\/li>\n<li>Create a new resource group (e.g: I named mine \u201creact-blog\u201d)<\/li>\n<li>Give a unique name for your application<\/li>\n<li>Choose publish as \u201cCode\u201d<\/li>\n<li>Choose runtime stack \u201cNode 10.14\u201d<\/li>\n<li>Choose \u201cWindows\u201d operating system<\/li>\n<li>Choose the closest region to you (e.g: EastUS2)<\/li>\n<li>Hit review and create to start provisioning<\/li>\n<\/ol>\n<h5><img decoding=\"async\" width=\"1597\" height=\"1686\" class=\"wp-image-38198\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-11.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-11.png 1597w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-11-284x300.png 284w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-11-970x1024.png 970w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-11-768x811.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-11-1455x1536.png 1455w\" sizes=\"(max-width: 1597px) 100vw, 1597px\" \/><\/h5>\n<h5>Step 5:<\/h5>\n<p>Let\u2019s navigate back to Azure DevOps &gt; Pipelines and create a new release. Once, there choose deploying choose \u201cAzure App Service Deployment.\u201d<\/p>\n<p><img decoding=\"async\" width=\"2777\" height=\"1025\" class=\"wp-image-38199\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-12.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-12.png 2777w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-12-300x111.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-12-1024x378.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-12-768x283.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-12-1536x567.png 1536w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-12-2048x756.png 2048w\" sizes=\"(max-width: 2777px) 100vw, 2777px\" \/><\/p>\n<p>You can then give your stage a name. Mine I named it \u201cProduction\u201d and let\u2019s press on \u201cadd an artifact\u201d, and choose your pipeline and the artifact that was generate when you ran the pipeline.<\/p>\n<p><img decoding=\"async\" width=\"1196\" height=\"646\" class=\"wp-image-38200\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-13.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-13.png 1196w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-13-300x162.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-13-1024x553.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-13-768x415.png 768w\" sizes=\"(max-width: 1196px) 100vw, 1196px\" \/><\/p>\n<p>Once set you can press the button \u201cAdd\u201d to add the artifact.<\/p>\n<p><img decoding=\"async\" width=\"1154\" height=\"1348\" class=\"wp-image-38201\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-14.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-14.png 1154w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-14-257x300.png 257w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-14-877x1024.png 877w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-14-768x897.png 768w\" sizes=\"(max-width: 1154px) 100vw, 1154px\" \/><\/p>\n<p>Now, click on the \u201c1 job, 1 task\u201d under your stage and select the \u201cDeploy Azure App Service\u201d task. You will see some red underline saying setting is required that\u2019s because we need to setup our service connection. So, let\u2019s go ahead and press on manage which will open up a new tab for us. <img decoding=\"async\" width=\"2732\" height=\"1160\" class=\"wp-image-38202\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-15.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-15.png 2732w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-15-300x127.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-15-1024x435.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-15-768x326.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-15-1536x652.png 1536w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-15-2048x870.png 2048w\" sizes=\"(max-width: 2732px) 100vw, 2732px\" \/><\/p>\n<p>So here we are going to choose \u201cCreate service connection\u201d -&gt; \u201cAzure Resource Manager\u201d.<\/p>\n<ol>\n<li>Connection name (I always choose to enter my Azure Subscription since it will help me track it later)<\/li>\n<li>Select the appropriate Azure Subscription<\/li>\n<li>Select the Resource Group that has your \u201cApp service\u201d<\/li>\n<\/ol>\n<p>The result should look similar to the below image.<\/p>\n<p><img decoding=\"async\" width=\"1174\" height=\"1130\" class=\"wp-image-38203\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-16.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-16.png 1174w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-16-300x289.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-16-1024x986.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-16-768x739.png 768w\" sizes=\"(max-width: 1174px) 100vw, 1174px\" \/><\/p>\n<p>Let\u2019s go back to our release tab and finish up:<\/p>\n<ul>\n<li>Display name: Azure App Service Deploy: reactblog<\/li>\n<li>Connection type: Azure Resource Manager<\/li>\n<li>Azure subscription: Visual Studio Enterprise<\/li>\n<li>App Service type: Web App on Windows<\/li>\n<li>App Service name: reactblog<\/li>\n<li>Package or folder: $(System.DefaultWorkingDirectory)\/_React Demo-CI\/drop<\/li>\n<\/ul>\n<p><img decoding=\"async\" width=\"1579\" height=\"1575\" class=\"wp-image-38204\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-17.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-17.png 1579w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-17-300x300.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-17-1024x1021.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-17-150x150.png 150w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-17-768x766.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-17-1536x1532.png 1536w\" sizes=\"(max-width: 1579px) 100vw, 1579px\" \/><\/p>\n<p>Go ahead and create a release from the pipeline created. If you visit the Azure WebApp URL, you should now see your website \ud83d\ude0a<\/p>\n<p><img decoding=\"async\" width=\"3233\" height=\"1829\" class=\"wp-image-38205\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-18.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-18.png 3233w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-18-300x170.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-18-1024x579.png 1024w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-18-768x434.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-18-1536x869.png 1536w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/01\/word-image-18-2048x1159.png 2048w\" sizes=\"(max-width: 3233px) 100vw, 3233px\" \/><\/p>\n<p>Et Voila!<\/p>\n<p>If you are using client-side routing, you\u2019ll need to add the following file \u201cweb.config\u201d and add the following to it:<\/p>\n<pre class=\"lang:default decode:true \">&lt;?xml version=\"1.0\"?&gt; \r\n&lt;configuration&gt; \r\n&lt;system.webServer&gt; \r\n&lt;rewrite&gt; \r\n&lt;rules&gt; \r\n&lt;rule name=\"React Routes\" stopProcessing=\"true\"&gt; \r\n&lt;match url=\".*\" \/&gt; \r\n&lt;conditions logicalGrouping=\"MatchAll\"&gt; \r\n&lt;add input=\"{REQUEST_FILENAME}\" matchType=\"IsFile\" negate=\"true\" \/&gt; \r\n&lt;add input=\"{REQUEST_FILENAME}\" matchType=\"IsDirectory\" negate=\"true\" \/&gt; \r\n&lt;add input=\"{REQUEST_URI}\" pattern=\"^\/(api)\" negate=\"true\" \/&gt; \r\n&lt;\/conditions&gt; \r\n&lt;action type=\"Rewrite\" url=\"\/\" \/&gt; \r\n&lt;\/rule&gt; \r\n&lt;\/rules&gt; \r\n&lt;\/rewrite&gt; \r\n&lt;\/system.webServer&gt; \r\n&lt;\/configuration&gt;<\/pre>\n<p>Happy hacking!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post, Sr. Consultant Sidi Merzouk shows how to create a CI\/CD pipeline for your React Apps with Azure DevOps Pipelines.<\/p>\n","protected":false},"author":582,"featured_media":37840,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25,22,129],"tags":[24,2571],"class_list":["post-38186","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-azure","category-devops","category-premier","tag-azure","tag-azure-devops"],"acf":[],"blog_post_summary":"<p>In this post, Sr. Consultant Sidi Merzouk shows how to create a CI\/CD pipeline for your React Apps with Azure DevOps Pipelines.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/38186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=38186"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/38186\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/37840"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=38186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=38186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=38186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}