Index.html not rendering component when served through Express

Question

I'm at the end of following this tutorial https://www.freecodecamp.org/news/how-to-deploy-a-react-app-with-an-express-server-on-heroku-32244fe5a250/

and I have changed my App.js to the following:

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <p>lmfao</p>
      </div>
    );
  }
}

export default App;

Now unfortunately, while visiting localhost:5000 after running "npm run dev", although the page title says 'React App' and the page source is index.html, the App component is not rendered and there are not errors anywhere.

Here's a picture of visiting localhost:5000 which gives index.html

Now thw funny thing is, if I visit the React server on localhost:3000, the component does render.

What am I missing? Many Thanks

P.S Here's Server.js

const express = require("express");
const app = express();
const path = require("path");
const port = process.env.PORT || 5000;

// Static file declaration
app.use(express.static(path.join(__dirname, "client/build")));

// production mode
if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "client/build")));
  //  app.get('*', (req, res) => {    res.sendfile(path.join(__dirname = 'client/build/index.html'));  })
}

// build mode
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "/client/public/index.html"));
});

// start server
app.listen(port, (req, res) => {
  console.log(`server listening on port: ${port}`);
});

Here are the dependencies in package.json:

"devDependencies": {
    "eslint": "^6.5.1",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-flowtype": "^4.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-react-hooks": "^2.1.2",
    "eslint-plugin-standard": "^4.0.1"
  },
  "dependencies": {
    "concurrently": "^5.0.0",
    "express": "^4.17.1",
    "react-router-dom": "^5.1.2"
  }

EDIT: As requested, here's a github link for the project: https://github.com/Dobermensch/ExpressTest.git You'll have to do npm install for both the ExpressTest folder and the client sub-folder

The first thing I would do is open the network tab in devtools (developers.google.com/web/tools/chrome-devtools/network) for each page then refresh them. Determine if the same content is getting served. Then you'll have a better idea where to go from there. — Benny Hinrichs
– Benny Hinrichs, Commented Oct 12, 2019 at 7:05
can you please push code on github and share the link? That will help in debugging. — Swaroop Deval
– Swaroop Deval, Commented Oct 12, 2019 at 7:11
It seems I had to add the client folder as a submodule in git. It is done now. Let me know if things work... — Ayudh
– Ayudh, Commented Oct 12, 2019 at 7:52
Since the express server is running from the build folder, have you run npm run build after making this change? — Agney
– Agney, Commented Oct 12, 2019 at 8:02

winwiz1 · Accepted Answer · 2019-10-12 08:25:17Z

1

The most likely reason you are getting a blank page is that script bundle(s) cannot be downloaded.

In the browser right-click on the blank page and choose "View Page Source" or similar menu. You will see the content of the .html file including <script> tag(s) which point to /some-path/some-name.js file(s). Either all or some of those files cannot be downloaded. To confirm this is the case just download the bundle manually by pointing the browser to localhost:5000/some-path/some-name.js. If the script bundle cannot be downloaded, add a route to Express.

answered Oct 12, 2019 at 8:25

winwiz1

3,18214 silver badges25 bronze badges

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

5 Comments

Ayudh Over a year ago

There aren't any script tags in my index.html

winwiz1 Over a year ago

Then it is the problem which explains the blank page. The freecodecamp article you referred to uses Create React App (CRA). CRA creates index.html with <script src="/static/js/<some-name>chunk.js"></script> at the bottom of the file. These <name>.chunk.js files are React script bundles. What you see on the page is the result of the execution of the code from the bundle(s). No bundles = blank page.

Ayudh Over a year ago

if CRA creates index.html with those bundles automatically then why isn't it in my index.html? and how do I get it there?

Ayudh Over a year ago

interesting... you led me to the right answer I had to go to the client folder, then run npm run build and then I just ran the server (npm run dev) in the ExpressTest folder again and it worked on localhost:5000

winwiz1 Over a year ago

I'm glad it helped :)

Collectives™ on Stack Overflow

Index.html not rendering component when served through Express

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related