I am using esausilva/example-create-react-app-express to create a base for my MERN project

Inside the ~/server.js file it was written

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')));

  // Handle React routing, return all requests to React app
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
}

To my understanding this mean if the express server is running in production mode then it will look into the client/build folder to serve the static file(i.e front-end code) and for any route request the server will send client/build/index.html file.

Inside the package.json i have the following npm run mand

"scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
    "dev:server": "cd client && yarn build && cd .. && yarn start",
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
  },

my confusion is when i run yarn dev it run the server and react app concurrently(everything is perfect) but inside the client folder i don't see any physical build folder,why this is that happening, how express server understand which file to serve if it don't create the build folder first.

I am using esausilva/example-create-react-app-express to create a base for my MERN project

Inside the ~/server.js file it was written

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')));

  // Handle React routing, return all requests to React app
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
}

To my understanding this mean if the express server is running in production mode then it will look into the client/build folder to serve the static file(i.e front-end code) and for any route request the server will send client/build/index.html file.

Inside the package.json i have the following npm run mand

"scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
    "dev:server": "cd client && yarn build && cd .. && yarn start",
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
  },

my confusion is when i run yarn dev it run the server and react app concurrently(everything is perfect) but inside the client folder i don't see any physical build folder,why this is that happening, how express server understand which file to serve if it don't create the build folder first.

• javascript
• node.js
• reactjs
• express
• build

Share Improve this question Follow edited Jan 6, 2021 at 17:42 mirsahib asked Jan 6, 2021 at 15:06 mirsahibmirsahib 44522 gold badges55 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

in client reactJS package.json file, add

"build": "react-scripts build"

to scripts and go inside the client folder and run

npm run build

this will create the Build folder. You have to run this mand everytime you want to update the build folder.

I think i have figured out why there is no physical client/build folder in my local machine.The reason is when i run yarn dev it output the following log

$ concurrently --kill-others-on-fail "yarn server" "yarn client"
$ nodemon server.js
$ cd client && yarn start
[0] [nodemon] 2.0.6
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching path(s): *.*
[0] [nodemon] watching extensions: js,mjs,json
[0] [nodemon] starting `node server.js`
$ react-scripts start
[0] Listening on port 5000
[0] Database Connected
[1] ℹ ｢wds｣: Project is running at http://192.168.0.10/
[1] ℹ ｢wds｣: webpack output is served from 
[1] ℹ ｢wds｣: Content not from webpack is served from /home/mirsahib/Desktop/MERN_WS/Super-MERN-User-Authentication/client/public
[1] ℹ ｢wds｣: 404s will fallback to /
[1] Starting the development server...
[1] 
[1] Browserslist: caniuse-lite is outdated. Please run:
[1] npx browserslist@latest --update-db
[1] Compiled successfully!
[1] 
[1] You can now view create-react-app-express in the browser.
[1] 
[1]   Local:            http://localhost:3000
[1]   On Your Network:  http://192.168.0.10:3000
[1] 
[1] Note that the development build is not optimized.
[1] To create a production build, use yarn build.
[1] 

In the third line the yarn run $ cd client && yarn start which mean it will goes into the client folder and run whatever is written in client/package.json script tag.This is what happen when we create a normal react app using create-react-app mand,we don't see any /build folder inside that app.The build folder is only created when the app is in production mode(example:heroku) not in development mode.That is why there is no physical client/build folder.

You need a build script so that it can generate the build folder, what the mand yarn dev does is that it runs the development server. You can see more info on the react documentation.