My React app give error whenever i hard refresh on other route and gives 404 not found error.

Question

I am using Azure app service to host my vite react app , but whenever i am at change route to "/" and after i refresh the page the app gives me 404 not found error , i already check the log stream it says

2023-11-24T18:01:45.212168334Z: [INFO]  18:01:45 0|static-page-server-8080  | [2023-11-24T18:01:45.210Z] Error while serving /home/site/wwwroot/chatbot with content-type text/plain : ENOENT: no such file or directory, open '/home/site/wwwroot/about'

Answer 1

Hi @Tejas Lade

I understand the issues you are having, have you considered using Azure Static Web Apps (https://learn.microsoft.com/en-us/azure/static-web-apps/overview). See the quick start for a tutorial that will guide you through setting up a react app.

Quick Start: Building your first static site with Azure Static Web Apps (https://learn.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=react)

Best regards,

Answer 2

Hi @Tejas Lade , I want to expand on Claudia's answer- The issue you’re experiencing is a common one with single-page applications (SPAs) like your React app, where the routing is handled on the client-side. When you refresh the page, the server tries to find a resource matching the route, which doesn’t exist, hence the 404 error Here’s how you can fix this issue:

1. You need to add a fallback route in your server configuration that will serve your index.html file for all routes This allows the React router to handle the routing on the client-side. If you’re using Azure Static Web Apps, you can add this fallback route in the staticwebapp.config.json file.
2. If you’re using Azure App Service, you can add a web.config file at the root of your project that rewrites all routes to index.html

Here’s an example of what the web.config file could 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="index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>
   

This configuration will rewrite all requests to index.html, allowing the React router to handle the routing. Best, Grace