DOCSEARCHbyAlgolia
Submit Docs

Snowpack Documentation

website·Indexed 37 days ago

https://www.snowpack.dev/

A build system for the modern web that leverages ESM. Features include Streaming Imports introduced in v3.0, Hot Module Replacement (HMR), and a plugin system to extend build behaviors. Documentation covers integration with React, Preact, Tailwind CSS, and testing frameworks like Jest and @web/test-runner.

Tokens
38.1K
Snippets
270
Records
350
Agent score
72%

What's inside Snowpack

  1. Overview of Snowpack built-in supported file types

    Snowpack provides built-in support for the following file types without requiring additional configuration: JavaScript (.js, .mjs), TypeScript (.ts, .tsx), JSON (.json), JSX (.jsx, .tsx), CSS (.css), CSS Modules (.module.css), Images & Assets (.svg, .jpg, .png, etc.), and WASM (.wasm).

  2. Understand Snowpack's unbundled development architecture

    Snowpack uses an 'unbundled development' approach, meaning it ships individual files to the browser during development instead of rebuilding and rebundling the entire application on every save. Files are built once (using tools like Babel, TypeScript, or Sass) and cached indefinitely. When a file is changed, Snowpack rebuilds only that specific file, resulting in faster updates and deterministic builds that are easier to debug. For production, Snowpack supports traditional bundled builds via plugins for tools like Webpack or Rollup.

  3. Understand HMR and Fast Refresh in Snowpack

    Hot Module Replacement (HMR) allows Snowpack to push file updates to the browser without a full page refresh. Because Snowpack uses unbundled ESM, single file updates typically take 10-25ms.

    Snowpack provides out-of-the-box HMR support for:

    • CSS
    • CSS Modules
    • JSON
    • JavaScript (though JS may require framework-specific integration code).

    Fast Refresh is a framework-specific enhancement to HMR (supported for React, Preact, and Svelte) that preserves component state during updates, preventing resets of internal state (e.g., timer values or open popups) when a file is changed.

  4. Understand Snowpack's core functionality and current status

    Snowpack is a frontend build tool designed as an alternative to complex bundlers like webpack or Parcel. It leverages the browser's native JavaScript module system (ESM) to provide instant startup (under 50ms), a 'build once, cache forever' approach, and HMR with Fast Refresh for React, Preact, and Svelte. It includes built-in support for JSX, TypeScript, React, Preact, and CSS Modules.

    CRITICAL MAINTENANCE NOTE: As of April 20, 2022, Snowpack is no longer actively maintained and is not recommended for new projects. Recommended alternatives include Vite, esbuild, and Parcel.

  5. Understand HMR and Fast Refresh in Snowpack

    Hot Module Replacement (HMR) allows Snowpack to push file updates to the browser without a full page refresh. Because Snowpack uses unbundled ESM, updates typically take 10-25ms.

    Snowpack provides out-of-the-box HMR support for:

    • CSS
    • CSS Modules
    • JSON
    • JavaScript (though JS may require framework-specific integration).

    Fast Refresh is a framework-specific enhancement to HMR (supported for React, Preact, and Svelte) that preserves component state across updates, preventing internal state resets when a component is modified.

  6. Understand Snowpack environment variable security and prefixing

    To prevent accidental leakage of sensitive keys to the browser, Snowpack only supports environment variables that begin with the SNOWPACK_PUBLIC_ prefix. Any variable intended for use in the frontend web application must use this prefix to signal that it will be shared publicly.

  7. Built-in file support in Snowpack

    Snowpack provides out-of-the-box support for several file types without requiring additional configuration. These include JavaScript (.js, .mjs), TypeScript (.ts, .tsx), JSON (.json), JSX (.jsx, .tsx), CSS (.css), CSS Modules (.module.css), WASM (.wasm), and various image/asset formats (.svg, .jpg, .png, etc.).

  9. Use Streaming Package Imports in Snowpack

    Streaming imports allow you to import npm packages directly in your source code without running npm install. Snowpack fetches pre-built ESM versions of these packages from a CDN (like Skypack) behind the scenes and caches them locally for offline use. This is an opt-in feature; by default, Snowpack continues to use the local node_modules directory.
    // Standard import syntax; Snowpack handles the remote ESM fetch behind the scenes
import * as React from 'react';

  10. Understand Snowpack's unbundled development architecture

    Snowpack uses an 'unbundled development' approach, meaning it ships individual files to the browser during development rather than rebuilding and rebundling the entire application on every save. Files are built once (using tools like Babel, TypeScript, or Sass) and cached indefinitely. When a file is modified, Snowpack rebuilds only that specific file, resulting in faster updates and better browser caching. For production, Snowpack still supports traditional bundled builds via plugins for tools like Webpack or Rollup.

  11. Enable HMR using the Snowpack Dev Server

    Hot Module Replacement (HMR) is enabled by default when running snowpack dev. The dev server automatically injects the necessary scripts into the browser, requiring no additional configuration for most users.

  12. Enable Hot Module Replacement (HMR) for React

    Hot Module Replacement (HMR) allows Snowpack to push updates to the browser without a full page refresh. To enable HMR in a React project, add the import.meta.hot.accept() snippet to your entry file (typically src/index.jsx).
    ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

// Hot Module Replacement (HMR)
if (import.meta.hot) {
  import.meta.hot.accept();
}