DEV Community

loading...
Cover image for a first look at snowpack

a first look at snowpack

ajcwebdev profile image anthony-campolo Updated on ・3 min read

Snowpack is a lightweight frontend build tool designed as an alternative to heavier, more complex bundlers like webpack or Parcel. Snowpack leverages JavaScript's native module system, ESM.

Setup

Create project directory

mkdir ajcwebdev-snowpack
cd ajcwebdev-snowpack
Enter fullscreen mode Exit fullscreen mode

Initialize package.json and install Snowpack

npm init -y
npm i -D snowpack@^3.0.0
Enter fullscreen mode Exit fullscreen mode

Add scripts to package.json

"scripts": {
  "start": "snowpack dev",
  "build": "snowpack build",
  "init": "snowpack init"
},
Enter fullscreen mode Exit fullscreen mode

Initialize snowpack configuration file

See all supported configuration options.

npm run init
Enter fullscreen mode Exit fullscreen mode
/** @type {import("snowpack").SnowpackUserConfig } */

module.exports = {
  mount: { },
  plugins: [ ],
  packageOptions: { },
  devOptions: { },
  buildOptions: { },
};
Enter fullscreen mode Exit fullscreen mode

Create index.html

touch index.html
Enter fullscreen mode Exit fullscreen mode
<!-- index.html -->

<html>
  <body>
    <h1>ajcwebdev</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Start development server

npm run start
Enter fullscreen mode Exit fullscreen mode

This will result in an error:

Build Result Error: There was a problem with a file build result.

Error: HTML fragment found!

HTML fragments (files not starting with "<!doctype html>") are not transformed like full HTML pages. Add the missing doctype, or set buildOptions.htmlFragments=true if HTML fragments are expected.

Okay, let's change that:

<!-- index.html -->

<!doctype html>
<html>
  <body>
    <h1>ajcwebdev</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Another error:

Build Result Error: There was a problem with a file build result.

Error: No <head> tag found in HTML (this is needed to optimize your app).

Makes sense, let's give it one more try.

<!-- index.html -->

<!doctype html>
<html>
  <head>
      <title>ajcwebdev</title>
  </head>

  <body>
    <h1>ajcwebdev</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

01-index-html

🚀

Add Svelte and Svelte plugin for Snowpack

npm i svelte
npm i -D @snowpack/plugin-svelte
Enter fullscreen mode Exit fullscreen mode

Add plugin-svelte to snowpack config

plugins: [
  '@snowpack/plugin-svelte'
],
Enter fullscreen mode Exit fullscreen mode

Create root component

The root component will be called App.svelte.

touch App.svelte
Enter fullscreen mode Exit fullscreen mode

You can tell it's a Svelte thing cause it ends in .svelte. Svelte is a JavaScript framework for building components but it does not extend the JavaScript language with something like JSX. Instead, it is a superset of HTML.

<!-- App.svelte -->

<div class="App">
  <header class="App-header">
    <a
      class="App-link"
      href="https://svelte.dev"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn Svelte
    </a>
  </header>
</div>
Enter fullscreen mode Exit fullscreen mode

Create entry point

The entry point for our app will be index.js.

touch index.js
Enter fullscreen mode Exit fullscreen mode

Import our App.svelte component into index.js.

// index.js

import App from "./App.svelte";

let app = new App({
  target: document.body,
});

export default app;
Enter fullscreen mode Exit fullscreen mode

Import index.js into index.html

<!-- index.html -->

<!doctype html>
<html>
  <head>
    <title>ajcwebdev</title>
  </head>

  <body>
    <h1>ajcwebdev</h1>
    <script
      type="module"
      src="/index.js"
    >
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

02-App-svelte

Deploy to the world

Add netlify.toml with build command

touch netlify.toml
Enter fullscreen mode Exit fullscreen mode
[build]
  command = "npm run build"
  publish = "build"
Enter fullscreen mode Exit fullscreen mode

Create gitignore

touch .gitignore
Enter fullscreen mode Exit fullscreen mode

Add package-lock.json and node_modules to gitignore

package-lock.json
node_modules
.DS_Store
Enter fullscreen mode Exit fullscreen mode

Create empty repository on GitHub with the name of your project.

Initialize git repo

git init
git add .
git commit -m "Initial commit"
Enter fullscreen mode Exit fullscreen mode

Change master branch to main and set remote origin

git branch -M main
git remote add origin https://github.com/ajcwebdev/ajcwebdev-snowpack.git
Enter fullscreen mode Exit fullscreen mode

Push to main

git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Connect Netlify to GitHub repo and set the domain name.

03-netlify-deployment

Discussion (0)

pic
Editor guide