express server starting react client

Question

Until now, I have been using create-react-app for my projects, with the express-server and the react client each in their own folders.

However, I am now trying to avoid create-react-app in order to really understand how everything work under the hood. I am reading an Hacker Noon article that explains how to setup react with typescript and webpack. In this article they also have the express server at the root of the client which compiles everything itself:

const path = require('path'),
   express = require('express'),
   webpack = require('webpack'),
   webpackConfig = require('./webpack.config.js'),
   app = express(),
   port = process.env.PORT || 3000;
app.listen(port, () => { console.log(`App is listening on port ${port}`) });
app.get('/', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});
let compiler = webpack(webpackConfig);
app.use(require('webpack-dev-middleware')(compiler, {
   noInfo: true, publicPath: webpackConfig.output.publicPath, stats:    { colors: true }
}));
app.use(require('webpack-hot-middleware')(compiler));
app.use(express.static(path.resolve(__dirname, 'dist')));

In the end, the start command looks like it:

"start": "npm run build && node server.js"

So I assume the client and the server start on the same port.

Why would you do such a thing? Are there any pros and cons?

I am writing this, because you stated: in order to really understand how everything work express !== nodejs — lependu
Thanks, but I know that. Express is a nodejs framework. Why do you say that? — Jerlam
Do you? What [nodejs] specific code did you include in your question? — lependu
Is it wrong to refer to express as nodejs knowing that express is a node framework? — Jerlam
Which part of the [nodejs] api related to your question? (it is not an accident I linked the APIs in my first message) Forget about good or bad. It is simply not related. Still you included the label. But I came here after filtering the questions to [nodejs]. — lependu

Zargold Zargold · Accepted Answer · 2018-11-03T19:03:32

It is true that this will allow your development to happen using the same server as express and that web pack will continuously update your dist/index.html file with whatever updates you make to your file. There's not too much of a disadvantage to this as this is just for development. But typically on prod you'll have a single built file that you will serve. And it will not web pack-dev-middleware to be running. Once you've built your server. For the purposes of production it might be possible that you'll only need static assets. But typically, even the server which serves mostly client files will potentially need a server if you want to do server side rendering and/or code splitting.

The command: "npm run build && node server.js" will run the bash/cmd commands into the terminal. npm run build is one step because of the use of && it will if that command succeeds, run the next command which is node server.js which is a strange command I would probably run node ./ (and put the server as index.js) or at least just write node server.

What I'd prefer to see in your package.json:

"start": "yarn build && node ./"

That would be possible if you mv server.js index.js (and npm i -g yarn).

Another thing to note, and look into is what the build step does.

Further Explanation:

The command runs the build step so check what your "build": key runs in your package.json. This command will probably not exit with the code 1 (any exit code of a terminal process that is above 0 will result in an error and will not pass the &&). Presumably, the build process described in the package.json will take all the javascript and CSS files and put them into the index.html file which will then be sent to the client side whenever someone access the '/' path.

After that succeeds, it will start the server that you put the code to above.

res.sendFile(path.resolve(__dirname, 'dist', 'index.html')); will happen if anybody comes across the '/' path.

express server starting react client

1 Answers