Zeit overriding 404 page

[maximousblk]

• [ ] I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

hosted on github and deployed on zeit Now using the following configs.

Build command: npm run build (which is vuepress build) output directory: dist ( in config.js, dest: "dist")

What is expected?

Show vuepress 404 page instead of zeit's

What is actually happening?

Shows zeit's 404 page instead of vuepress'

Other relevant information

I'm really new to vue and vuepress. There were no build errors but the 404 page doesn't work. If this is related to zeit now and not vuepress, Let me know and close this issue

• Output of npx vuepress info in my VuePress project:

  System:
  OS: Windows 10 10.0.18363
  CPU: (2) x64 Intel(R) Core(TM)2 CPU          4300  @ 1.80GHz
  Binaries:
  Node: 12.16.2 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
  Edge: 44.18362.449.0
  npmPackages:
  @vuepress/core: Not Found
  @vuepress/theme-default: Not Found
  vuepress: ^1.4.1 => 1.4.1
  npmGlobalPackages:
  vuepress: Not Found

[maximousblk]

I fixed it myself.

Fix

1. configure zeit now using now.json to point to /404 if there is no matching routes.

   {
   "version": 2,
   "routes": [
     { "handle": "filesystem" },
     { "src": "/(.*)", "status": 404, "dest": "/404" }
   ]
   }

2. Create 404/README.md and replicate the default 404 page.

   
   ---
   navbar: false
   sidebar: false
   editLink: false
   ---
   # 404

How did we get here?

Take me home.

Thats it. only doing the `now.json` did not work because vuepress doesn't output a /404 page by default (i guess).

# problem with this solution

You cannot customize the `404/README.md` file. This is because vuepress loads the contents of the file and then realizes that the browser got a `404` status code instead of `200` and then immediately replaces the content with the default 404 page. It creates a flash of the contents of `404/README.md` for half a second, which is unpleasant.

> Why not leave the `404/README.md` be blank?

because it will flash a blank page with a sidebar, navbar, edit link, last updated and prev/next links.

[maximousblk]

If there is a better solution for this, please let me know. If not, you can go ahead and close this issue

[chris-dura]

@maximousblk -- This is probably an issue with Zeit Now, as their own example from the docs is doing the same thing: https://vuepress.now-examples.now.sh/does-not-exist In fact, I use zeit's serve package, and the 404 shows up as expected. Vue apps are SPAs, so perhaps it would just take some additional configuration in now.json?

I think in typical SPA scenarios, you'd want to get a 200 and respond with index.html, and VuePress' default theme would display the 404.vue component... https://vuepress.vuejs.org/does-not-exist

However, it certainly seems like you're getting a 404 response code from the server when you go to https://vuepress.now-examples.now.sh/does-not-exist, so perhaps this article will help?

https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb