Investigate for hot reloading

[Nargonath]

Hot reloading is lost because I had to remove webpack dev server from CRA configuration in order to write the project files to the disk hence losing hot reloading feature. Let's see if there is a way to bring it back either through special mode with WDS or with a custom method.

[apanizo]

Hi @Nargonath first of all, thank you for creating this library. Is really useful.

I am not too sure about my availability but if you give me some guidance I would be happy to investigate the hot reloading as well, and maybe submit a PR.

Right now when I apply some changes I need to open and close the chrome extension and is not really cool.

Thanks!!

[Nargonath]

Hey @apanizo! I'm glad this tool is useful to you, thanks for letting me know.

Actually now I think something can be done, perhaps we can even reintroduce webpack-dev-server because in one of the latest release they introduce an option to write on the disk instead of the memory. https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-

IIRC create-react-app has also been updated with the version of WDS required to use that option. You would need to check their changelog to be sure though. If that's the case, we can try keeping WDS in the config, tweek the webpack configuration by adding that option and see how it goes.

Feel free to ping me if you need some more help or explanations. Thanks for your help. 👍

[bjankord]

I've been able to get a live-reload functionality working with my express app that uses create-react-app and wanted to share. It is not the same as HMR, but it does enough to help improve the developer experience for me.

Add chokidar to watch for file changes in the src directory and socket.io to emit "files changed" event

const socket = require('socket.io');
const chokidar = require('chokidar');

// Setup server
const port = '8080';
const server = app.listen(port, () => {
  console.log(`Server is running on: ${port}`);
});

// Setup file watcher to emit event to the client on './src' file changes
// Used to live-reload the web page
let io = socket(server)
io.on('connection', socket => {
  const buildDir = path.join(__dirname, '..', 'src');
  const watcher = chokidar.watch(buildDir);

  const watchHandler = () => {
    socket.emit("files changed");
  };

  watcher.on('ready', () => {
    watcher.on('add', watchHandler);
    watcher.on('change', watchHandler);
  });

  socket.on('disconnect', () => {
    watcher.close();
  });
});

And then in your client code, you need to listen for this "files changed" event and reload the current page. Create a file named reload.js in your public directory and add the following.

// Open a connection.
var socket = io('http://localhost:8080');

// Listen for the event.
socket.on("files changed", function () {
  // delay to allow cra to build files before we reload
  setTimeout(window.location.reload.bind(window.location), 250);
});

Then in your index.html, add the following:

<% if(process.env.NODE_ENV !== 'production'){ %>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <script src="reload.js"></script>
<% } %>

[Nargonath]

Sorry I don't have time to maintain this project anymore so I'll archive it and add a note in the README. Feel free to fork it as you see fit.