How do I build react and node together?

Question

I've encountered a slight problem. I know that I can build react-app using npm run build and it will create optimized build folder which I can load to production. But some days ago I started to use node.js with my react application. I am confused now - how should I build such an app now?

My folders structure:

my-app-| 
       |-client-|
       |        |-package.json // root react package file
       |
       |
       |- server.js // node.js (express) root file
       |- package.json // root node package file

EDIT 1

> server@1.0.0 build C:\Users\Horseman.mini\PhpstormProjects\landing
> npm run build && cd ./client && npm run build


> server@1.0.0 build C:\Users\Horseman.mini\PhpstormProjects\landing
> npm run build && cd ./client && npm run build


> server@1.0.0 build C:\Users\Horseman.mini\PhpstormProjects\landing
> npm run build && cd ./client && npm run build


> server@1.0.0 build C:\Users\Horseman.mini\PhpstormProjects\landing
> npm run build && cd ./client && npm run build

'npm' is not recognized as internal or external command, operable program or batch file

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! server@1.0.0 build: `npm run build && cd ./client && npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the server@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Horseman.mini\AppData\Roaming\npm-cache\_logs\2021-02-22T14_49_23_308Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! server@1.0.0 build: `npm run build && cd ./client && npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the server@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Horseman.mini\AppData\Roaming\npm-cache\_logs\2021-02-22T14_49_23_345Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! server@1.0.0 build: `npm run build && cd ./client && npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the server@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

PS npm --version returns 6.14.10

If I go to client folder and build it will build, but without server side

Answer 1

You can now delegate the responsibility of serving your frontend build folder to the server.js ie the server only. The simplest thing could be using express.static to serve the frontend like so:-

app.use(express.static(path.join(__dirname, "./dist"))); where app is the instance of your express server.

where ./dist is the relative path to your root folder so something like my-app/dist where you place your build files. Again it's totally upto you what name you want to use. Essentially all the static files ie js,css and html will be part of this dist folder and will be served to the user when he/she hits the base path. Since both frontend and backend would be available from the same server, there would not be any need to handle CORS scenarios as well unless well it's absolutely required by your implementation.

Answer 2

Using parent folder with package.json and put your respective build commands in that.

my-app-| 
       |-client-|
       |        |-package.json // root react package file
       |
       |
       |- server.js // node.js (express) root file
       |- package.json // root node package file ---> add build command for front and back here. 

Your root package.json can have following command.

{
   "build": "npm run build && cd ./client && npm run build"
}

This will build your backend first and then frontend, if you want both command to run simultaneously then you can use package like concurrently .