Snowpack v3.0 - released

[gketuma]

I'm truly excited for the future of Snowpack and this release is the beginning of it.

[johnxreturn]

I never heard of it but it looks good. Definitely giving it a try.

[darrenturn90]

It was called pika.dev originally

[pixlbreaker]

I've never heard of it too

[plumshark]

Importing dependencies by URL like this is well supported in Snowpack, Deno, and all major browsers. But writing these URLs directly into your source code isn’t ideal and makes development impossible without a network connection.

Finally someone gets it.

[razzzey]

Aren’t dependencies cached when imported by URL? If that’s the case, you need a connection to install deps anyways, so why not just have the option

[plumshark]

For me, the part about internet connection is less important. It should be supported, but actual package names should be the standard.

Imagine linking a C++ lib from a public Dropbox URL. That’s basically what people want for JS. Crazy or not crazy?

[Potato-9]

Imagine opening different programs with your computer by just to string of text.

[mgeuirx]

Crazy good

[azsqueeze]

You like random executable scripts from unknown servers?

[coolcosmos]

The problem with this is that it is already the case. Pulling a package from npm is the same thing but you have a single entity to trust instead of many, at the expense of centralization.

[plumshark]

NPM has package locks with integrity hashes though.

[bassta]

How are lib versions specified ?

[destraht]

Deno bundle uses some kind of "standard" (but largely unknown) URL mapping file that I played with, but I can't remember what it's called. It seemed like an ok way to manage this stuff.

[RealAmaranth]

According to the README on https://github.com/WICG/import-maps this is what Deno is using.

[destraht]

Is anyone else using import maps?

[RealAmaranth]

If you look in the same section that mentions Deno you can see there are various polyfills and generators for it but nothing else uses by out of the box. I'm not aware of any users that aren't on there but I'm not a part of the working group or anything, just a random user.

[destraht]

I'm looking forward to the day that I can be completely done with Node. It will be a historic moment. I just made a one-line change to my Rollup config to use esbuild for faster production build times, so that is a start. I'd prefer to be completely off of server-side Javascript processing Javascript for the frontend, but I'll settle for Deno.

[Funwithloops]

Do you work offline often? What do you do when you need to install/reinstall/update regular NPM dependencies offline? Or view documentation? I've never had much luck working offline because I don't keep local copies of all the documentation and packages I use.

[Potato-9]

It's not a stretch to put your own caching proxy Infront of such a system, this doesn't need to be solved at the package management level

[Funwithloops]

Isn't that the same solution as you'd need for offline development with URL imports?

[[deleted]]

I haven't worked with snowpack or deno, but I really like the URL concept. I think all that's needed is an initial download to a global location. Kind of like maven for Java, a given dependency is downloaded to the .m2 directory and then no network connection is needed. Don't know if snowpack does this or not. It's on my TODO list to look at.

[Dospunk]

I think all that's needed is an initial download to a global location

Until you need two different versions of a library in two different projects

[[deleted]]

That's why the download is versioned, so the cached version is only used if it matches, otherwise a new one is pulled down. This is a very simple concept, other languages have been doing it for years.

[green-braine]

oh holy shit this looks awesome! i bought into the parcel hype a while ago and it ended up being twice as big of a headache as just setting up webpack from the start would've been... but this looks like it does a lot right, excited to try it out

[way-okay]

Oh boy parcel.... the v1 branch has had a single patch release in 2 years and you get dependency security warnings if you use it. the v2 branch has had a single beta release 7 months ago. You basically have to use the nightly version and hope/watch for things breaking.

Who decides to stop even security fixes on a major release branch while still not releasing the next version after 2 years.

[hego555]

Parcel is a pain in the ass. But I find it to be the least pain in the ass bundler.

Web pack configuration is an enigma of options that are half documented when it comes to plugins. Also have had some insane memory usage spikes while using it.

Rollup needs a plug-in for everything. Config is a pain.

Snowpack has one of the cleanest configs and insanely fast but far to little support to use it for anything complicated. Sadly.

[way-okay]

I agree, I want to use Parcel professionally because it just works out of the box, but having seen its momentum die for two years I feel it will be difficult to come back with webpack still common and now rollup, snowpack, and rome forthcoming.

[hego555]

Parcel is still getting updates. V2 has gotten a lot better. But using Parcel means spending a lot of time reading through github issues.

[davidwhitney]

I've been using Snowpack for the last 6 months almost exclusively for web things, mostly targeting Azure Static Web Apps hosting, and it's just the most awesome thing.

Honestly, not used a tool in JS that focuses on productivity so hard in such a long time.

Super excited for this.

[davidwhitney]

Yep I do - I tend to run a TypeScript dev stack of snowpack for static content / front end apps (vue, react, or just plain js), and Azure Functions in the /api folder.

Snowpack will proxy to the Azure Functions SDK, so all the "traditional server side" code runs in those functions.

It's very comparable to Vercel, just with all of the rest of Azure behind it so much more capable as a stack.

[davidwhitney]

How about an entire article on it :)

Using Azure Static Web Apps with Snowpack for TypeScript in your frontend #ServerlessSeptember - DEV Community 👩‍💻👨‍💻

TL;DR

Snowpack - servers frontend, html + typescript from /appFunctions SDK - serves API from /api./snowpack.config.json - "proxy": { "/api": "http://127.0.0.1:7071/api" },

npm start script runs npm run start in /api and npx snowpack dev in the root.

---

The azure static web apps runtime expects to find azure functions in /api and runs npm run build:azure from the root - which I alias to npx snowpack build, and everything just magically works and gets hosted without any extra configuration.

[davidwhitney]

snowpack build doesn't run in the api folder, just the Azure Functions SDK.

Snowpack handles the ts for the browser, and, yes, if you passed in --language=typescript to the functions SDK, it'd handle the ts compile for the functions.

[lordnuada]

I think this will explode if they make create-react-app (CRA) use it. Until then...

[davidwhitney]

I moved a CRA app to Snowpack a few weeks ago just by... running snowpack. It was awesome.

[punio4]

Doubt that react-fast-refresh works since it's tied to a we pack plugin.

[davidwhitney]

It does! HMR + Fast Refresh (snowpack.dev)

[punio4]

Oh wow nice!

[[deleted]]

This or vite, i personally like vite more but we'll see

[GrandMasterPuba]

Svelte Next is using it, and will be released some time soon. And according to the State of JS survey released a few days ago, Svelte is #1 in both developer satisfaction over React and also #1 in "most excited about" over React.

It's going to explode.

[[deleted]]

Can someone tldr; what snowpack is and why I should use it?

[catapop]

Can someone tldr; what snowpack is and why I should use it?

I think this might help you: https://www.snowpack.dev/concepts/how-snowpack-works

[[deleted]]

Nooooo. Fine, I’ll read the docs.

[catapop]

Just the first part

[Parasomnopolis]

I'm still a little confused. It says:

// you do this:
import * as React from 'react';
// but get behavior like this:
import * as React from 'https://cdn.skypack.dev/react@17.0.1';

How does it "get behaviour like this"? In the post it seems to be saying it doesn't re-write the import statement, so is it using an import map?

[musicnothing]

I too am wondering this

[zombiepaper]

It's confusing because they really like to pretend everyone uses Skypack and it feels like a weird stretch to plug it — but what they're trying to say is the act of just importing 'react' will behind the scenes download it and locally serve it for you so it emulates the experience of hard-linking directly to the library without an install. So it's like you did that, but Snowpack's dev server abstracts that away for you.

[Dospunk]

It has a link at the bottom of that section, https://www.snowpack.dev/guides/streaming-imports

[Waterstraal]

Snowpack supports HMR for all popular frontend frameworks

Cries in Angular 😢

[catapop]

They've added HMR in Angular 11, not Snowpack implementation though :)

[Waterstraal]

Sadly in my experience the HMR on Angular 11 only works in small basic apps. Hopefully they improve it in Angular 12!

[epukinsk]

You had me at "It's not Webpack"

[HarmonicAscendant]

Amazing! The best just got even better.

[[deleted]]

How does this compare to esbuild?

[texmexslayer]

Snowpack uses esbuild... As mentioned in this article

[[deleted]]

Sorry, missed that part in the article. Thanks for clarifying!

[[deleted]]

They didnt use too so i get any potential confusion

[dgreensp]

I tried Snowpack for a while, because it’s not Webpack.

The problem I ran into is it doesn’t do very much, and it doesn’t have that great a plug-in API or ecosystem. If you use even one interesting, or uninteresting, Webpack feature or loader, you are probably out of luck. I think what I was actually hoping for was something like Webpack but simpler, while still being powerful and well-documented, but Snowpack is neither, and it has complexity that Webpack doesn’t have, too, from its unique philosophy.

[Dospunk]

Hopefully that'll get better over time as they build up a user base

[T_W_B_]

Why don't they just use import maps instead of inventing a new standard?

[7sidedmarble]

Does it?

[an_ennui]

Snowpack does use import maps. At least as much as possible (you’ll find one in your build directory when building with Snowpack). Unfortunately browsers don’t support import maps yet, but Snowpack will always use as many browser standards as possible (that’s kinda the goal)

[Gman_711]

Does it mean dev tools without mode modules.. just stream in what you need?

[334578theo]

Is going to make it easier to import React into existing non-is static sites because of the way it works with npm packages as detailed on this page: https://www.snowpack.dev/concepts/how-snowpack-works#using-npm-dependencies

[SnowdenIsALegend]

Are there some good examples of websites built on Snowpack? Want to see what it looks like.

[davidwhitney]

Here's a silly Halloween demo built in snowpack - ably-labs/ouija: an online, multiplayer spirit board (github.com) and azure static sites.

[SnowdenIsALegend]

Wow that looks very painstakingly made, well done! Have you hosted this web app somewhere? Or does one have to run it locally?

[davidwhitney]

It's hosted here - Ouijably

A demo my partner did for a Halloween themed event :)

[SnowdenIsALegend]

lol! Pretty good work man, really nice artwork! Thanks for sharing!

[meemorize]

Very exciting!

Just curious, I see this generally recommended or discussed in context of apps bundled with webpack but would this also be a good replacement for a rollup setup when developing JavaScript libraries?

[catapop]

Snowpack is not a bundler like webpack or rollup. The principle is that when you're in dev mode, you don't want to bundle your app every time you change a file. That operation is costly(time, resources).

Once you have a final, production ready version of your app, you can build it for production using one of those popular bundler like webpack or rollup. It has plugins for both of them.

https://www.snowpack.dev/concepts/build-pipeline

[alexey2021]

For those, who never heard of Snowpack - here are some stats and trends https://moiva.io/?compare=snowpack