Azure Static Web App with Vue project routing not working

Question

I have a vue project deployed with Azure Static Web App. project contain router (history mode) functionality. It works perfect on local. But after deploying to Azure path links not working correctly. For example when I try to access mysite.com/about from browser navigation it return 404 error.

staticwebapp.config.json file in public folder: (I take this example from microsoft docs)

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

My router js file:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/api',
    name: 'Api',
    component: () => import('../views/Api.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Coreus · Accepted Answer · 2023-04-17 08:07:40Z

17

As others have mentioned, the adding "routes.json" to your public folder is deprecated. However, if you're coming here new and looking at the previous answers you're left for worse on what the new practice is.

The answer you're looking for is a Azure Static Web App Configuration file. The file should be placed at the root of your application called staticwebapp.config.json. Here's an example of what it can contain, from the docs.

For single page applications you're mostly interested in catching routes that the server "doesn't know" and which paths should be excluded.

Here's an example file for a Vue application:

(If you have no routes that should behave in a special way, you don't have to specify them)

{
  "globalHeaders": {
    "content-security-policy": "default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'"
  },
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/img/*.{png,jpg,gif,webp}", "/css/*"]
  },
  "mimeTypes": {
    "custom": "text/html"
  }
}

edited Apr 17, 2023 at 8:07

answered Jun 30, 2021 at 14:36

Coreus

5,6603 gold badges40 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nichoio Over a year ago

+1 I'm using Azure static web app + Vue 3, can confirm that navigationFallback as provided here works as intended. This answer should be the accepted one.

vigneault.charles Over a year ago

Because I couldn't find the solution anywhere: For me it wasn't working because with VueJS I was using a dist folder and the staticwebapp.config.json need to be in the azure output folder which was dist. So I had to put the file in /public and the build copy everything from /public to /dist.

epopisces Over a year ago

I ran into this same issue, where the AzureStaticWebApp@0 couldn't locate my config file. Helpful ways to debug this issue is the optional config_file_location parameter to specify where your config file is (also helpful is the verbose: true parameter). Between those two the build pipeline output will let you know if the issue is a missing/incorrectly located staticwebapp.config.json file like in the scenario @vigneault.charles mentioned.

interesting-name-here Over a year ago

this may no longer be valid? Encountered an issue while validating staticwebapp.config.json: Could not read and deserialize the provided routes file.

interesting-name-here Over a year ago

change the mimeTypes to what was in the Microsoft doc link you put and it worked. "mimeTypes": { ".json": "text/json" }

0dumz · Accepted Answer · 2023-09-11 19:13:09Z

6

Just create a file called staticwebapp.config.json and place it at the root of your application. Then paste the code below. Check this video or the azure docs to help.

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["*.{css, svg, js, ts, png, jpeg, jpg, ico}"]
  }
}

answered Sep 11, 2023 at 19:13

0dumz

711 silver badge2 bronze badges

1 Comment

Reza Taba Over a year ago

Worked for my Angular app as well. Just added webp to exceptions.

tauzN · Accepted Answer · 2021-04-19 18:55:31Z

2

Create a file called routes.json in the public directory, and add this:

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

Documentation

answered Apr 19, 2021 at 18:55

tauzN

7,4872 gold badges22 silver badges23 bronze badges

4 Comments

Nick Wynther Over a year ago

routes.json is depricated now

Daniel Przybylski Over a year ago

If routes.json is deprecated, what is the alternative, @NickWynther?

Daniel Przybylski Over a year ago

This worked in my ReactJS SPA, thx.

Adriel Werlich Over a year ago

this approach does not work here. Instead add web.config file to public folder: stackoverflow.com/questions/71727636/…

Nick Wynther · Accepted Answer · 2021-04-19 19:17:09Z

0

Just added navigationFallback property and now it works !!!

 {
        "routes": [
          {
            "route": "/*",
            "serve": "/index.html",
            "statusCode": 200
          }
          
        ], 
    
         "navigationFallback": {
              "rewrite": "/index.html",
              "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
            }
           
      }

answered Apr 19, 2021 at 19:17

Nick Wynther

1081 silver badge6 bronze badges

1 Comment

user3714932 Over a year ago

In which file do you add this navigationFallback? Do you add it, in the file holding your routes, routes.js?

Collectives™ on Stack Overflow

Azure Static Web App with Vue project routing not working

4 Answers 4

5 Comments

1 Comment

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related