Sapper Template

This is the modified Rollup Sapper Template that we use at Tobius Ventures to build new Sapper website applications.

Some key differences include:

• We use editorconfig for file consistency (e.g. 2-spaces instead of tabs)
• We use eslint to help us adhere to the airbnb style guide (99% of it anyway)
• We use husky and eslint to catch unresolved linting errors (git push hook)
• We use .gitattributes to normalize Multi-OS (Windows/MacOS/Linux) line endings (git push hook)
• We write Sapper build artifacts to node_modules instead of src/node_modules
• We use .nvmrc to keep Node versions consistent across environments
• We use dotenv to remain environment agnostic (through user-defined env vars)
• We removed cypress support (we are re-evaluating e2e solutions .. because cypress is heavy)
• We normalized most of the package.json dependency versions (for "safer" semver auto-updates)
• We use a less obscure set of npm run workflow commands (dev/dynamic/static)
• We use tailwindcss as our styling framework of choice (which is globally implemented)

Please see the TODO list for future plans.

Copy

Use degit to copy this template repo to your machine to use as the baseline for a new project.

[~] mkdir project
[~] npm i degit
[~] npx degit tobiusventures/sapper-template .
[~] git init
[~] less README.md

Setup

Everything needed to create a new project from this code will be installed as a Node dependency.

[~] nvm use
[~] cp .env-example .env && vi .env
[~] npm ci

Development Mode

File changes will automatically trigger the browser to reload in dev mode. Watch the terminal console for compile errors. Watch the browser console for Website application errors.

[~] npm run dev
[~] open http://localhost:3000

Important! npm run lint will fail if you do not test dynamic or build mode before pushing your git changes, so don't be lazy.

Dynamic Mode

Use dynamic mode to test your dynamic dev mode application (live Node.js + static assets) before deploying changes to a production environment.

[~] npm run dynamic

Static Mode

Use static mode to test your static dev mode application (static assets only) before deploying changes to production.

[~] npm run static

Production

Remap build and start (inside package.json) to either of the buildDynamic and startDynamic OR the buildStatic and startStatic commands. Then your CI/CD solution can be configured to run:

[~] npm run build
[~] npm run start

License

MIT

Supporting Links

• dev setup instructions (macOS)
• svelte docs
• sapper docs
• tailwind docs
• eslint rules
• editorconfig docs
• airbnb javascript style guide
• airbnb css/sass style guide
• nvm command
• degit command
• semver 2.0.0 specification
• npm semver implementation