Running Vue3/Vite with backend-ish node server

Question

While I've seen plenty about SSR for Vue3/Vite, sadly it can't be that easy. Thanks to work's wacky saml setup, the authentication API breaks on the frontend, but can't sit on a separate domain, either. The only way I've ever gotten it to work is by running a node server on one port, and the actual site on another port, and then they read as 'same domain' so I can retrieve the cookies/token after a successful login.

(After 6+ years, I have no choice but to accept it's easier to contort frontend code than to talk the Powers that Be into finding a better way to do this.)

Anyway, I know it can be done. My Vue2/webpack setup does it, although it requires an entire mess o' webpack conf/env/etc files. I wanted to avoid that, and also avoid vue/cli's 72+ errors on first install, so I tried vite -- but now I can't figure out how to get vite and node running together.

The out of the box dev script is:

    "dev": "vite",

and running it got me this in the terminal:

  vite v2.7.10 dev server running at:
  > Local: http://localhost:3000/

The demo page shows up properly -- but no node server. Probably because the server wants to be on port 3000, and expects the vue app on port 8080. So I changed the node server to port 5000, and the config/index.js to set the site's port as 3000. Running that gets me:

  vite v2.7.10 dev server running at:
  > Local: http://localhost:3000/

which is basically no change -- except now the site serves a blank page and a character encoding error. I flipped the order to be node server.js vite and I get:

[HPM] Proxy rewrite rule created: "^/api" ~> ""
zipzipzip on port 5000

which means the node server's running... except localhost:3000/ gets me a Cannot GET / error, but going to localhost:5000/ gets me the app. ...which means it's trompling the node server (again).

Ugh.

Is vite a bad choice if you need something that will actually share the stage? Do I need to go back to vue/cli and battle it out with its endless errors? Or should I stick with the complicated webpack setup from my vue2 install, and just selectively update a few things to shoehorn vue3 into that?

What's the best option for getting a vue3 app to occupy the foreground while a node server -- on the same domain -- handles api calls in the background?

thanks in advance!

Answer 1

Look, I'm learning R right now, so that's this week's excuse for completely missing the obvious:

"prod": "NODE_ENV=production & webpack --config build/webpack.config.prod.js",
"start": "node server.js"

which is to say: in production, everything comes from the /dist folder. and since there's no logic in the dockerfile based on env variables, prod is all that ever gets run, followed by start . so vue gets flattened into /dist, and /dist is served up by the node server.

but when working locally (and with no pressing need to rewrite the node server since the auth process is pretty well settled), the vite server does the compiling and serving on the fly. of course.

short version: do nothing, it's fine.

this is like vue 101 and you'd think after several years in vue, I'd have this down by now.

clearly you'd be wrong.