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.

Kunal Virk · Accepted Answer · 2019-05-23 11:06:53Z

4

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

answered May 23, 2019 at 11:06

Kunal Virk

1715 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Xela0000 Over a year ago

Thanks, this helped a lot. With my front end package.json the build command is setup with "react-scripts build" from create-react-app, but my back end package.json does not have a build script setup. Do you know if npm has a default build command(I tried npm build but doesnt work) or how I would be able to create a script similar to create-react-app's build command.

Kunal Virk Over a year ago

Can you please post you package.json of your back-end and front-end please? However, the server are not meant to be build, they simply run. A typical command would be node index.js

Sihyun Kim · Accepted Answer · 2019-05-23 02:39:45Z

0

I think you have to separate CRA(create-react-app) and backend server(express). This means you have to run front and back in different port and then make a npm scripts that boths run front and back.

Like this.

ROOT/package.json

"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""

answered May 23, 2019 at 2:39

Sihyun Kim

293 bronze badges

Collectives™ on Stack Overflow

multiple package.json files in react nodejs project

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related