How to setup a monorepo

In this guide I will show you how to setup a basic Sveltekit monorepo using Turborepo and PNPM. In other guides I’ll show you how to add other cool features. You can find all the guides here.

Table of contents

• Initial setup

• Creating a Sveltekit application

• Setting up ESLint

• Setting up Prettier

  • Formatting on Auto-save

    • Changing Svelte default formatter

  • Debugging

• TS Config

• Svelte and Vite config

• The end

Initial setup

To better scale and this monorepo we are gonna use Turborepo. For the initial scaffolding we are gonna use create-turbo CLI, altough we are gonna delete most of the files it creates.

npx create-turbo@latest

This command will ask you where do you want to put your monorepo, and which package manager you want to use. I recommend PNPM, since it’s the fastest, and saves your disk space.

This will give us these initial directories

├── apps
│   ├── docs
│   └── web
└── packages
    ├── eslint-config-custom
    ├── tsconfig
    └── ui

Creating a Sveltekit application

And as I said we can delete most of this stuff.

Start of by removing the docs and web folders from the apps directory. Then create a new sveltekit app inside:

cd apps
pnpm create svelte@latest my-app

Configure the app however you want, though I recommend selecting the Skeleton project and using Typescript, ESLint and Prettier.

Setting up ESLint

Copy the created eslint config from sveltekit app into index.js in eslint-config-custom. The file should look like this:

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "turbo", // Don't forget to add this one back
  ],
  plugins: ["svelte3", "@typescript-eslint"],
  ignorePatterns: ["*.cjs"],
  overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
  settings: {
    "svelte3/typescript": () => require("typescript"),
  },
  parserOptions: {
    sourceType: "module",
    ecmaVersion: 2020,
  },
  env: {
    browser: true,
    es2017: true,
    node: true,
  },
};

We’ll also need to install all the dependencies and remove the old ones.

cd packages/eslint-config-custom
pnpm add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-svelte3
pnpm remove eslint-config-next eslint-plugin-react

Also move the .eslintignore to the root directory.

And then comeback to the apps directory and remove all the eslint dependencies that we installed in the eslint-config-custom, since they are no longer needed.

pnpm remove @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-svelte3

And add the eslint-config-custom package

pnpm add -D eslint-config-custom

Also don’t forget to change the .eslintrc.js, to extend the custom config.

module.exports = {
  root: true,
  extends: ["custom"],
};

Now you can check that eslint work by just running pnpm run lint

Setting up Prettier

You can copy the .prettierrc and .prettierignore files to the root, and then you need to modify the .prettierignore, by putting the **/ before the nested folders.

.DS_Store
node_modules
**/build
**/.svelte-kit
**/package
.env
.env.*
!.env.example

# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

Due to some issues in prettier itself you will need to modify the scripts. First modify the lint script in the apps/web/package.json , by removing the prettier command.

- "lint": "prettier --plugin-search-dir . --check . && eslint .",
+ "lint": "eslint .",

And add these two script into your root package.json

"prettier": "prettier --write \"**/*.{ts,tsx,md,svelte,js,json,yaml}\"",
"prettier-check": "prettier --plugin-search-dir . --check ."

The first command will format all your code, and the second one will only check it.

Formatting on Auto-save

I have had numerous problems when working with prettier on autosave, so if it’s not working you can try these tips

Changing Svelte default formatter

As far as I understand by default svelte files are formatted by the svelte VSCode extension instead of the prettier extension and the svelte extension ignores the .prettierc config file, so you can go to you settings.json in VSCode (open the command pallete Ctrl+P and search for Open User Settings (JSON))

And add these two lines:

"prettier.documentSelectors": ["**/*.svelte"],
"[svelte]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Debugging

If it still doesn’t work the best tip I can give is to open up the prettier output console in VSCode, you can go to it by clicking on the prettier text in the right bottom corner, or by opening terminal and clicking the Output tab and selecting Prettier

TS Config

Sadly there’s currently no way to extend two tsconfig.json in one, and you need to extend the sveltekit generated tsconfig.json to have the end to end typesafety. Though this feature is coming in Typescript 5.0, so I will update this guide when it lands, for now you’ll need to resort to copy pasting the config, or just using the defaults, which I found are good enough.

Svelte and Vite config

In my expirience using monorepos, I found that I have different configs for each, but still if you want to share them just create a new package by creating a new folder and running npm init -y, then create your base configs, and export a POJO, which you then import in the config.

The end

To see how to set-up Histoire or TailwindCSS, you can look at all the guides from this series here.