Create-React-App hosted in Azure getting a 404 with manual refresh or by typing the url manually on any page except the home page

Question

It works locally, but not when I push it to Azure. Here are my routes:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    errorElement: <ErrorPage />,
    children: [
      { index: true, element: <HomePage /> },
      { path: "admin", element: <AdminPage /> },
      { path: 'page-one', element: <PageOne /> },
      { path: 'page-two', element: <PageTwo /> }
    ]
  }
]);

Here's what I have tried based on research so far:

1. Created a web.config and added it to the root (next to the tsconfig.json file)

2. Created a web.config and added it manually to the root in IIS

3. Added a routes.json file to the public folder containing:

   { "routes": [ { "route": "/*", "serve": "/index.html", "statusCode": 200 } ] }

4. Created a _redirects file containing the same wildcard redirect to index.html

None of these have solved the issue. Can anyone think of something I may have missed?

Answer 1

After much more digging, here is what worked for me:

https://dev.to/sumitkharche/how-to-deploy-react-application-on-iis-server-1ied

https://www.iis.net/downloads/microsoft/url-rewrite

Need to add the URL Rewrite to IIS and then add the web.config to the public folder in the app itself for Create React Apps to work properly with IIS