React app deployed with Azure Devops gives "You do not have permission to view this directory or page"

Question

I managed to deploy my react app with an Azure CD pipeline on an Azure App Service. And the pipeline throws no error. Unfortunately when I click browse on the Azure app service I get this message "You do not have permission to view this directory or page."

I enabled advanced logging and here is what I get:

Here is my web.config file content:

[![enter image description here][2]][2]

Any hint on how to solve this issue?

Answer 1

You do not have permission to view this directory or page

The root reason is that there is no default page in your Azure website. You can try to directly view the page with following url.

https://{siteanme}.azurewebsites.net/views/login.html

Or you could add the default document in the project root folder and set it as default page in appsetting on the Azure portal and save the setting.

The default document is the web page that is displayed at the root URL for a website.

In addition, you can check the IP restrictions or authentication settings on the Azure web application that may block you.

Check Web App > Authentication /Authorization and Web App > Networking > Access Restrictions

Here is a blog about deploying create-react-app on Microsoft Azure, you can refer to.

1. Created the production build by executing npm run build command. A build folder got generated in the solution with some meta data files
2. Once connected via the FTP client, copy the entire content of the build folder created earlier into the /site/wwwroot/ folder on your Azure Website

Answer 2

I needed to configure the following in Azure Web App Configuration:

1. index.js as a Default Document
2. change the virtual path to \site\wwwroot\build