Remove server from react-boilerplate

Question

How should one do to remove server folder from react-boilerplate? Question is also asked here by another person https://github.com/react-boilerplate/react-boilerplate/issues/2110.

react-boilerplate is heavily integrated with hot reload middleware in express. You're most likely better off setting things up fresh with a new create-react-app eject. — Dinesh Pandiyan, Oct 30 '18 at 15:32

score 1 · Answer 1 · answered Oct 15 '19 at 10:30

Removing just server folder will not work because the webpack dev configuration is utilising it for hot reload as well as your npm start command starts express server from this folder.

If you want to remove server folder completely and still want the application to be working as it was like hot reloading etc, follow the below steps. We will require webpack dev server in that case:

Remove ./server folder manually.
Install webpack-dev-server and react-hot-loader as dev dependencies.

In your ./internals/webpack/webpack.dev.babel.js, do the following modifications:

Change entry to this:

entry: [
      require.resolve('react-app-polyfill/ie11'),
      'react-hot-loader/patch',
      `webpack-dev-server/client?http://localhost:3000/`,
      'webpack/hot/only-dev-server',
      path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
],

Add publicPath in output:

output: {
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
    publicPath: `http://localhost:3000/`,
},

Add webpack dev server config property in the same file:

devServer: {
   port: 3000,
   publicPath: `http://localhost:3000/`,
   compress: true,
   noInfo: false,
   stats: 'errors-only',
   inline: true,
   lazy: false,
   hot: true,
   open: true,
   overlay: true,
   headers: { 'Access-Control-Allow-Origin': '*' },
   contentBase: path.join(__dirname, '..', '..', 'app', 'build'),
   watchOptions: {
       aggregateTimeout: 300,
       ignored: /node_modules/,
       poll: 100,
   },
   historyApiFallback: {
       verbose: true,
       disableDotRule: false,
   },
},

In ./internals/webpack/webpack.base.babel.js, add the line:
```
devServer: options.devServer,
```

And finally, modify your start script in package.json as below:

"start": "cross-env NODE_ENV=development node --trace-warnings ./node_modules/webpack-dev-server/bin/webpack-dev-server --color --config internals/webpack/webpack.dev.babel.js",

And you are good to go!!

score 0 · Accepted Answer · answered Oct 30 '18 at 14:45

0

Just remove with rm -rf ./server if you feel harassed :)

answered Oct 30 '18 at 14:45

Mosè Raguzzini

15,399
1
31
43

Raguzzini Haha ok.. But how to adjust webpack to not use the server folder? – user1665355 Oct 30 '18 at 15:24
The only refs in webpack are about logger in development webpack config, remove them and that's it :) – Mosè Raguzzini Oct 30 '18 at 17:00
Raguzzina where do you mean? Cant find anything about logger in `https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/webpack/webpack.dev.babel.js` – user1665355 Oct 31 '18 at 09:10
I was looking for it in a older version of boilerplate. In the new one webpack does not make use at all of /server scripts – Mosè Raguzzini Oct 31 '18 at 09:14
Ah ok! Do you use react-boilerplate as well? – user1665355 Oct 31 '18 at 10:01
I used it for a couple of projects but saga is an overkill for the most of the projects I work on so I've ended up using my own boilerplate – Mosè Raguzzini Oct 31 '18 at 10:17
Ok :) I found saga to be excellent and clean solution. Anyway, I accept your answer because it is funny :) – user1665355 Oct 31 '18 at 13:18
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/182862/discussion-between-mose-raguzzini-and-user1665355). – Mosè Raguzzini Oct 31 '18 at 13:32

Remove server from react-boilerplate

2 Answers2