How to organize the file structure of a project with a MERN stack?

Question

MongoDB

I have a backend based on express + mongoose. Its approximate structure is:

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

And the react frontend:

- /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 am familiar with this stack now. I want to understand how to organize the file structure of the project correctly. For myself, I determined that such a structure would be the most logical:

- /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

But that's where I got stuck. I can make a frontend folder inside the backend, I can do the opposite, but:
1. How to run the project if the front and back are at the same nesting level?
2. What should package.json be and where should node.modules be stored (or will both front and back have their own package.json and node.modules?)?

Answer 1

Create a third package.json at the base of the project. Read more here .
Here is an example of the contents of package.json

"scripts": {
        "dev": "concurrently \"cd server && npm start\" \"cd client && npm start \"",
        "build": "cd client && npm run build",
        "install": "(cd server && npm install) && (cd client && npm install)",
        "start:prod": "cd server && npm run start:prod",
        "heroku-postbuild": "npm run build"
    },
    "dependencies": {
        "concurrently": "^3.5.1"
    }
}