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

Marcellemarcellina

Answer 1

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"
  }
}

Encephalography

+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. – Ergonomics

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. – Spontaneity

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 @Spontaneity mentioned. – Immiscible

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

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

Answer 2

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

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

Documentation

Pasho

routes.json is depricated now – Marcellemarcellina

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

This worked in my ReactJS SPA, thx. – Ascanius

this approach does not work here. Instead add web.config file to public folder: #71728136 – Endo

Answer 3

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}"]
  }
}

Brufsky

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

Answer 4

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/*"]
            }
           
      }

Marcellemarcellina

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