[FIXED] How to deploy react application to virtual application in Azure?

Issue

I have a main application which is in ASP.NET MVC and deployed it to Azure App Service. Now I have its child application which is in react and I want to deploy it to virtual application of this main Azure App Service.

This is the virual directory I have created:

I am using AZURE App Service extension in Visual Studio Code to deploy react application on Azure. It lists all App Services available for my subscription but It does not show virtual directory where I want to deploy this app.

This is what I want as end result:

Main application URL: https://test-features.azurewebsites.net/

Expected React App URL: https://test-features.azurewebsites.net/react/

How can I do this?

Solution

After creating Virtual Directory for react app, we need some changes in react app. Like we need to set basename=/react-app in router so react app will run inside /react-app url. Next, we need to build react application and upload that build folder at this virtual directory using FTP. You need to make sure you add web.config in react build folder with rewrite url settings. This is because when you hit react url, the request first goes to server and it tries to find appropriate page to serve the request. At this point, we need to initialize react app, we need to have rewrite settings like below:

`<system.webServer>
  <rewrite>
     <rules>
        <rule name="React Routes" stopProcessing="true">
           <match url=".*" />
           <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
           </conditions>
           <action type="Rewrite" url="/react-app/" />
        </rule>
     </rules>
  </rewrite>
</system.webServer>`

I have done this setup and now I can run react app inside azure virtual directory. Please note, your main application config should not have any error otherwise you will get an error while running react app too. I was facing an issue while developing this.

Answered By - Abhishek Prajapati

Answer Checked By - Clifford M. (PHPFixing Volunteer)