@Jonyk56/

React.js + Babel + Webpack Boilerplate-2

Nodejs

Created by @eankeen | The ultimate trifecta - React, Babel, and Webpack - complete with hot module reloading and a webpack dev server.

fork
loading
Files
  • index.js
  • public
  • src
  • babel.config.js
  • package-lock.json
  • package.json
  • webpack.config.js
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
let path = require("path");

process.env.BABEL_ENV = "development";
process.env.NODE_ENV = "development";

let errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
let evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');

let webpack = require("webpack");
let webpackDevServer = require("webpack-dev-server");

let webpackConfig = require("./webpack.config");
let webpackDevServerOptions = {
  publicPath: "/",
  contentBase: path.join(process.cwd(), "dist"),
  historyApiFallback: true,
  hot: true,
  host: "0.0.0.0",
  allowedHosts: [
    ".repl.it",
    ".repl.co",
    ".repl.run"
  ],
  before: function(app, server) {
    // This lets us fetch source contents from webpack for the error overlay
    app.use(evalSourceMapMiddleware(server));
    // This lets us open files from the runtime error overlay.
    app.use(errorOverlayMiddleware());
  }
};

webpackDevServer.addDevServerEntrypoints(webpackConfig, webpackDevServerOptions);
let webpackCompiler = webpack(webpackConfig);

let app = new webpackDevServer(webpackCompiler, webpackDevServerOptions);

let port = process.env.PORT || 3000;
app.listen(port, () => console.log(`App listening on ${port}`));
node v10.16.0