Ollesvelte

My personal Svelte boilerplate. Preview on Vercel. ✌️

Notable changes

Besides the additional dependencies and files, I've made a couple more changes to Svelte's default boilerplate:

• Tweaked rollup.config.js to account for additional dependencies and added --single flag to npm run dev command so page refreshes won't spit out a 404
• Moved global styles from public/global.css to src/assets/scss/globals/styles.scss
• Enhanced file structure and index page to what I like to start off with

Extensions

On VS Code:

• esbenp.prettier-vscode for formatting non-.svelte files
• svelte.svelte-vscode for .svelte support and formatting

Setup in global settings.json:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[svelte]": {
  "editor.defaultFormatter": "svelte.svelte-vscode"
}

Dependencies

• svelte-preprocess for .scss support with <style lang="scss">..</style>
• svelte-routing or svelte-navigator for <Route> and <Link to="..">-based routing
• vercel for deployment through CLI
• clipboard.js for simplified copy-to-clipboard actions (added as script)
• dotenv for locally managing environment variables
• easytimer.js for countdowns
• gh-pages for alternative deployment to Github Pages
• numeral.js for formatting numbers (added as script)

Scripts

• jQuery obviously

Setup

npm install
npm run dev

Deployment

First-time deployment with Vercel:

npm run build
vercel deploy --name app-name

Following deployments, from project root:

npm run build
vercel deploy --prod

🍉 Last revised on July 2021 🍉