Full Stack (client + server) project for vue.js + express.js

Hello,

I’m wondering if I can have a full stack project in glitch? If I’m not wrong, we aren’t able to download cli through console, or have 2 different package.json (1 for client, 1 for server).

Although an alternative would be to have 1 project for client and another project for server.

I haven’t tried any full stack on glitch and haven’t seen any here either.

I’m just curious and wondering if it’s possible to make one here.

Any insights are appreciated.

Thanks!

Certainly can, go for it! You can start with hello-express and add vue, or look at the many examples in glitch’s homepage search.

Although you may want to clarify what you want to do, an express server serving client files and an API is already full stack.

Edit: I do have experience with “FULL-stack” website with express as backend and e.js as front-end here at glitch. But ejs <<<<<< Vue.js

Original: I’ve seen express examples here at glitch and I know how to setup the express server from scratch here at glitch.
I’ve also seen some non-cli version of Vue.js public skeleton projects that I can remix.

But those will each have their own separate package.json files to download modules. On my local computer, I’d have sub-directories to separately install client and server and have an API-system to handle CRUD in server:
From what I'm used to when doing full-stack, the routes for front-end and back-end are different, with the ports being different (if dealing with localhost/dev-mode). Essentially, in my main repository directory (named "app"), I'd have 2 subfolders: client and server. The "client" subfolder will have it's own route system (Vue-router), package.json and View/components + states. The "server" subfolder has it's own package.json, route system, and database.
I guess there’s a way to combine both client and server on the same directory? I doubt it since I’d normally run both the client and server on different ports at the same time on my local computer. I’ll still look into it.

The best thing for me is to have the same thing I have on my local computer as described above be available for me on glitch. Thanks for reading and commenting.

Do you mean the visitor’s browser is running a Single Page App?

Two ports? Is one port for the dev server, and one port for the production server? It might be possible with a workaround for Glitch’s single external port limitation.

Are you doing Server Side Rendering, and running the client code on the server? If so, you may need to do some experimenting and measure the CPU usage for the anticipated number of visitors.

The setup for a Glitch project usually has a package.json at the top folder (/app/) and modules are in subfolders with their own package.json. I don’t see any problem with a subfolder containing a different app entirely. It might mean some fiddling with npm scripts or devDependencies to trigger the build when you want it to.

Another consideration is whether pnpm is being used in the subfolders to conserve disk space.

I think the usefulness of combining them depends on the reasons you have them separate, for example if you want to be able to deploy them to different servers.

I’d recommend making a tiny version of the app to experiment with in Glitch. Something minimal that still reflects the structure you want, but with less complexity to make resolving problems and taking measurements easier, and also with code that you can share with the community to allow people to help.

I’m looking forward to seeing more :slight_smile:

1 Like

I was making many wrong/irrelevant assumptions earlier, but for now I understood what I need to for now. Thanks for your help.

I don’t plan to make any new projects soon but I set up skeleton webapp for Vue+Express that I or anyone can remix later on to create projects in the future.

Best,
Nameless