https://github.com/rixo/sapper-template-hot
WIP Copy of official Sapper template with added HMR support
https://github.com/rixo/sapper-template-hot
Last synced: about 1 year ago
JSON representation
WIP Copy of official Sapper template with added HMR support
- Host: GitHub
- URL: https://github.com/rixo/sapper-template-hot
- Owner: rixo
- Created: 2019-10-21T00:31:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-10T19:52:36.000Z (about 6 years ago)
- Last Synced: 2025-04-03T15:44:23.017Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 543 KB
- Stars: 16
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sapper-template-hot
A clone of the default [Sapper](https://github.com/sveltejs/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`](https://github.com/Rich-Harris/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`:
```bash
# 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:
```bash
cd my-app
npm install # or yarn
npm run dev
```
Open up [localhost:3000](http://localhost:3000) and start clicking around.
Consult [sapper.svelte.dev](https://sapper.svelte.dev) for help getting started.
This project intends to stick to the [official template](https://github.com/sveltejs/sapper-template) as much as possible, so refer to its docs for all details about the template itself.
## Add HMR to your existing Sapper project
~~~bash
# 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):
~~~js
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](https://github.com/rixo/sapper-template-hot/issues).