snowpack-svelte

README.md

Directory Setup

├── public
│   ├── favicon.ico
│   ├── global.css
│   ├── index.html
│   ├── robots.txt
├── src
│   ├── App.svelte
│   ├── index.js
├── .gitignore
├── snowpack.config.js
└── package.json

App.svelte

<script>
    export let name;
</script>

<style>
    h1 {
        text-align: center;
    }
</style>

<h1>Hello {name}!</h1>

index.js

import App from "./App.svelte";

const app = new App({
    target: document.body,
    props: {
        name: "Svelte",
    },
});

export default app;

// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/#hot-module-replacement
if (import.meta.hot) {
    import.meta.hot.accept();
    import.meta.hot.dispose(() => {
        app.$destroy();
    });
}

package.json

{
    "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build",
}

snowpack.config.js

{
    "plugins": ["@snowpack/plugin-svelte"]
}

steps.sh

mkdir [dirname]
cd [dirname]
yarn init -y
git init
touch .gitignore && echo -e "node_modules\nyarn.lock\nyarn-error.log\ndist\n.cache\n.env" >> .gitignore
yarn add --dev snowpack svelte-check @snowpack/plugin-svelte @snowpack/plugin-run-script @snowpack/app-scripts-svelte
yarn add svelte
mkdir public && mkdir src && cd public && touch favicon.ico global.css index.html robots.txt
cd .. && cd src
touch App.svelte index.js && cd ..
touch snowpack.config.js
hub create
code .