How to build and release a react application in a web api application with Azure DevOps? - reactjs

Question

We now have two applications with two differents git respositories. The first one is in ReactJS for the front and the second one is in C# (Web Api 2) for the back. When we want to deploy on Azure, we build the front and we copy the output files to the c# project (web api project). We deploy the web api application from Visual Studio in Azure thanks to the deploy menu.
It's a little bit boring and sometimes we have errors when we change by hand the parameters relative to our differents environments.
We would like to automatize all these tasks with Azure Dev Ops. Have you ever done this kind of stuff ? And how ? Sorry, if this question seems stupid but i can't find a tutorial to build when the front and the back are not in the same git repo. Thanks in advance for your help.

Answer 1

You can follow below steps to build and deploy your application. I can only give a general idea and steps. The main idea is to get your front and backend source code together and build them in the same pipeline. The configurations and parameters for each tasks in the build pipeline need you to specify according to your project.
Below steps is shown in classic view pipeline. Check here for yaml view pipeline
1,Sign in to your Azure DevOps organization and navigate to your project.
2,Go to Pipelines, and then select New Pipeline, and select Use the classic editor to create a pipeline without YAML at the end of the page.
3,Walk through the steps of the wizard by first selecting as the location of your source code.
4, select a source to specify where your code is located. And continue to choose a template, here i choose ASP.NET Core(.NET Framework) template.
5, Add a powershell task to the top of your pipeline(the tasks can be drag and drop to reorder) to run the git commands to clone your front react.js code into same source folder of your backend c# code.
If your code is hosted in azure repo git. You can add below scripts in your powershell task. Make sure Allow scripts to access the OAuth token is checked
cd $(Build.SourcesDirectory)
git clone "https://$env:SYSTEM_ACCESSTOKEN#dev.azure.com/{yourAzureorganizationName}/{yourProjectname}/_git/testrepo"
6, add npm install task and npm custom task to build your react.js, You need to specify the path of Working folder that contains package.json to the folder where you cloned your reactjs code in the above powershell step. you can check steps here for reference.
7, Add a copy file task before task Visual Studio build to copy the output files from building react.js to the your c# project.
8, Configure the necessary path and parameters for Visual Studio build
task and Visual Studio test task to build and test your backend c# code.
9, Add an Azure App Service deploy task at the end to deploy to azure.
You might need to add other additional tasks to build your projects. You can also move your deployment task to release pipeline.check here for more information.
There are lots of examples and learning materials that you can find online about how to create build pipeline and how to deploy your application to azure. I suggest you can follow one example to create your build pipeline for c# project and try to edit your existing pipeline to integrate your react.js project.
Here is microsoft official documents for you to check it out. Hope you find above helpful.

Answer 2

Here, you can find the steps to build and release two web apps (hosting web api) and the relative front developed in ReactJS. Here's our goal :
In Azure devops, we've created a pipeline using the classic editor :
We selected our git repository and this template :
After a step of creating tasks, we obtain :
We'll describe some of these tasks. For example :
/p:SkipInvalidConfigurations=true /p:DeployOnBuild=true /p:WebPublishMethod=FileSystem /p:publishUrl="$(build.artifactstagingdirectory)\appRetailLab" /p:DeployDefaultTarget=WebPublish
Once you've build the two web applications, you've to copy the front files in web applications. There're two tasks for that :
At last, you publish your artefacts in the drop directory within the build.artifactstagingdirectory :
The release :
Our release is not too difficult :
We use 4 tasks :
Replace Token is a very usefull plugin. You can replace a token (defined by a template) by a value defined in the release. We use this plugin to replace our token in the front part of our applications (js files).
To add token in our reactjs application, we use dotenv npm package.
For the web.config parameters don't forget to check XML Variable substitution in your deploy task.
That's it.