React Installation Using webpack-dev-server

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

Setup

After setting up a simple project to use webpack, babel and react issuing $npm i -g webpack-dev-server will install the development http server for quicker development.

Modifying webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'out'),
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    hot: true
  }
};

The modifications are in

  • output.publicPath which sets up a path to have our bundle be served from (see Webpack configuration files for more info)

  • devServer

    • contentBase the base path to serve static files from (for example index.html)
    • hot sets the webpack-dev-server to hot reload when changes get made to files on disk

And finally we just need a simple index.html to test our app in.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React Sandbox</title>
  </head>
  <body>

    <div id="app" />

    <script src="public/bundle.js"></script>
  </body>
</html>

With this setup running $webpack-dev-server should start a local http server on port 8080 and upon connecting should render a page containing a <h1>Hello world!</h1>.



Got any React Question?