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

Question

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?

I have updated my answer. From your url address, I am sure the service you use is not `static web apps`. If you create `static web apps`, your url address should be like ` https://yourstaticwebapp.azurestaticapps.net`. — Jason Pan, Jul 03 '20 at 01:19
@JasonPan thank you for all these screenshots and explanations. I haven't tried it with github but I'm sure it works. Yes absolutely, I'll accept your answer! — Andrei, Jul 03 '20 at 01:45
The _routes.json_ file is now deprecated, but routing, overrides, and auth rules are all defined now in the [staticwebapp.config.json file](https://docs.microsoft.com/azure/static-web-apps/configuration). — Craig Shoemaker, May 26 '21 at 19:26

Jason Pan · Accepted Answer · 2020-07-03T01:50:32.463

1

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.

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

npx create-react-app my-app
cd my-app
npm run start

Then create index2.html in the public folder.

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.

git init
git add.
git commit -m'init'
git remote add origin https://github.com/yourname/reacttest.git
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.

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.

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

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

edited Jul 03 '20 at 01:50

answered Jul 02 '20 at 07:26

Jason Pan

5,844
1
7
12

Would you still see index2.html content if you open `yourwebsite.azurewebsites.net/non-existing-route`. Would it fallback to index2 – Andrei Jul 02 '20 at 11:29
@Andrei Yes. https://zealous-river-0dfc4da10.azurestaticapps.net/non-existing-route – Jason Pan Jul 02 '20 at 13:27
@Andrei You can visit it. – Jason Pan Jul 02 '20 at 13:27
@Andrei Is this the effect you want? – Jason Pan Jul 02 '20 at 13:28
@Andrei I don't understand why you add `/non-existing-route`. Which article about this usage, can you share link for me, thanks. – Jason Pan Jul 02 '20 at 13:47
you need the website to direct you to your index2.html regardless of the route. The reason is, if you Refresh the page on any route other than root, it will fail with 404 if you have no fallback route. It seems like it works for you. Is this because it's index2 and not index.html? :) I swear I've done all the same stuff and it doesn't work for me. – Andrei Jul 02 '20 at 17:12
It seems like it only works from GitHub, I wonder if that's the case – Andrei Jul 02 '20 at 17:16
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/217112/discussion-between-jason-pan-and-andrei). – Jason Pan Jul 03 '20 at 01:04
@Andrei I saw your url is not correct. You can check the screenshots in chatting room. There are two ways to create webapp. Good Luck ! – Jason Pan Jul 03 '20 at 01:49
this also makes perfect sense. Instead of using webapp I should be using static website entry from the getgo. great catch! – Andrei Jul 03 '20 at 13:02

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

1 Answers1

Linked