Svelte Template Hot

Copy of official Svelte template with added HMR support
Alternatives To Svelte Template Hot
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Vite56,83810,52018 hours ago358September 19, 2022536mitTypeScript
Next generation frontend tooling. It's fast!
Mini Css Extract Plugin4,585177,38620,9202 days ago66June 15, 202257mitJavaScript
Lightweight CSS extraction plugin
Cp Ddd Framework936
a month ago1October 19, 20208apache-2.0Java
A lightweight flexible development framework for complex business architecture with full ecosystem!轻量级业务中台开发框架,中台架构的顶层设计和完整解决方案!
Livereactload875212584 years ago50April 11, 201913mitJavaScript
Live code editing with Browserify and React
Nollup4597308 months ago99September 24, 202226mitJavaScript
Rollup compatible development bundler for fast rebuilds and HMR.
Universal Demo231
3 months ago23mitJavaScript
DEMO: Webpack Flush Chunks + React Universal Component 3.0 🚀
Meteor Hmr146
6 years ago13May 05, 201623otherJavaScript
Hot Module Replacement for Meteor; in your app, with react, with build plugins
Kirby Webpack146
2 years ago8mitJavaScript
:muscle: A Kirby CMS starter-kit with modern frontend tools
Style Ext Html Webpack Plugin127141412 years ago50October 27, 20204mitJavaScript
Enhances html-webpack-plugin functionality by enabling internal ('in-line') styles.
Babel Plugin Functional Hmr104933 years ago24June 13, 20197mitJavaScript
Babel plugin enables HMR for functional components in React Native.
Alternatives To Svelte Template Hot
Select To Compare

Alternative Project Comparisons

Svelte Template Hot

This is a copy of official Svelte template with added HMR support. It lives at rixo/svelte-template-hot.

This template aims to remain as close to the official template as possible. Please refer to official docs for general usage. For HMR specific stuff, see bellow.

⚠️ Experimental ⚠️

This HMR implementation relies on Svelte's private & non documented API. This means that it can stop working with any new version of Svelte.

Progress of Svelte HMR support can be tracked in this issue.

Update 2020-02-24 We're making progress :)

NOTE This template pins the minor version of Svelte in package.json, using the tilde comparator because, in practice, HMR breakages tend to only happen with new minor versions of Svelte (not patch). And I don't want people to download a hot template with broken HMR... But, in your app, you can change this to your liking -- because you might be more interested in last version of Svelte than stable HMR, or be wise and pin the exact versions of all you dependencies.


To create a new project based on this template using degit:

npx degit rixo/svelte-template-hot svelte-app
cd svelte-app
npm install

Run the build script a first time, in order to avoid 404 errors about missing bundle.css in the browser:

npm run build

Quick start

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and... Eyeball!


HMR is supported both with Nollup or with Rollup itself with (very experimental) rollup-plugin-hot.

Nollup implements the shortest possible path from a file change to the module reloaded in the browser and is all in-memory. Said otherwise, it is insanely fast. Also, it has been around for some time so it is quite battle tested already.

The Rollup plugin on the other hand is still little more than a proof of concept by now, but it has better sourcemap support and error reporting (according to my own tastes at least).

Support for both Nollup and Rollup HMR is provided by rollup-plugin-svelte-hot. Please report issues regarding HMR in this plugin's tracker. Or this template's project might make more sense. You be the judge.

Start HMR server with Nollup

npm run dev:nollup

Start Rollup with HMR support

npm run dev:rollup

Start with LiveReload (no HMR)

This is the default dev of official template.

npm run dev:livereload

Start with default method

Nollup HMR is also aliased as dev so you can simply run:

npm run dev

You can change the default dev script to your preferred method in the scripts section of package.json.

2020-06-29 Nollup has been made the default dev script (instead of Rollup) because just released Nollup 0.12.0 fixes support for Svelte sourcemaps and dynamic imports, and Nollup is monstrously fast (especially on the most important metrics, that is rebuild time in big projects)!

The suggested workflow is to use Nollup for dev and enjoy instant feedback loop. If you need a plugin that doesn't work with Nollup, or if you are in a situation that Nollup makes harder to debug (mainly because of it running your code through eval), you can fallback on npm run dev:rollup (HMR with rollup-plugin-hot). If you have a bug that you suspect might be caused by HMR or HMR code transform, confirm by turning back to npm run dev:livereload.


npm run build
Popular Hot Module Replacement Projects
Popular Plugin Projects
Popular Build Tools Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Hot Module Replacement