'How to serve ReactJS static files with expressJS?

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.

Solution 1:^[1]

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);

Solution 2:^[2]

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

Solution 3:^[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Paulo Andrade
Solution 2	Keith
Solution 3	royam

'How to serve ReactJS static files with expressJS?

The Problem

Folder Structure

Current Deployment

File Snippets

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]