How to deploy React to Azure Web App using the Azure App Service plugin in Visual Studio Code?

Question

I tried following the many existing questions and blogs online but I couldn't get it to work, I have created a simple React app with this setup:

It run fine locally. I also ran "npm run build". I also added a web.config to my public folder, which got copied to my build folder with the following content:

<?xml version="1.0"?>    
<configuration>    
    <system.webServer>    
        <httpErrors errorMode="Detailed"></httpErrors>
        <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="/" />    
                </rule>    
            </rules>    
        </rewrite>    
    </system.webServer>    
</configuration>   

My public folder look like this:

I create my Azure Web App online fine and I was able to deploy to it but I browse to it I get this error:

The page cannot be displayed because an internal server error has occurred.

What error do I have?

Answer 1

The page cannot be displayed because an internal server error has occurred.

This error may occur if application is not deployed properly or dependencies are not loaded.

Steps to deploy React to Azure Web App :

• Open your Project in VS Code

• Go to Extensions. Search for Azure App Service and click on Install.

• Go to Azure App Service. Sign in to your Azure Account.

• Click on Deploy to Web App.

• Select your Subscription. Select your App Service.

• Now you should be able to deploy your react app to Azure App Service