Why there is no physical client/build folder when i run nodejs server with react app as frontend

Question

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 command

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

Kartik Narang · Accepted Answer · 2021-01-06 16:23:48Z

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 command everytime you want to update the build folder.

answered Jan 6, 2021 at 16:23

Kartik Narang

2011 silver badge9 bronze badges

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

Comments

mirsahib · Accepted Answer · 2021-01-06 17:08:05Z

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 command,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.

manu langat · Accepted Answer · 2021-01-06 15:13:28Z

0

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

answered Jan 6, 2021 at 15:13

manu langat

11 bronze badge

2 Comments

mirsahib Over a year ago

Yes i know express need a build folder to send the frontend code but i don't see the physical build folder in react app

manu langat Over a year ago

Kindly go through the react documentation, the build folder comes after you run the build command, read the react docs

Collectives™ on Stack Overflow

Why there is no physical client/build folder when i run nodejs server with react app as frontend

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related