How to serve SPA in one separate route in Express multipage app?

Question

Let's say I have a blog and it's a normal Express multipage app. Now I would like to have a blog content manager as SPA with Vue.js.

I want to serve this app from a single route e.g. https://myapp/admin/dashboard while the rest is a plain multipage express app (same server).

How to setup something like this in express and vue?

Answer 1

There are three possible strategies:

• either you serve everything under a common path to the SPA with something like

  app.get("/spa/*", spa);
  app.get("/spa", spa);
  

  In this case the client-side app will have to know its prefix because it will have to prefix all its links, ie it will have to send you to /spa when it wants to send you home. Both Vue and React Router support this via an option.

• either you use URL fragments, ie hash links of the form /spa#sublink

  In this case Express sees a single route:

  app.get("/spa", spa);
  

  The application doesn't need to know its prefix, you can relocate it, it always sends you to a relative link like href="#sublink. The downside is that you can't have multiple levels.

• or you use query arguments like /spa?item=sublink

  This is probably the worst way to do it, since it combines the downsides of all other methods

If you are not sure, the second method is probably the way to go - it doesn't require any special setup.