Deploying React application on azure

Question

I am trying to deploy my react application on Azure. This is a create-react-app which I have ejected. I have followed this article to deploy it. I have added my build file and web.config to my site/wwwroot in azure. When I to my webapp url I get the page saying "You do not have permission to view this directory or page."

I am using client side routing (react-router) in my application.

These are my files

web.config

<?xml version="1.0"?>
<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" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

And this is how my project looks on azure

Answer 1

You need to go to application settings and add your path there in the virtual applications like this: