Development Tips

Hot Module Replacement

Hot module replacement (HMR) can make development more convenient by automatically updating page content without refreshing the page. With Webpack, there are only a few steps required to get this working with Curi.

The first step is to get your Webpack configuration setup for hot module replacement. Webpack's hot module replacement guide is a good resource to learn how to do this.

The next step is identifying what file(s) you want to watch. A watched file will be notified when it, any of its dependencies, or any dependencies depndencies (and so on down the line) are updated. The best way to do this with a Curi application is to watch the file where your routes are defined.

The router has a refresh() method that is used for providing new routes to the router. When it is called, it will also generate and emit a new response.

module.hot.accept() is used for watching a file and calling a callback when that files or any files in its dependency chain are updated. In the callback, we can re-import the routes and pass them to the router's refresh() method. This will in turn emit a new response, which will automatically be rendered.

With that, your application should be setup to support hot module replacement.

// index.js
import { create_router } from "@curi/router";
import { browser } from "@hickory/browser";
import routes from "./routes";

const router = create_router(browser, routes);

if (module.hot) {
  module.hot.accept("./routes.js", function() {
    const nextRoutes = require("./routes").default;
    router.refresh(nextRoutes);
  });
}