question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

404 pages will not be displayed with fallback routes in config

See original GitHub issue

Describe the bug Vue.js app are served with 0.3.0 CLI. When put the fallback routes in config, 404 page is not displayed.

Defined fallback routes following in staticwebapp.config.json.

{
    "navigationFallback": {
        "rewrite": "/index.html",
        "exclude": ["/js/*.{js,map}", "/img/*.{png,jpg,gif}", "/css/*"]
    }
}

To Reproduce

  1. Build the Vue application with npm run build
  2. Run swa start ./dist
  3. Enter the URL of a path that does not exist, for example, http://localhost:4280/abc.
  4. You will see a screen with nothing rendered.

Expected behavior 404 page will be displayed.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome
  • Version: 89.0.4389.114

Additional context SWA CLI is 0.3.0 installed via npm

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
k-miyakecommented, Apr 9, 2021

@manekinekko I installed CLI from main branch, and the 404 page is displayed, but fallback does not work.

0reactions
manekinekkocommented, Apr 9, 2021

Fixed by https://github.com/Azure/static-web-apps-cli/pull/179. @k-miyake can you confirm it’s working for you as expected?

Read more comments on GitHub >

github_iconTop Results From Across the Web

MVC 6 Routing, SPA fallback + 404 Error Page - Stack Overflow
I desire the fallback so that my Angular2 app's routes will not result in an HTTP Status Code of 404, Not Found. But...
Read more >
Static Web Apps SPA Handle 404 Page Not Found ~ Ozkary
We do not only if we use a fallback policy. Our routing configuration only has three separate routes, and thus it is simple...
Read more >
Fallback after getServerSideProps() returns notFound #38839
If a route is matched, that route is used and the fallbacks are never called even if { notFound: true } is returned....
Read more >
Handling 404 Routes in React with a Not Found component
In this post you'll learn how to handle 404 routes in React Router and provide a fallback component for displaying an imfamous 404...
Read more >
Vue 3 Catch All / 404 Route Not Found | Vue-Router Mastery #2
In this video we take a look at how to setup a fallback inside of your vue application for when a route is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found