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

Tejas Lade 0 Reputation points
2023-11-24T18:12:04.4166667+00:00

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'
Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
7,328 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Claudia Dos Santos Haz (CONCENTRIX CORPORATION) 935 Reputation points Microsoft Vendor
    2023-11-27T10:24:11.88+00:00

    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,

    0 comments No comments

  2. Grmacjon-MSFT 17,366 Reputation points
    2024-01-18T23:18:22.27+00:00

    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

    0 comments No comments