best design for fullstack javascript website

Question

i plan to make something with vue and express. but how should i configure vue here ?

having client directory as "sub-project" for vue with its own package.json ?
completely seperate both project ?
or should i initiate both as single project, while making sure webpack only bundling vue ?

Answer 1

With webpack, you could bundle node.js with vue.
Check out this code, clone it for your own project.
https://glitch.com/edit/#!/big-pressure?path=webpack.config.js%3A1%3A0

Answer 2

Мг. Кнап🌠 since you mentioned ReactJS and React Native, you might find this interesting:

Sharing business logic using a single codebase for ReactJS and React Native

https://www.sololearn.com/post/411067/?ref=app

Answer 3

If the issue of the question is whether to seperate the client and server into different repositories then let me just say this:

In my personal experience, it is better to seperate the repos and view each codebase as an indendent (standalone) project.

Imagine the following scenario:
You are making a webapp and create a backend for it.

After a while you want to also develop a mobile app.

If you develop the backend as an independent entity (essentially a black box),you will find it much easier to go on with the development process.

Obviously you should always consider the pros and cons for each approach with your application demands and constraints in mind.

There are as always edge cases that may require you to have a single repo, or it just might be a matter of convinence.

Hope this clear some doubts.

Answer 4

For the express app, u r gonna b creating api right? and when the express app will be running on some port , you can access that, just as you do with some regular api, full CRUD, and accordingly server will recieve the file and place it in the destination you provide..

It's about the image upload application which you are working on right?

So you have to create full crud api on express, and then when a user submits the file from the Vue front, you will serve it to the server api endpoint, and at the server end you will validate it and save it in some directory, and store it's name or url in a database and then return some response containing the URL to the user back on the same post request itself.

you will end up having some api like

as a post request
http://localhost:5000/api/upload

Answer 5

after searching out some more around the net, my conclusion its depend on scale and how the app will be distributed.

if the app is small to medium sized and web only, the solution that Calviղ gave make much more sense. we have more control over the bundle from middleware.
we also dont need to move the bundle from our frontend project to backend project manually, or adding extra buildstep just to move them.
no extra process running that only to serving some static files.

on the bigger scale multiplatform app where our api bandwidth is much more precious, removing extra burden from our backend is the priority, one way is by removing front end serving and put it somewhere else. thats sounds like logical thing to do in that situation.

though its just my personal conclusion, real things may be differ

Answer 6

so do i, i'm still green in fullstack with frontend framework that's why i started the question.

i think why tutorials are seperating frontend and backend as different project, is to give fine line on what and which is "backend" and "frontend". when both are merged into a single project the line start to get blurred, it will be much confusing espescially for new comer who havent touch any of those.
that or the writer not sure how to actually merge them. moreover frontend framework has cli that generate new project, that somehow overwelhming and can get easily stuck in "if i touch this, will it break ?" situation.

i'm just speculating at this point, we need someone else in the discussion

Answer 7

Yeah i could relate that, hope someone could help

Answer 8

I used to use separated repos for front end ReactJS and back end node.js, and I agree that this way has more portability. But it might be a bit inconvenience in hot loading since it need to has 2 npm start to handle to 2 process, anyway there is npm package called concurrent to handle 2 npm start simultaneously.

Currently all my ReactJS projects are on Next.js based, which enable ReactJS with SSR (server sided rendering) upon init loading from server. Next.js can be easily incorporated with Nodejs back end easily with a single npm repo.

Answer 9

Yes seperate the front end from the backend.. I don't know about vue, but in ReactJS and express, I would create seperate project directory for client and the server. With their own package.json

Answer 10

You can configure webpack for your express app as well,
And yes the frontEnd also need to be served from a dev server,

Answer 11

thank you

Answer 12

Calviղ is it a good practice to have single folder structure for both frontEnd and back-end,
Considering a react and express application, I have always seen a different project structure for both the react and express app..
What difference does it provides? Could you share some useful resource please?

Answer 13

Rei i was just wondering, what are the industry standards for full stack js application..
I read this article https://dev.to/kedar9/creating-a-node-app-with-react-webpack-4-babel-7-express-and-sass-3mae
Here the author has created a single project structure, and he has manually configured webpack for react application..
Am still worried..
Most of the tutorials I have practiced by watching, most of the time they seperate the folder structure

Answer 14

Yeah, so it's entirely project based,
And yes having a single back-end for cross platform, that's somewhat relatable.. having ReactJS and React Native linked to a single back-end makes more sense, saving a lot of extra code work.

and thanks for responding!! Burey

Answer 15

but how can i serve the file(s) if both are in different project ?

Answer 16

i mean how to serve bundled frontend project. does it have to served with its own webserver ?
same as vue i think react also have that devserver to serve the compiled/bundled file(s) right ?

if possible i want to let express also serve the compiled/bundled file(s) while only acting as an api. having 1 webserver running should be better than 2 right ?

Answer 17

thats the problem that i've been wondering, its called "dev server" and not "prod server" for a reason.
thats why i want express to handle this files, so its not relying on dev server.

Answer 18

Burey I hope we could get some help

Answer 19

Calviղ so everything is in single project ?

Answer 20

Rei yes, you're right.