Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What should be a project structure for React + Node.js? [closed]

A bit wide question, but with all those trends in JS world, sometimes it is hard to find information about such simple things. What is the better way to organize files and folders in such kind of project? There is server examples in few language from Facebook, but it is for very basic project.

Also find out React Examples on git

But those examples are just for playing around.

The goal is - to have clearly separate Client and Server component. Move them in separate trees of folders. Also have app-like structure (like for example Django does)

So main question is:

what is correct way to separate nodejs/iojs serveer side from React client side component and put it all together in one project?

Project:

  • nodejs server, for site where users can create their own articles separated in hubs/topics.
  • React on front end.SPA.
  • load - about 10 000 users.
  • MongoDb database with access through Mongoose
like image 363
wolendranh Avatar asked Sep 22 '15 19:09

wolendranh


People also ask

Is there a recommended way to structure react projects?

There is no "best project architecture" that will fit with any project and coding style. But you should always structure your project. React doesn't follow any particular project structure, and the positive thing about this is that it allows us to make up a structure to suit our needs.


2 Answers

React-starter-kit is a really good isomorphic project template and also includes all necessary tools such as eslint, babel...etc. It's well-documented so you can know the purpose of each folder easily.

Before you build your project structure, you have to think if it's necessary to apply flux, and different flux or flux-inspired framework may make your structure different. React-starter-kit is a good place to start trying different implementations.

like image 171
ycdesu Avatar answered Sep 18 '22 13:09

ycdesu


Basically you could start with any React.js boilerplates; look through it, and evaluate the problem in a few aspects

  • is it easy to separate the works among groups of people
  • does the app structure makes sense? would you have difficulty understanding the app structure a while later when you rework on the same thing?
  • in the future if you want to add functionalists would it be difficult to do so? (say you want csrf support)

I compared a few react boilerplates and eventually go with isomorphic500. I revised me code a bit to reach something like this:

app structure

what is inside my src folder is the modules you will be developing. To me it's easier to develop stuff if all the modules are decoupled and by doing this you can separate your work among your teammates, if any.

like image 44
Shih-Min Lee Avatar answered Sep 20 '22 13:09

Shih-Min Lee