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 · Answer 1 · 2023-04-17T08:07:40.157

12

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 '23 at 08:07

answered Jun 30 '21 at 14:36

Coreus

5,360
3
35
50

1

+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. – nichoio Jul 28 '21 at 07:46
2

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. – vigneault.charles Aug 16 '21 at 23:18
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. – epopisces Apr 10 '22 at 16:55
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 Mar 02 '23 at 08:03
change the `mimeTypes` to what was in the Microsoft doc link you put and it worked. `"mimeTypes": { ".json": "text/json" }` – interesting-name-here Mar 02 '23 at 08:07

score 2 · Answer 2 · answered Apr 19 '21 at 18:55

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 '21 at 18:55

tauzN

5,162
2
16
21

2

routes.json is depricated now – Nick Wynther Apr 19 '21 at 19:15
If routes.json is deprecated, what is the alternative, @NickWynther? – Daniel Przybylski Mar 21 '22 at 20:44
1

This worked in my ReactJS SPA, thx. – Daniel Przybylski Mar 21 '22 at 20:45
this approach does not work here. Instead add web.config file to public folder: https://stackoverflow.com/questions/71727636/vue-router-doesnt-work-on-azure-app-service – Adriel Werlich Aug 03 '22 at 18:27

score 0 · Answer 3 · answered Apr 19 '21 at 19:17

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 '21 at 19:17

Nick Wynther

58
1
6

In which file do you add this navigationFallback? Do you add it, in the file holding your routes, routes.js? – user3714932 Feb 07 '23 at 15:21

Azure Static Web App with Vue project routing not working

3 Answers3

Linked