sapper-template-hot

A clone of the default Sapper template, with added support for HMR. Only available for Webpack currently. (Rollup support for Sapper is pretty hard, and not very high on my priority list.)

Status

Svelte HMR is still quite experimental. Not ready for production. (But you won't ship your HMR, right?)

From scratch

Using degit

degit is a scaffolding tool that lets you create a directory from a branch in a repository. Use either the rollup or webpack branch in sapper-template:

# for webpack
npx degit "rixo/sapper-template-hot#webpack" my-app

Running the project

However you get the code, you can install dependencies and run the project in development mode with:

cd my-app
npm install # or yarn
npm run dev

Open up localhost:3000 and start clicking around.

Consult sapper.svelte.dev for help getting started.

This project intends to stick to the official template as much as possible, so refer to its docs for all details about the template itself.

Add HMR to your existing Sapper project

# replace svelte-loader with fork with HMR support
npm install -D rixo/svelte-loader

Adapt your webpack.config.js (considering you started from the official template):

const hot = dev && process.env.HOT != 0

module.exports = {
  client: {
    ...
    module: {
      rules: [
        {
          test: /\.(svelte|html)$/,
          use: {
            // change svelte-loader to svelte-loader-hot
            loader: 'svelte-loader-hot',
            options: {
              dev, // NOTE dev mode is required for HMR
              hydratable: true,
              hotReload: hot,
              hotOptions: {
                // optimistic will try to recover from runtime errors during
                // component init (instead of doing a full reload)
                optimistic: true,
              },
            },
          },
        },
      ],
    },
    ...
    plugins: [
      // pending https://github.com/sveltejs/svelte/issues/3632
      hot && new webpack.HotModuleReplacementPlugin(),
      ...
    ].filter(Boolean),
  },
  ...
}

Bugs and feedback

HMR is not officially supported by Svelte (yet?), so please report issues & feedback about HMR in this project's issue tracker.