serving react files with express - reactjs

Question

This is my first time serving react files with express.js. The build has been run and the server is listening, but I cant figure out why the components aren't being injected into the html file. Instead it's rendering just the html template.
Here is a picture of my build folder:
build folder structure
Here is my index.js file from my server folder:
const express = require('express');
const morgan = require('morgan');
const path = require('path');
const app = express();
app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method
:url HTTP/:http-version" :status :res[content-length] :response-time
ms'))
app.use(express.static(path.resolve(__dirname, '..', 'build')))
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname,'..', 'build', 'index.html'))
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`App listening on port ${PORT}!`);
});
this what I see in the console:
served page console
Any help would greatly be appreciated.

Answer 1

This question is still unanswered and Im facing the same question. I have deployed the default react app to a build-directory and am hoping to serve the files through Express.
The browser actually received the deployed file BUT it shows me a blank page.
Any ideas?
Using a simple Express server:
const express = require("express");
const path = require("path");
const app = express();
app.use(express.static(".\build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, ".", "build", "index.html"));
});
app.listen(8081, () => {
console.log(App listening on port 8081!);
});

Answer 2

See the following link
react-express-boilerplate
Add the following code to index.html file
<script src="src="/js/main.33e13313.js""></script>
main.33e13313.js is a file that packages js with webpack.
Your package.json file will be set as follow:
"scripts": {
"clean": "rm -rf build public/bundle.js",
"build": "babel server --out-dir build && webpack",
"start": "NODE_ENV=production supervisor ./build/main.js",
"development": "NODE_ENV=development node ./build/main.js"
},
You will use npm run build to run.
You can use babel to change es6 to es5. this is build tool.
You can use webpack to package JavaScript files. packagig is bundles JavaScript files into one file. this is packaging tool.