glenjamin/ultimate-hot-reloading-example

Hot reload all the things!

ultimate-hot-reloading-example's Issues

Is this deprecated?

I have looked around a bit and found this repo to be the ideal starter for a Redux/React project because it provides the perfect stage for efficiency without too many dependencies. But I see this hasn't been developed for some time, and the dependencies are outdated. Is that because there are better approaches? Will a project like React Hot Loader 3.0 surpass this? Should we invest in this project?

Example with Webpack 2.X

I'm trying (unsuccessfully) to get webpack-hot-middleware working with the latest version of Webpack.

I don't know enough about webpack internals to know if this is even possible.

Any ideas? Having a example with webpack 2 would be super helpful!

Cannot "hot-reload" for the server side/express related stuffs

I've tried to put in the exact same code for the "hot-reload" for the express related stuffs, the console logs the message after the files that are being watched changed. But after I refresh the page, the change is not applied.

Express routes not reloading

Not sure if I'm missing something but the express routes aren't reloading. On Mac OS 10.11, and have tried running the example in Chrome, Firefox and on node.js versions 0.12.9, 4.3.1 & 5.

Integrate VSCode debugging for both client and server side

Would be great to see client and server side integrate debugging directly from VSCode. Something like this.

Figure out exactly what file has been changed instead of clear all cache

Can we figure out exactly which files has been changed from webpack and clear cache for those files only instead of clear all cache? That would be a lot of nicer I think.

npm run start fails on Debian 9

Hi, I cloned your project, install libs, run start and I have the error below.
OS : Debian 9
NPM : 5.3.0
NODE : v6.11.1

Any idea ?

$ npm run start

[email protected] start /home/epi/prog/react/ultimate-hot-reloading-example
babel-node server.js

events.js:182
throw er; // Unhandled 'error' event
^

Error: watch server ENOSPC
at exports._errnoException (util.js:1024:11)
at FSWatcher.start (fs.js:1382:19)
at Object.fs.watch (fs.js:1408:11)
at createFsWatchInstance (/home/epi/prog/react/ultimate-hot-reloading-example/node_modules/chokidar/lib/nodefs-handler.js:37:15)
at setFsWatchListener (/home/epi/prog/react/ultimate-hot-reloading-example/node_modules/chokidar/lib/nodefs-handler.js:80:15)
at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/epi/prog/react/ultimate-hot-reloading-example/node_modules/chokidar/lib/nodefs-handler.js:228:14)
at FSWatcher.NodeFsHandler._handleDir (/home/epi/prog/react/ultimate-hot-reloading-example/node_modules/chokidar/lib/nodefs-handler.js:407:19)
at FSWatcher. (/home/epi/prog/react/ultimate-hot-reloading-example/node_modules/chokidar/lib/nodefs-handler.js:455:19)
at FSWatcher. (/home/epi/prog/react/ultimate-hot-reloading-example/node_modules/chokidar/lib/nodefs-handler.js:460:16)
at FSReqWrap.oncomplete (fs.js:153:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: babel-node server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/epi/.npm/_logs/2017-07-29T09_38_19_500Z-debug.log

Webpack 4?

Mongoose bug: schema already defined

Hello,

i'm very interesting by your approach for hot reload and I try to implement it in one of my application.

I use mongoDB & mongoose, but when i do a modification in my code and the require.cache is cleared, I have the following mongoose error: OverwriteModelError: Cannot overwrite User model once compiled..
This error is occurring when a schema is already defined and i defining the schema again.

My questions are:

• Do you have solution for this kind of bug?
• If not, what is the best way to reload models?

Thx.

++

Has any example about many components and pages?

Has any example about many components and pages?

Working on Koa2?

I've tried to take the snippet of code https://github.com/glenjamin/ultimate-hot-reloading-example/blob/master/server.js#L37#L46 and to move it into my Koa2 server. I can see a large list of entries in require.cache, and when a file is saved, the require.cache is cleaned accordingly (just the ones from the /server). Yet, when I reload the page, the require.cache is not updated, and more strangely the application continues to work just normally. I've even tried to delete all keys from require.cache and this does nothing. Koa2 is in some way relatively similar to Express, at least I would expect when it comes to require.cache, and I'm wondering just why this does not seem to work. I'm actually even more surprised that my app continues to work even so the require.cache is cleaned. I know this plugin is not about Koa2, but maybe someone has some ideas?

This isn't hot reloading. This is going to the browser and refreshing

Clearing the requires.cache doesn't actually reload your server. You have to go into your browser and refresh the page. That's not hot-reloading at all

How we can use this trick with sass files?

server reload can not work on windows

server side reloading works great on ubuntu , but not work in windows.

when after npm install , npm start , and visit localhost:3000 , the browser report babel-runtime error,

when you npm install babel-runtime , the error disappear

Image Requires

Nice work on this example, really interesting!

Experimenting locally and I can't find a solution for universal image requires using this setup.

I've worked with WebpackIsomorphicLoader to solve this problem but the css-modules-require-hook seems so elegant, is there an approach similar to this for getting generated image filenames from a require?

PostCSS Not Being Used?

I see postcss dependencies, but I don't see anywhere it's being used or even referenced in the README. Am I missing something?

Mysterious babel error

After fresh clone and npm install just now, npm start gives this:

$ npm start

[email protected] start /Users/me/Documents/projects/react/ultimate-hot-reloading-example
node server.js

Listening at http://127.0.0.1:3000
webpack built 11927603e83a7e38296a in 1824ms
Clearing /client/ module cache from server
Error: Cannot find module 'babel-runtime/core-js/json/stringify'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/Users/me/Documents/projects/react/ultimate-hot-reloading-example/client/server-render.js:3:18)
at Module._compile (module.js:434:26)
at loader (/Users/me/Documents/projects/react/ultimate-hot-reloading-example/node_modules/babel-register/lib/node.js:130:5)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)

I can't find any reference to that in the code.

Any ideas?

Issue when converting to ES6 Module syntax

First off, thanks for putting together one of the most straightforward examples of 'hot-reloading' via webpack - it's very clean and works just as expected.

My issue is that when I tried to port everything over to ES6 Module syntax, the 'hot-reloading' part worked when making changes however, if I refreshed the browser then the server and client would be out of sync and have to be patched by React.

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) 2fy1te7zrmk.0">DemoChanged</h1><p data-reacti
(server) 2fy1te7zrmk.0">Demo</h1><p data-reactid

It seems my problem is that your approach involves deleting CommonJS modules from the require.cache and then requiring them dynamically on each request, and there is currently no equivalent mechanism for ES6 modules.

After some research, it seems as though the best / only option would be to create a separate webpack config for the server code (using target: 'node') and use the System.import features of Webpack 2 to dynamically reload the modules at runtime. In which case, where would the webpackDevMiddleware and webpackHotMiddleware go?

Is an ES6 port something you have considered or attempted and if so, do you have any suggestions?

Sass live reload?

Hi there,

I'm trying to add Sass live reload to the current framework with some available tutorials, and it seems they are not working in this case. I wonder if you can offer a bit more information on modifying the current framework.

Thanks,
Carl

Exampel with react-router 1.0.0-rc1

Thanks for the plugin! I'm trying to get this to work with react-router. If I add a new route in /src/shared/routes I get a 404 error. IE the server.js does not know about the new route. I need to stop node and restart.

Here is my setup so far.

_webpack.fonfig.js_

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var node_modules_dir = path.resolve(__dirname, 'node_modules');

var config = {

  addVendor: function (name, path) {
    this.resolve.alias[name] = path;
    this.module.noParse.push(new RegExp(path));
  },
  devtool: 'eval',
  entry: [
    'webpack-hot-middleware/client',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  resolve: {
    alias: {},

  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    //new ExtractTextPlugin("[name].css", {
    //  allChunks: true
    //})
  ],

  module: {
    noParse: [],
    loaders: [{
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')

    }
    ]
  }
};

config.addVendor('react', node_modules_dir + '/react/dist/react.min.js');

module.exports = config;

_server.js_

'use strict';

import path from 'path';
import express from 'express';
//var dbStartUp = require('./lib/db');
const app = express();
require('./lib/environment')(app);
import React      from 'react';
import { RoutingContext, match } from 'react-router'
import routes     from './src/shared/routes';
import createLocation from 'history/lib/createLocation';


app.get('*', (req, res) => {


    if (req.url === '/favicon.ico') {
      console.log('favicon requested');
      res.writeHead(200, {'Content-Type': 'image/x-icon'} );
      res.end();
      return;
    }

   let location = createLocation(req.url)
    match({ routes, location }, (error, redirectLocation, renderProps) => {
      if (redirectLocation){
        console.log( "redirect" );
        res.redirect(301, redirectLocation.pathname + redirectLocation.search)
      }else if (error){
        console.log( "error" , error );
        res.send(500, error.message)
      }else if (renderProps == null){
        console.log( "No renderProps");
        res.send(404, 'Not found')
      }else{
        let componentHTML = React.renderToString(<RoutingContext {...renderProps}/>);
        const HTML = `
            <!DOCTYPE html>
            <html>
              <head>
                <meta charset="utf-8">
                <title>Boilerplate setup</title>
              </head>
              <body>
                <div id="react-view">${componentHTML}</div>
                <script type="application/javascript" src="/static/bundle.js"></script>
              </body>
          </html>    
        `
        res.end(HTML);
      }
    });

});


export default app;

And my ./lib/environment

'use strict';
var express = require('express');

let nodeEnv = process.env.NODE_ENV;

module.exports = (app) => {
  if( ! (nodeEnv && nodeEnv === 'production' ) ){

    var webpack = require('webpack');
    var config = require('../../webpack.config');
    var compiler = webpack(config);
    compiler.plugin('done', function() {
      console.log("Clearing /client/ module cache from server");
      Object.keys(require.cache).forEach(function(id) {
        if (/\/src\//.test(id)) delete require.cache[id];
      });
    });

    app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: config.output.publicPath
    }));

    app.use(require('webpack-hot-middleware')(compiler));

  }else{
    app.use("/static", express.static("dist/"));
  }
};

Flash of style on start up

When opening the app the app is initially unstyled, because the styles will be injected asynchronous. It would be nice to get rid of that.

Add some more docs to the README

state goal of project, and how it's different from a boilerplate.

Resolve Alias

Hey,

I have added new alias in your example and tried, but it didn't worked. following is the code,

--- webpack.config.js
I have added two test folders(test, tes1) inside the components folder, and moved App.js into test1 folder

  resolve: {
    extensions: ['', '.js'],
    alias: {
      request: 'browser-request',
      components: path.join(__dirname, 'client/components/test/test1') 
    }
  }

--- server-render.js
In this file instead of giving relative path('./components/test/test1/App'), I gave 'components/App' and expected components will be replaced by alias.

var App = require('components/App');

Could you let me know if I am doing anything wrong? following is the error

Cannot find module 'components/App'
   at Function.Module._resolveFilename (module.js:336:15)
   at Function.Module._load (module.js:278:25)
   at Module.require (module.js:365:17)
   at require (module.js:384:17)
   at Object.<anonymous> (/home/kishore/code/ultimate-hot-reloading-example/client/server-render.js:5:11)
   at Module._compile (module.js:460:26)
   at normalLoader (/home/kishore/code/ultimate-hot-reloading-example/node_modules/babel-core/lib/api/register/node.js:199:5)
   at Object.require.extensions.(anonymous function) [as .js] (/home/kishore/code/ultimate-hot-reloading-example/node_modules/babel-core/lib/api/register/node.js:216:7)
   at Module.load (module.js:355:32)
   at Function.Module._load (module.js:310:12)

Consider isomorphic-webpack

I am looking for some feedback on https://github.com/gajus/isomorphic-webpack. I cannot announce the project prior to getting through the Rule of Three. :-)

isomorphic-webpack addresses all of the goals set in this project.

I'd be happy to work with @glenjamin (you can always PM me on IRC for instant reply) to assist with any questions and concerns.

However, I understand if your preference remains to have this a vanilla "hot-reloading" example. :-)