Convert A Svelte Project from Rollup to Snowpack and Enjoy Instant Page Updates and HMR

Years ago, I switched my Web App development from .NET to JavaScript because I got tired of waiting for a full server app to recompile even though I only changed something simple on the client side. As my apps got larger, I waited several minutes when changing something like <h1> to <h3>.

Switching to JavaScript fixed that problem, especially after I discovered the Svelte Framework. Programming in Svelte just makes sense. It reminds me of my old Windows Visual Basic days using bound screen variables and plain old functions, but now I’m creating Web Apps that anyone can access from a phone, tablet, desktop, and any other device with a browser, wow!

Rollup is the default build tool using the recommended Svelte template. This makes sense since Svelte and Rollup are both written by Rich Harris. I’ve used this combination for over a year and it works great. In Dev mode making a source change causes an instant build of only a few seconds. The only thing I didn’t like about this setup was that there was no Hot Module Reloading (HMR). This means that every time you make a source change you get a page refresh and all variables on the page are set back to their defaults. I got around this by using local storage to save state, but I had to remember to disable it when building for production.

Snowpack is the new JavaScript Build Tool, and it is fast! I first created a Svelte starter template so I could test it out. I added Webpack to the build step to get minification. You can try my snowpack-svelte-webpack-template out by downloading it from GitHub.

If you already have existing Svelte projects, then here are the steps I use to convert from Rollup to Snowpack.

1. Copy your existing project to a new folder. You can never have enough backups.
2. All of the following will take place in your new copied folder.
3. Delete the node_modules folder. This will clean out all of the unneeded Rollup packages.
4. Edit the package.json file and replace your scripts section with the following.

"scripts": {
"start": "snowpack dev",
"build": "snowpack build",
"test": "jest"
},

5. Also in the package.json file update the dependencies sections to contain at least the following. You can leave any other packages you need like “timeUtils” below. Remove all of the Rollup packages.

"devDependencies": {
"@snowpack/plugin-webpack": "^2.0.17",
"@snowpack/app-scripts-svelte": "^1.9.1",
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/svelte": "^3.0.0",
"jest": "^26.6.1",
"snowpack": "^2.15.1",
"svelte-check": "^1.1.2"
},
"dependencies": {
"svelte": "^3.29.4",
"sirv-cli": "^0.4.4",
"timeUtils": "2.0.0"
}

6. Add the file “index.js” to your src folder and include the following code.

import App from "./App.svelte";
var app = new App({
target: document.body,
});
export default app;
// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/#hot-module-replacement
if (import.meta.hot) {
import.meta.hot.accept();
import.meta.hot.dispose(() => {
app.$destroy();
});
}

7. Update the “index.html” file in your public folder by replacing

<script defer src='./build/bundle.js'></script>

with

<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="/_dist_/index.js"></script>

8. Run “NPM install” to install all of the packages.

9. Run “NPM start”

Now, enjoy the fastest dev environment on the planet!