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.
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.
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!
Run from the root dir and your stories throughout the project will be parsed and built.
yarn stories
# or npm run stories
Run from the root dir and Jest tests will be run across the entire project.
yarn test
# or npm run test
To run lerna bootstrab
yarn lb
# npm run lb
For all other Lerna and Yarn Workspaces activities see the docs:
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.
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
This is as standard Sapper or Svelte builds and dev tasks.
cd packages/<package-name>
# then run the scripts as per the package
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.