CODEWITHSUNDEEP
node.jsreactjsexpresscreate-react-apppackage.json
Xela0000
Xela0000

Reputation: 71

multiple package.json files in react nodejs project

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.

Upvotes: 4

Views: 9238

Answers (2)

Kunal Virk
Kunal Virk

Reputation: 161

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

Upvotes: 3

Sihyun Kim
Sihyun Kim

Reputation: 29

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\""

Upvotes: 0

Related Questions