Deployment issue w/Vue-cli3 and static site

Question

New to vue and am using vue-cli3 to scaffold a simple authentication app for auth0, auth0-plugin.surge.sh. My router.js module is:

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Callback from "./views/Callback.vue";

Vue.use(Router);

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/callback",
      name: "callback",
      component: Callback
    }
  ]
});

// very basic "setup" of a global guard
router.beforeEach((to, from, next) => {
  // check if "to"-route is "callback" and allow access
  if (to.name == "callback") {
    next();
  } else if (router.app.$auth.isAuthenticated()) {
    // if authenticated allow access
    next();
  } else {
    // trigger auth0 login if not been authenticated before.
    // router.app refers to the root Vue instance the router was injected into
    router.app.$auth.login();
  }
});

export default router;

I am expecting when auth0 does callback to auth-plugin.surge.sh/callback I should get redirected to Callback component via vue-router. Instead I am getting a 404 error for the /callback page. The webpack dev server works as expected. The same error is occurring when using the serve npm package. Reading the Vue-cli deployment documentation it makes it seem very straightforward that deploying to surge.sh doesn't require any special measures. I have googled and scoured this site but find nothing that solves my problem. Any help much appreciated.

Answer 1

ok so it turns out that you need a 200.html file as stated on surge's website Adding a 200.html page for the server as a catch all route when using vue-router. If anybody has experience with the serve npm package using the -s option I'd be interested in knowing how you got it working. Hope this helps someone else when deploying a SPA. A good write-up on Server configuration when deploying SPA's I found here