multiple package.json files in react nodejs project

Question

I am new to react and am trying to create a project that makes use of react, node, and express. Having a lot of issues setting up react correctly by myself, I decided to use create-react-app.

I found a bunch of tutorials online and a lot of them seem to suggest separating the front end and the back end into different directories resulting in two package.jsons.

so the project structure would look something like this:

Root
|
------client
|       |
|       -------package.json with front end dependencies
|
package.json with the back end dependencies

The client diretory is the one created with "npm init react-app" and also contains the package.json that has the react-scripts. Currently if I use command "npm run build" in the client directory it creates a build without the backend files inside the root folder, and if I use "npm run build" in the root folder it doesn't work because I do not have create-react-app scripts in that package.json.

My main question is how would I make a build of my project if I have two package.jsons and if it is normal/best practice to split up front end and back end like this?

Any advice would be much appreciated.

Answer 1

This folder structure is one of the most used structure. You are actually separating front-end and back-end, that would result in scalable architecture.

To build your project from one single command, you need to install a dependency concurrently. It will enable multiple commands at once. Then make changes to your root package.json.

Below is an example package.json :

"scripts" : {
     "build-client": "npm run build --prefix <FRONTEND_FOLDER NAME>",
     "build": "<YOUR SERVER BUILD COMMAND>",
     "build-project" : "concurrently \"npm run build\" \"npm run build-client\""
}

Hope it helps!!!