I made a template for vite + node (express) for full stack dev

The Gallery
,
1

Hi :wave: I’ve been trying different approaches for running vite and express in a single project with minimum reloading time, and I think finally I found a solution :sweat: so here it is.

Node/express runs on a port which is not the default 3000 (specified in .env), and vite uses proxy to “redirect” the path /api to node/express. The frontend uses choo+emotion/css (in my case - but you can use vue or svelte or whatever you want!) and when you press the button, it makes a GET call to fetch data from the server (of course you can make POST too).

I haven’t found an elegant way to npm install both front- and back-end because they have separate package.json in the subfolders. Also I added artificial delay to vite because it seems if express is not up when vite is loaded, vite seems to fail - but I’m not sure if this is a fatal error or warning. Another problem is that once in a while nodemon seems to fail restarting and it cannot open the port (port already used). This case you need to edit the root package.json to force restart.

Aaand there is no build script yet, but since it can’t run as generate_static, I wouldn’t bother. And it’s not production ready, but we’re on glitch, so who cares :shushing_face:

3 Likes
2

would it suffice to transfer those dependencies into the root package.json? they’ll become available in those subdirectories due to how node searches parent directories’ for node_modules

2 Likes
3

thanks, I suppose that would work! I didn’t want to mix up front- and back-end dependencies, but since it seems like a sensible option for now, I will try it later!

4

thanks a lot, it works like a charm

2 Likes
5

I accidentally renamed the project above instead of remixing, so I reverted it :sweat_smile:

Also I added a new example: vite + choo (front-end) + node (back-end) + websocket: Glitch :･ﾟ✧