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

Question

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

Answer 1

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:

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.

Answer 2

How about something like this, I've seen many projects on GitHub follow a similar structure, and it's what I use.

components/   // React Components Directory
models/       // Mongoose Models (if your using a database too)
public/       // Static Files Directory
---- css
---- js
---- svg
...
utils/        //Files containing utility methods
views/        // Server Side Views (jade, or handlebars, ..)
app.js        // Client side main
config.js     // App configuration
package.json 
routes.js     // Route definitions
server.js     // Server side main

Answer 3

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.