Skip to content
Gulp plugin to reload Express and React.js application without server restart
Branch: master
Clone or download
Pull request Compare This branch is 1 commit ahead of getjs:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
.npmignore
README.md
package.json

README.md

gulp-hot-reload

Gulp plugin to reload Express/React.js application without server restart.

To get started, see complete gulp-hot-reload-boilerplate.

Goals

  • hot reload React.js components using babel-plugin-react-transform and webpack-hot-middleware
  • reload Express application without process restart so React hot reloading keeps working. Any modification (adding/changing routes, changes in the entry server.js file) should be possible.
  • bundle both client and server with webpack
  • during development building takes place in-memory
  • add hot-reload capabilities to existing Express/React.js application with minimal effort

Usage

  • Plug gulp-hot-reload is used by putting it as a final step in gulp build pipe line, instead of gulp.dest call:
gulp.task('build-backend', () => {
  gulp
    .src('./src/server.js')
    .pipe(webpackStream(serverConfig, webpack, buildDone))
    .pipe(reload({
      port: 1337,
      react: true,
      config: path.join(__dirname, 'webpack.config.js')
    }))
})
  • Create webpack configuration for client and server
  • Add .babelrc file to your project

How it Works

  • the pipeline starts with running gulp.src on application entry point
  • webpack-stream is a stream-enabled webpack compiler, that can be easily plugged into gulp pipeline. It runs webpack internally, sending the file from gulp.src as an entry point
  • webpack bundles server application. It is possible with minor tweaks to webpack configuration and offers several benefits
  • application, as a single chunk, comes into gulp-hot-reload. Having whole application in a single entity makes hot reload easy
  • gulp-hot-reload starts development server if it has not started already. If the development server is configured to be started on the same port as the application server, the application server will not start and only one server instance will be running
  • gulp-hot-reload runs eval on bundles application
  • server.js module.exports the application, hence it is returned
  • gulp-hot-reload configures webpack-dev-middleware and webpack-hot-middleware on it
  • development server routes all the requests to the applciation returned from eval
  • gulp watches for files changes and runs the process if any file is modified.

Options

Options are passed to the plugin function in gulpfile:

    .pipe(reload({
      port: 1337,
      react: true,
      config: path.join(__dirname, 'webpack.config.js')
    }))
  • port - default: 1337. Port at which dev server starts. It might be the same port as used by the application - in such a case gulp-hot-reload will start development server and block the application server from starting. If the ports differ, both development and application servers start.
  • react - default: true. If true, hot module replacement of React components is enabled. Set it to false to benefit from server reload without having React application in frontend.
  • config - path to client webpack configuration. For sample see boilerplate webpack.config.js.

Inspirations and references

You can’t perform that action at this time.