gaearon / react-hot-loader

Tweak React components in real time. (Deprecated: use Fast Refresh instead.)

Home Page:http://gaearon.github.io/react-hot-loader/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can RHL work with serverside bootstrapped React applications?

UberMouse opened this issue · comments

I've been trying to configure RHL into our React app unsuccessfully. Before I spend any more time on this I figure I should check whether it's actually possible.

If you have a React application that gets bundled and served via a backend application (injecting some data into the page it requires for configuration) is it possible to use RHL with it? I can't just serve it out of the webpack-dev-server because it needs to be loaded from our application. Is it possible to just have the patch delivery process running via webpack-dev-server?

The "HTML" transport and "JS" one are different. Just include webpack middlewares in your express app to make it work

import webpack from "webpack";
import webpackDevMiddleware from "webpack-dev-middleware";
import webpackHotMiddleware from "webpack-hot-middleware";

import devWebpackConfig from "../../webpack/webpack.config.development";

export default app => {
  const compiler = webpack(devWebpackConfig);

  app.use(
    webpackDevMiddleware(compiler, {
      noInfo: false,
      hot: false,
      logLevel: "debug",
      stats: {
        maxModules: 99999,
      },
      publicPath: devWebpackConfig.output.publicPath,
    })
  );

  app.use(
    webpackHotMiddleware(compiler, {
      log: console.log,
      reload: true,
    })
  );

  return app;
};

Will this work if our backend is not a Node backend, but a Python one?

Or is that just middleware for an expressjs app that gets run just for HMR purposes? It writes out HMR aware code somehow? Which then gets served by our Python backend? Which we then replace our webpack watch setup with for development?

So I am not sure. Something should watch for file changes and deliver updates to the frontend. Is that someone is webpack - just let it do it.
For example razzle starts client and server "bundlers" on different ports, and they work in a parallel - so you can use your Python "backend", with webpack-dev-server "frontend".

I got this to work. I'd always been trying to make this work thinking of serving hmr aware assets with my normal process. Just needed to configure webpack dev server correctly (which was a pain) and switch to serving assets via that.

After much tinkering, I eventually got react-hot-loader configured and working. Thanks for the help :)