How to organise file structure of backend and frontend in MERN

Question

I have backend based on express + mongoose. File structure is:

- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json

And regular create-react-app based folder for front-end:

- /src
-- /assets
--- index.css
-- /components
--- Somecomponent.js
-- /containers
--- App.js
-- /reducers
--- somereducers.js
- /node.modules
-- ...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json

I want to use it in proper way together. I wanted to organise it this way:

- /client 
-- /src
...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json

- /server
- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json

At this stage I stuck. I can make it if client folder inside server folder or if server folder inside client. 1. But how to make it run when two folders are siblings? 2. What should be package.json and where node.modules should be (whether both server and client should have it's own package.json and modules?)

Answer 1

The most basic structure would be to have a root folder that contains frontend and backend folders. Since you're talking about the MERN stack, you would have a package.json inside of your NodeJS backend environment and a package.json for your React side of things. Backend server and the frontend client are two totally separate things, so yes, they both have their own node_modules folders. On the backend, you'll probably have installed something like Express for your Node runtime, Mongoose for a more convenient way to talk to your MongoDB, etc, and on your frontend, you'll have your React as your frontend framework, Redux for state management, etc. Additionally, depending on what you have already listed inside of your package.json files, when you run npm install separately it will be installed in those two folders. If you want to install additional packages, just run npm install + "the name of the package" (without the '+' and without the quotes) inside of that particular folder where you need it (backend or/ and frontend).

I hope this was helpful. Check out the pics, especially the 2nd one.

App structure

Folder structure

UPDATE:

In development, I suggest installing two additional things:

1. npm i -D nodemon
2. npm i -D concurrently

Note: The -D flag will install them as devDependencies.

nodemon is going to track every file change and restart the backend server for you. So, it's obvious that it should be installed inside of the "backend" folder. All you have to do is go inside of the package.json file (backend) and add a new script. Something like this:

"scripts": {
"start": "node app.js",  // in production
"dev": "nodemon app.js", // in development
}

---

concurrently allows you to start both your frontend and backend at the same time. I suggest initializing a new Node project inside of the top-level root folder -[folder which contains both, your frontend and backend]. You would do that with the npm init command, and after that, install the concurrently package there.

Now, go open your newly created package.json file inside of your root folder and edit the start section, like this:

   "scripts": {
       "dev": "concurrently \"cd backend && npm run dev\" \"cd frontend && npm start\" "
   }

What this will do is go inside of the backend folder and run the dev command (the same one we just configured), so that will start nodemon. Additionally, it will also go inside of the frontend folder and run the default start command -which is exactly what we want.

If you kept the folder structure, installed all the dependencies (including the additional two I mentioned above), changed the package.json file inside of your root folder, you'll be able to start them both with a simple command:

npm run dev // make sure you're inside of the root folder when doing so :)

Answer 2

Adding to the accepted answer, the folder structure division inside the frontend and backend is more useful if it is based on business logic rather than tech logic.

Dividing the whole stack into self-contained components that preferably don't share files among them is the best way to make your app more testable and easy to update. This in the smallest possible way is what commonly known as microservice architecture.

Bad Design : difficult to update and test:

Good Design : easy to update and test: