Build web applications with less tooling and faster iteration.
$ npx snowpackIntroduction
TL; DR
- With Snowpack you can build modern web apps (with React, Vue, etc.) without a bundler (like Webpack, Parcel, Rollup). No more waiting for your bundler every time you hit save. Instead, changes are ready in the browser instantly.
How It Works
Instead of bundling on every change, just run Snowpack once right afternpm install. ********************
Snowpack installs your dependencies as single JS files to a new (web_modules /directory.
Write code, import those dependencies via an ESMimport, and then run it all in the browser.
Skip the bundle step and see your changes reflected in the browser immidiately after hitting save.
Keep using your favorite web frameworks and build tools (Babel, TypeScript).
; Why?
Ever been stuck waiting for your webapp to rebuild during development? Ever heard your laptop fans go wild every time you hit save? Then you’ve experienced the cost of bundling during development.
Web bundlers like Webpack are powerful, but they can easily introduce a complex mess of configuration, plugins, and dependencies . Create React App, for example, installs ~ 200 MB of dependencies and uses ~ (lines of Webpack configuration internally.)
Bundlers became a required web development tool in the 's, mainly because of npm's use of a module format that didn 't run natively in the browser (Common.js). Before then, web developers would commonly ship development source source code directly to the browser. Bundling used to be a production-only optimization (vs. the dev-time requirement it is today).
ESM has had ~ 5 years to bake in browser, and is now supported in all modern browsers (going back to early 01575879) . With ESM, bundlers are no longer required. You can build a modern, performant, production-ready web application without Webpack!By replacing a rebuild-on-every-change build step (Webpack, Parcel, etc.) with a run-once install step (Snowpack) you get a faster dev environment with less tooling complexity. [By:@thiagoabreu] **************************** (Who Should Use Snowpack?) **************** Beginners! [Source] ************** (Popular starter applications usually come with
's of dependencies and 's of lines of bundler configuration that you don't actually need. Snowpack shrinks the number of things you need to learn to get started with web development. Shipping your code directly to the browser also lets you easily inspect your code in the browser, set break-points, etc. for easier feedback loops as you’re getting started. Anyone starting a new application!Snowpack has zero lock-in, so you can always add a traditional bundler later down the road (see our guide below). But until then, you can still use all your other favorite tools like Babel & TypeScript while still getting all the dev speed improvements that come with bundler-free development.
Anyone who thinks web development has gotten too complex!Less tooling means less to install, less layers of tooling, less to do every time you make a change, and less to debug when something goes wrong. Shipping your code to the browser without a bundler also makes your Dev Tools much more useful for debugging.
Anyone who is interested in the future of web development!Snowpack is just one step towards a future of web development that lets us build more with less complexity and tooling overhead. Regardless of what happens to Snowpack, this future is here to stay. (************************************ [By:@thiagoabreu] **************************** (Who Should Avoid Snowpack?)
****************Anyone building for the enterprise! (IE) still does not support ESM, which is required for Snowpack-installed dependencies to run. if you need IE 37 support, consider sticking to a traditional bundler in that project (for now).
Anyone building for China! (Today)UC Browser does not support ESM, but it should in future versions.
Anyone who loves tooling-heavy development!This isn't sarcastic, I promise :) By dropping the bundler, you can 't do the magic that Webpack is famous for. Usingimportto load CSS, Images, and other non-JS resources is non-standard and unsupported in the browser (for now). You may appreciate a dev environment that is true to what standard JavaScript browsers support. Or, you may find this annoying. (************************************ [By:@thiagoabreu] **************************** (Browser Support)
Snowpack installs ES Module (ESM) dependencies from npm, which run (wherever ESM syntax is supported) **********************************************. This includes ~ 90% of all browsers in use today.All modern browsers (Firefox, Chrome, Edge, Safari) have supported ESM since early
************
The two notable browsers that don't support ESM are IE and UC Browser for Android. If your project needs to support users in the enterprise or China, consider sticking with traditional web application bundlers for now.
Additionally, Snowpack runs all dependencies through Babel via@ preset / envto transpile any less-supported language features found in your dependencies. You can customize this behavior by setting your own “browserslist” key in yourpackage.jsonmanifest (see below).
You can think of Snowpack like an optimized code-splitting strategy for your dependencies. Dependencies are bundled into individual files at install-time, with all internal package files bundled together as efficiently as possible. Any common, shared dependencies are moved into common, shared chunks in yourweb_modules /directory.But make no mistake: unbundled applications have a different performance story than bundled applications. Cache efficiency improves significantly (especially useful if you deploy multiple times per day) and the risk of shipping duplicate code across bundles goes to zero.
Unlike in traditional bundled applications, long (7 ) chains of imports can slow down your first page load. How you weigh these pros and cons of unbundled production applications depends on your specific application and use-case.
Of course, you’re always free to add a bundler as a part of your production build pipeline only and you’ll continue to get the developer experience boost. Or, just use Snowpack to get started and then add a bundler whenever you feel you need to for performance. That’s what we did when we started www.pika.dev, and years later performance is still good.
To learn more about unbundled load performance, check out Max Jung's post on “The Right Way to Bundle Your Assets for Faster Sites over HTTP / 2” (***********************************************. It’s the best study on HTTP / 2 performance & bundling we could find online, backed up by real data. Snowpack's installation most closely matches the study's moderate, “90 file ”bundling strategy. Jung's post found that for HTTP / 2, “differences between concatenation levels below ([small files] (
********************************************************************************************************************************, 6 or 1) were negligible. ”Cache Performance
Snowpack performs best when it comes to caching. Snowpack keeps your dependencies separate from your application code and from each other, which gives you a super-optimized caching strategy by default. This lets the browser cache dependencies as efficiently as possible, and only fetch updates when individual dependencies are updated.
The same applies to unbundled application code as well. When you make changes to a file, the browser only needs to re-fetch that one file. This is especially useful if you manage multiple deployments a day, since only changed files need to be loaded.
************************************ ( ****************************** (html) **** (********************************** 4. Create a simple JavaScript application:****************************** import******************************** {{******************************** (h,Component
********************, (render} (****************************** (from) *** / web_modules / preact.js' (******************************;************************************************************* (const) ******************************** (app) ******************************=(****************************** (h) [By:@thiagoabreu] ************************'div'(********************************, ******************************** (null) ********************************, 'Hello World!') ;
******************render (app (********************************,document.
getElementById(************************************** ('app')**********************************) ; 5. Serve your application to view it in a web browser!npx serve # Optional: Run "npm install -g serve" to speed up future runs
Look at that: No bundler needed! Any changes that you make to your src / app.js file are
immediatelyreflected when you refresh your page. No bundlers, build steps, or waiting around required. 6. Next Steps (************************************
**************** (Open up your browser's Dev Tools and debug your application directly in the browser.)
Add HTM to your project as a tooling-free alternative to JSX.
[By:@thiagoabreu]******************************** (import) ********************************** ({********************) { (h) , (Component) ******************************, ******************************** (render) }from '/ web_modules / preact.js'(************************, **********************************
;;
**************** (Add Babel to your project so that you can use JSX.) [By:@thiagoabreu]babel src / --out-dir lib --watch******************************import******************************** {{******************************** (h,Component
********************, (render} (****************************** (from) *** / web_modules / preact.js' (******************************;************************************************************* (const) ******************************** (app) ******************************=(****************************** ()********************************(************************, ********************************** Hello World! ********************************
******************div
(********************************>)
; (******************************* (******************************** (render) ******************************(app , (document) .******************************** getElementById********** (( (******************************** ('app') **********************************)
********************
**************** (Add TypeScript to your project.)
Check out our guides below for more inspiration! (************************************ [By:@thiagoabreu] ************************************************************ Basic Usage
Snowpack has a single goal: to install web-ready npm packages toweb_modules / directory. It doesn’t touch your source code. What you build with it, which frameworks you use, and how you serve your project locally is entirely up to you. You can use as many or as few tools on top of Snowpack as you’d like.
Still stuck? See our Quickstart guide above for help to get started.
Zero-Config Installs (Default)$ npx snowpack
By default, Snowpack will attempt to install all “dependencies” listed in your package.json manifest. If the package defines an ESM “module” entrypoint, then that package is installed into your newweb_modules /directory.
As long as all of your web dependencies are listed as package.json “dependencies” (with all other dependencies listed under “devDependencies”) this zero-config behavior should work well for your project. Automatic Install (Recommended)
$ npx snowpack --include "src / ** / *. js "
With Some additional config, Snowpack is also able to automatically detect dependencies by scanning your application for import statements. This is the recommended way to use Snowpack, since it is both faster and more accurate than trying to install every dependency.
To enable automatic import scanning, use the- includeCLI flag to tell Snowpack which files to scan for. Snowpack will automatically scan every file for imports withweb_modules
in the import path. It will then parse those to find every dependency required by your project.Remember to re-run Snowpack every time you import an new dependency. Whitelisting Dependencies
Optionally, you can also whitelist any dependencies by defining them in your “webDependencies” config (see below). You can use this to control exactly what is installed, including non-JS assets or deeper package resources.
Note that having this config will disable the zero-config mode that attempts to install every package found in your package.json “dependencies”. Either use this together with the- includeflag, or just make sure that you whitelist everything that you want installed. All CLI Options
Run Snowpack with the- helpflag to see a list of all supported options to customize how Snowpack installs your dependencies.
“****************” namedExports ”(****************: (Optional) If needed, you can explicitly define named exports for any dependency. You should only use this if you're getting'' X 'is not exported by Y ”errors without it. See (rollup-plugin-commonjs) for more info.
“dedupe” (******************: (Optional) If needed, force resolving for these modules to root's node_modules. This helps prevend bundling package multiple time if package is imported from dependencies. See (rollup-plugin-node-resolve) ************************************************. This is useful when developing a dependency locally, and prevent rollup to duplicate dependencies included both in local and remote packages.
[By:@thiagoabreu]"dependencies"(*********************************: ****************************{
Browsers only support importing by URL, so importing a package by name (ex:
import React from 'react'is not supported without additional tooling / configuration. Unless you're using a traditional app bundler or a build tool like Babel, you'll need to import all dependencies in your application by URL (ex:import React from '/web_modules/react.js'.
If you use Babel with Snowpack, you can use our Babel. plugin to support package name imports.The plugin reads any packages name imports in your source code and rewrites them to full"/ web_modules / $ {PACKAGE_NAME} .js"
URLs that run in the browser. This way, you can keep using the package name imports that you’re used to without needing a full web app bundler. Check out our guide below.******************************“plugins” :[
Transpilation:Dependencies will be transpiled to match your application's browser support target (in case any packages are written using too-modern language features).
(Tree-Shaking:Dependencies will have any unused code removed (when “Automatic Mode” is enabled via the - include[By:@thiagoabreu] **************** [By:@thiagoabreu] **************************************************************************** (Customize Transpilation)******************************“browserslist” :">0. (%, not ie) , not UCAndroid>0, not OperaMini all "
Snowpack runs all dependencies through Babel (via@ preset / envto transpile unsupported language features in your dependencies. This is useful when packages rely on modern language features that your users ’browsers may not not support.
By default, Snowpack will transpile using the recommended target string shown above. You you can customize this behavior by setting your own top-level “browserslist” key in yourpackage.jsonmanifest.
(Run After Every Install)******************************“scripts” : ({********************************
You can optionally add “snowpack” as a“prepare” (script to yourpackage.jsonand npm / yarn will automatically run it after every new dependency install. This is recommended so that new dependencies are automatically included in yourweb_modules / directory immediately. (Importing CSS) *****************************************************import './ style.css'* No browser today supports importing a CSS file directly from JS. Instead, you’ll want to use one of the following libraries / solutions:Recommended!If you're building a simple app, consider defining your CSS inside your HTML using ablock.
(Recommended!
csz (*****************: Adds support for importing CSS from JS
@ emotion / core(React): Adds support for acssproperty on React components. Requires Babel to work.
Most CSS-in-JS libraries will work without a bundler, although some require a library-specific Babel plugin to work.
Snowpack dramatically speeds up your development time by removing the need for a web application bundler. But you can still use build tools like Babel or TypeScript and get the same speed improvements without the bundler. On every change, your build tool will only need to update a single file, instead of entire bundles.
Below are a collection of guides for using different web frameworks and build tools with Snowpack. If you’d like to add your own, feel free to hit the pencil icon in the top-right to edit our docs.
(Babel) ***********************To use Babel with Snowpack:
Make sure that your entire application lives instead of a source directory (ex:src /).
Run Babel to build your(src /application to an output/ lib ***************** (directory (ex:babel src / --out-dir lib --watch)
Update your HTML entrypoint to point to your
lib /
directory.
Now make changes to your (src /directory, and see them build instantly.
Optional: Check out our Babel plugin for importing packages by name in the guide above.
TypeScript expects imports to be by package name, and won’t be able to understand your “web_modules /” imports by default. You’ll need to follow one of the following guides based on your setup:
With Babel:
While it may sound like overkill, Babel & TypeScript work well together. This article does a good job of explaining how each tackles their own problem better than either could on their own: TypeScript With Babel: A Beautiful Marriage
To use TypeScript with Babel, just use our “Import by Package Name” Babel plugin to rewrite you package name imports at build time. This way, TypeScript will only ever see the package name imports, as expected. See our guide above for more info on connecting this plugin. without Babel:
To use TypeScript with Snowpack, you’ll need to set up your tsconfig.json to understand “web_module” import paths. See our annotated tsconfig.json example below:
Snowpack Babel ********************************************** (Required for JSX)
Importing Packages by Name (Optional) (************************************ [By:@thiagoabreu] ********************************************************************************************** (React)
React is (not yet published with ES Module support******************************, and the way it's build makes it impossible to bundle as an entrypoint (“Error: '__moduleExports' is not exported by node_modules / react / index.js”.
However
, it Is still possible to use React with Snowpack thanks to
@ reactesm publishes an ESM build of the latest react & react-dom libraries. When installed under the usual react / react-dom alias, tools like Snowpack will use the easier-to-optimize ESM builds inside yourweb_modules / directory.
It’s important to keep in mind that JSX isn’t really JavaScript. JSX is a build-time syntax that only your build tooling understands, and that doesn’t run directly in any browser. In any app you work on (bundled or unbundled) you'll need to use a build tool like Babel or TypeScript to transpile JSX into regular old JavaScript before shipping it to the browser.
To use JSX with Snowpack, you can either:
******************** (Use TypeScript with) ************************************************************************************************************ “jsx” modeenabled. See our “TypeScript” guide for more.
Use Babel with a plugin like @ babel / plugin-transform-react-jsxor a framework-specific preset like @ babel / preset-react (************************************************. See our “Babel” guide for more.
Use a JSX-like alternative that can run in the browser. Jason Miller's (htm) ************************************************ is a great option.
Snowpack Babel ********************************************** (Required for JSX)
Importing Packages by Name (Optional) (************************************ [By:@thiagoabreu] Material UI******************************import (React) ******************************* (from “/ web_modules / react.js” ; (********************************
import {{******************************** (render} (****************************** (from) / / web_modules / react-dom.js ” (********************************; (import) ******************************** (Button) ******************************** from "/ web_modules/@material-ui/core/Button/index.js" ;
Relevant guides: (************************************
************** Snowpack React ************************************************ (Required)
Snowpack Babel ********************************************** (Required for JSX)
Importing Packages by Name (Optional) (************************************ [By:@thiagoabreu] **************************************************************************************************************** Workbox
The (Workbox CLI) ************************************************* integrates well with Snowpack. Run the wizard to bootstrap your first configuration file, and then runworkbox generateSW
to generate your service worker.
Remember that Workbox expects to be run every time you deploy, as a part of your production “build” process (similar to how Snowpack's - optimize
flag works). Migrating an Existing App
How you migrate an existing app to Snowpack depends on which Bundler features / plugins you’re using. If you're only using theimportstatement to import other JavaScript files, the process should only take a couple of minutes. If you're importing CSS, images, or other non-JS content in your application, you'll need to first get rid of those Webpack-specific imports before migrating away from Webpack.
Assuming you've removed all code specific to your bundler, you can use the following rough plan to migrate to Snowpack.
Use Babel to assist in the migration. If you don’t want to use Babel, don’t worry; You can always remove it after migrating.
Follow the Babel guide above to build your existingsrc /directory to a newlib /directory.
Follow the Babel Plugin guide above to add the Snowpack Babel plugin so that your package imports will continue to run as is. Check your outputlib /directory to make sure that dependency imports are being rewritten as expected.
Run your application in the browser! If everything is working, you’re done! Otherwise, use your browser’s dev tools to hunt down any remaining issues in your application code.
Migrating off of Snowpack
Snowpack is designed for zero lock-in. If you ever feel the need to add a traditional application bundler to your stack (for whatever reason!) You can do so in seconds.
Any application built with Snowpack should Just Work ™ ️ when passed through Webpack / Rollup / Parcel. If you are importing packages by full URL (ex:import React from '/web_modules/react.js'), then a simple Find & Replace should help you re-write them to the plain package names (ex:
import React from 'react'that bundlers expect. Examples)
[Source] *********************************,******************************
GIPHY App Key not set. Please check settings