How to serve ReactJS static files with expressJS?

Question

The Problem

I have successfully served the index.html file of my React app, but the index.js that replaces <root> in the html file with my first React component is not triggering on ReactDOM.render. How do I get the index.js file to start? If my understanding of serving a React app is skewed in certain ways, I would greatly appreciate clarification.

Folder Structure

/ - contains all server-side files, including server.js
/client/ - contains all React files
/client/build/ - contains all production-ready client files
- /client/build/index.html
- /client/build/static/js/main.[hash].js - seems to be a minified version of index.js that contains the ReactDOM.render for my React app

Current Deployment

I am using Facebook's create-react-app for the /client/ directory, including npm run build to automatically populate /client/build/

File Snippets

// server.js
let app = express();
app.use(express.static(path.join(__dirname, '../client/public')));

This successfully loads the default index.html provided by create-react-app

// index.html
<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
</body>

The above section of code may/may not be useful, but it is the default html file that comes with create-react-app. Do I need to replace the noscript tag with a script tag that references the minified index.js file? I have attempted that, and nothing changed, but perhaps it is because of incorrect relative path-making.

github.com/mInzamamMalik/… this code example may help, feel free to comment — Inzamam Malik
– Inzamam Malik, Commented Nov 26, 2022 at 21:33

gpsugy · Accepted Answer · 2017-06-21 19:13:59Z

35

After trying many different things through trial/error, the solution is quite simple:

Serve the /client/build folder in the static call, like so:

app.use(express.static(path.join(__dirname, '../client/build')));

answered Jun 21, 2017 at 19:13

gpsugy

1,2992 gold badges14 silver badges26 bronze badges

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

3 Comments

mirsahib Over a year ago

Care to explain why this work because if you see in your folder structure there might be no client/build folder

Kubo2 Over a year ago

It works after you build the client site with npm run build. You have to serve the client code generated and cross-linked by React instead of the public folder that you work on.

Darshan Over a year ago

And how to get "/" path

Paulo Andrade · Accepted Answer · 2021-03-10 06:21:28Z

5

I had the same problem for a while and I would say that the solution that works is divided into 2 parts to avoid problems with the routers

Server the static from the CRA build (in your case the client/build)

const buildPath = path.normalize(path.join(__dirname, '../client/build'));
app.use(express.static(buildPath));

Set a final route (after all other routers in your server) to use the following:

const rootRouter = express.Router();
/* 
* all your other routes go here
*/
rootRouter.get('(/*)?', async (req, res, next) => {
  res.sendFile(path.join(buildPath, 'index.html'));
});
app.use(rootRouter);

answered Mar 10, 2021 at 6:21

Paulo Andrade

3283 silver badges6 bronze badges

Comments

Keith · Accepted Answer · 2021-10-03 15:09:10Z

0

//on your react app run

npm run build

//The insert the following code on your server

const path = require("path");
app.use(express.static(path.join(__dirname,"nameOfYourReactApp","build")))

//Replace nameOfYourReactApp with the name of your app

answered Oct 3, 2021 at 15:09

Keith

771 bronze badge

Comments

royam · Accepted Answer · 2022-02-12 17:44:00Z

0

my project structure
project
-->client
back end(express)\

after using npn run build i found out that index.html in build was using wrong directory of css files or static instead of using

const path = require('path');
app.use(express.static(path.join(__dirname, '/client/build/')));

i know i also tried ../client...... but not working

so what i did is cut and paste static folder of build in root directory this image can give you the idea, and its working structure

answered Feb 12, 2022 at 17:44

royam

91 bronze badge

Collectives™ on Stack Overflow

How to serve ReactJS static files with expressJS?

The Problem

Folder Structure

Current Deployment

File Snippets

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

The Problem

Folder Structure

Current Deployment

File Snippets

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related