How to deploy to virtual application of the Azure App Service

Question

basically i'm deploying both frontend and backend to the same azure app service.

• For backend, the code will sits into site/wwwroot directory after deployment.
• For frontend, mapped the configuration path in azure app service i.e., site/webui - this folder structure will come in kudu console.

Backend deployed successfully. In the Frontend release pipeline, configured like below

the deployment is successful and If i access the site like: https://webapp-stick-dev-uks-01.azurewebsites.net/webui/

Unable to understand what will be the root cause of the issue, where I'm missing anything to configure.

• Local react js frontend app is working successfully with the URL: http://localhost:3000/

Could anyone help me here.

Note: I'm using zip deploy method. In the build pipeline the artifacts comes in a zip file.

Answer 1

Hi @Rajoli Hari Krishna
It seems that you are experiencing issues with deploying your frontend React application to a virtual application within an Azure App Service.

Ensure that your frontend files are correctly placed in the site/webui directory after deployment. You can verify this using the Kudu console.

Ensure that a web.config file is present in your frontend deployment. This file is crucial for routing and handling requests correctly in Azure App Services. If it's missing, you may need to create one that specifies how to handle incoming requests.

If your React app uses client-side routing (like React Router), you will need to configure the web.config file to redirect all requests to the index.html file. Here’s an example of what the web.config might look like:

<configuration>
     <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" />
             </conditions>
             <action type="Rewrite" url="/webui/index.html" />
           </rule>
         </rules>
       </rewrite>
     </system.webServer>
   </configuration>

Since you are using the zip deploy method, ensure that the zip file contains all necessary files, including the web.config file and the built frontend assets.

When accessing your site, make sure you are using the correct URL structure. If your app is hosted at https://webapp-stick-dev-uks-01.azurewebsites.net/webui/, ensure that your React app is configured to handle requests at that path.

If you follow these steps and ensure that your configuration is correct, it should help resolve the issues you are facing with your frontend deployment.
https://learn.microsoft.com/en-us/azure/app-service/configure-common?tabs=portal#configure-default-documents
Deploy your web app to Azure Static Web Apps (react)
you may the similar thread for references.
https://learn.microsoft.com/en-us/answers/questions/869603/react-web-application-you-do-not-have-permission-t
Let us know for further assistances needed.

Answer 2

Hello Rajoli Hari Krishna,

Thank you for posting your question in the Microsoft Q&A forum. 

Deploying both frontend and backend to the same Azure App Service can lead to routing and static file serving issues if not configured properly. The primary problem likely stems from incorrect virtual application mapping or React build settings. Since your backend works but the frontend fails at /webui/, Azure may not be correctly serving static files from the site/webui directory. 

First, verify that the virtual application is properly configured in Azure App Service Path Mappings, ensuring /webui points to site/webui. Next, check if your React build has the correct homepage setting in package.json ("homepage": "/webui") and that React Router (if used) includes the basename="/webui" prop. 

Additionally, confirm that the zip deployment structure matches webui/index.html rather than nesting files incorrectly. A web.config file with URL rewrite rules may be necessary to handle client-side routing in production. Finally, inspect the Kudu console to validate file placement and test direct access to index.html. If these steps are followed, the frontend should load correctly under the /webui/ path. 

 

If the above answer helped, please do not forget to "Accept Answer" as this may help other community members to refer the info if facing a similar issue. Your contribution to the Microsoft Q&A community is highly appreciated. 

Answer 3

Hi @Rajoli Hari Krishna,

I am able to access the virtual app without any issues.

• By default, a React app assumes it's hosted at the root path (/). If you're deploying it to a subdirectory like /webui, you need to update the homepage field in your package.json to reflect this path before building the app.
• In package.json file, add this line "homepage" : "/webui",
• Once you build the app using npm run build, a build folder with static assets is created.
• Create a web.config file in build folder and add the below settings to serve the virtual app route.

<configuration>
  <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" />
          </conditions>
          <action type="Rewrite" url="/webui/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

• Deploy only the contents of the build folder into the webui folder.
• Based on our discussion, I noticed that you are deploying the complete folder including build, Src directories and default file is missing in your case.
• Set the physical path of /webui to site\wwwroot\webui in Virtual applications and Directories (myapp in my case).

Output:

Hope this helps

---

If the answer is helpful, please click Accept Answer and kindly upvote it. If you have any further questions, please reply back.