Skip to content

themichaelkarpen/svelte-snowpack

Repository files navigation

Svelte and Snowpack

✨ Bootstrapped with Create Snowpack App (CSA). https://www.snowpack.dev/tutorials/svelte


Setup steps

install snowpack

npx create-snowpack-app svelte-snowpack --template @snowpack/app-template-minimal

install svelte

npm install svelte --save
npm install @snowpack/plugin-svelte --save-dev

update snowpack.config.mjs with '@snowpack/plugin-svelte', in plugins


install sass and bulma

npm install node-sass --save-dev
npm install bulma --save-dev

install @snowpack/plugin-webpack for production builds

npm install --save-dev @snowpack/plugin-webpack

update snowpack.config.mjs with '@snowpack/plugin-webpack', in plugins



production builds

Using plugin-webpack works except for the favicon. I don't like how all the svelte components get built into the directory though. It's bloated with many files, and not sure they are all needed.

Tried using native Snowpack with optimize object - and not the plugin-webpack. Visually this looks better, however it does not work on a production server with a non-root file path.

Conclusion:

  • I much prefer Vite right now. My only blocker is I need svelte-router-spa to work in dev mode in Vite. It works with a production build but not in dev.
  • Vite also seems faster and easier to use. Documentation is better as well.

other items to experiment with

see how svelte-router-spa works in dev and production

environment variables
https://www.snowpack.dev/reference/configuration#env https://www.snowpack.dev/reference/environment-variables

hostname, ports, routes and proxy https://www.snowpack.dev/reference/configuration#devoptions.hostname https://www.snowpack.dev/guides/routing#scenario-1-spa-fallback-paths

devOptions.hostname
devOptions.port
// snowpack.config.mjs
import proxy from 'http2-proxy';

export default {
  routes: [
    {
      src: '/api/.*',
      dest: (req, res) => {
        // remove /api prefix (optional)
        req.url = req.url.replace(/^/api/, '');

        return proxy.web(req, res, {
          hostname: 'localhost',
          port: 3001,
        });
      },
    },
  ],
};

About

Svelte + Snowpack

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published