CODEWITHSUNDEEP
azurevue.jsvue-routerrouterazure-static-web-app
Nick Wynther
Nick Wynther

Reputation: 108

Azure Static Web App with Vue project routing not working

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

Upvotes: 9

Views: 8843

Answers (4)

0dumz
0dumz

Reputation: 61

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

Upvotes: 5

Coreus
Coreus

Reputation: 5610

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

Upvotes: 17

Nick Wynther
Nick Wynther

Reputation: 108

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

Upvotes: 0

tauzN
tauzN

Reputation: 6931

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

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

Documentation

Upvotes: 2

Related Questions