reactjsazureazure-web-app-serviceazure-static-website-hostingazure-static-website-routing

Azure App Service Static Website routes.json doesn't work


I deployed my static website (React app) to Azure App Service with routes.json to enable HTML5 routing fallback. My routes json is located in /public and is available under URL https://mywebsite.azurewebsites.net/routes.json.

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

The redirect doesn't work. What am I doing wrong?


Solution

  • Newest

    I think you confuse the two services Web App and Static Web App. The routes.json file only takes effect in Static Web App.

    enter image description here

    According to the React documentation, execute the following command to create the my-app project.

    1. npx create-react-app my-app
    2. cd my-app
    3. npm run start

    Then create index2.html in the public folder.

    enter image description here

    Create a new repository in github with the name reacttest.

    In the my-app directory, open cmd and execute the following command to upload the code to github.

    1. git init
    2. git add.
    3. git commit -m'init'
    4. git remote add origin https://github.com/yourname/reacttest.git
    5. git push -u origin master

    Follow the official documentation to create Azure Static Web Apps Preview. Check the release status in Action in github. You can see the default page after publishing.

    enter image description here

    enter image description here

    At this time, directly add the routes.json file in the public folder in github. Continue to check the publishing status in Action. After the publishing is completed, you can see that the route is in effect.

    enter image description here

    enter image description here

    When we visit the default homepage, we can see the content of index2.html.

    enter image description here

    If want see index.html, we can add /index.html in url.

    enter image description here