CODEWITHSUNDEEP
reactjsexpressstaticservercreate-react-app
gpsugy
gpsugy

Reputation: 1279

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

Current Deployment

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.

Upvotes: 25

Views: 30159

Answers (4)

royam
royam

Reputation: 9

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

Upvotes: 0

Keith
Keith

Reputation: 77

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

Upvotes: 0

Paulo Andrade
Paulo Andrade

Reputation: 318

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

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

Upvotes: 5

gpsugy
gpsugy

Reputation: 1279

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

Upvotes: 34

Related Questions