Sapper Monorepo

This is an example for setting up a Yarn Workspaces and Lerna Monorepo using Sapper and Svelte, this example also uses Jest for unit tests and Storybook, all formatting is enforced with Prettier, eslint and Husky pre-commit hooks.

Why this particular setup?

Because I'm in the process of evaluating Next.js and Nuxt.js along with Sapper and I want to be sure I can use Sapper in the same way so that I have a better idea of any issues that might be encountered.

The only thing missing from this build is TypeScript support which I hope will come to Sapper and Svelte soon but for now that's not a problem.

Why make it public?

Because I'm genuinely interested in Sapper and Svelte, I'm totally hooked on the concept and I want to contribute in some small way to ensure Svelte and Sapper go as far as possible to joining if not surpassing the big 3 frameworks.

This is a work in progress and bare bones but it is designed to help others who want to do something similar!

Commands

Storybook

Run from the root dir and your stories throughout the project will be parsed and built.

yarn stories
# or npm run stories

Jest

Run from the root dir and Jest tests will be run across the entire project.

yarn test
# or npm run test

Lerna and Workspace

To run lerna bootstrab

yarn lb
# npm run lb

For all other Lerna and Yarn Workspaces activities see the docs:

• Yarn Workspaces
• Lerna

Create Packages

Proxy commands for quickly creating Svelte or Sapper packages eg:

yarn make --component some-ui-element --component another-ui-element --sapper some-website
## or npm run make ...

This will produce a tree like by running npx degit sveltejs/template and npx degit sveltejs/sapper-template#rollup Package names are then updated to reflect the path name given, the rest is up to you. NB: no option for webpack yet because I don't personally need it. You can also just make a single component or app...

.
├── ...
├── packages
│   ├── app-some-website
│   │   └── ...
│   ├── component-another-ui-component
│   │   └── ...
│   ├── component-some-ui-component
│   │   └── ...
│   └── ...
└── ...

You should run yarn or npm i after you've done this to ensure you packages are wired up properly with Yarn Workspaces and Lerna.

Fix Stuff...

Run prettier on large portions of the project, this is good for getting started or if you are creating packages from templates using the make commands.

# Just check what will be fixed but don't write
yarn fix:check
# or npm run fix:check

# Write fixes in all files found to have issues
yarn fix:write
# of npm run fix:write

Building

This is as standard Sapper or Svelte builds and dev tasks.

cd packages/<package-name>
# then run the scripts as per the package

Notes:

Using @namespaced/some-name components

Sapper needs to use the non-compiled Svelte components ... https://github.com/sveltejs/sapper-template/blob/master/README.md#using-external-components

In this instance I've opted for updating the rollup.config.js because Lerna needs to be able to handle dependacies across packages, moving the namespaced dependencies to devDependencies wont work as expected. The downside to this is that the config needs to be updated when you add new apps.