CODEWITHSUNDEEP
node.jsreactjsexpresswebpack
Jerlam
Jerlam

Reputation: 1101

express server starting react client

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?

Upvotes: 0

Views: 722

Answers (1)

Zargold
Zargold

Reputation: 2092

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.

Upvotes: 2

Related Questions