Add Package

1. create new folder in ./apps (i.e. docs)
2. create new folder in ./packages (i.e. components)
3. go to components folder and create package.json with proper namespace

   {
     "name": "@packages/components",
     "version": "0.0.0",
     "type": "module",
     "main": "index.js"
   }
   

4. cd into the app you want to add the package to and use the pnpm add command

   cd apps/docs
   pnpm add @packages/components
   

pnpm adds the workspace at the bottom of your docs/package.json

"dependencies": {
  "@packages/components": "workspace:*"
}

Project Configuration

Modify the root package.json

Make sure to modify the contents in the project's root package json to fit your needs.

Package.json inheritance from @packages/dependencies

You can create base package.json's to inherit from each other.

i.e. packages/dependencies/package.shared.json

{
    "devDependencies": {
        "svrollbar": "^0.12.0",
        "svelte-accessible-accordion": "^2.1.0"
    },
    "dependencies": {
        "@packages/config": "workspace:*",
        "@packages/metadata": "workspace:*",
        "@packages/components": "workspace:*"
    }
}

And then add it to the app's package.json like...

  "name": "@apps/site",
  "inherits": [
    "@packages/dependencies/package.svelte.json",
    "@packages/dependencies/package.shared.json"
  ],

Running Multiple Dev Environments

If you want to run multiple dev enviornments in parallel, you will have to define different ports in each of your apps package.json npm scripts (i.e. -p 4000). Each apps port will need to be different.

"name": "@apps/docs",
"version": "0.0.0",
"scripts": {
  "dev": "vite dev --port 4000",
  "build": "vite build",
  "preview": "vite preview --port 4000"
},

Setting up Symlinks (if you're on Windows)

Prerequisites

Symlink Permissions

You have 1 of 3 options. If you try to create a symlink without one of these, you will see:

Failed to create symbolic link 'link' : Operation not permitted

Choose a Path: Command Prompt, Git Bash or WSL

Command Prompt

1. Open the Command Prompt
2. Use cd to go into your project where you want to add the symlink

   cd C:\Users\oneezy\Desktop\sveltekit-symlinks\src\routes
   

3. Create a relative symlink (not absolute!) to a directory folder (not a file!)

   mklink /D my-new-symlink ..\..\symlinked-docs
   

4. And your finished!

Git Bash

Step 1. Setting System Environment Variables

export MSYS=winsymlinks:nativestrict

Step 2. Enable Symlinks in Gitconfig

You may also need to enable symlinks in your .gitconfig user profile.

git config --global core.symlinks true

This will add the symlinks = true to C:\Users\username\.gitconfig

[core]
  symlinks = true

You may also need to manually add symlinks = true to the gitconfig inside C:\Program Files\Git\etc\gitconfig if it's not there already

[core]
  symlinks = true

Step 3. Create Symlink (Git Bash)

1. Open up Git Bash
2. Use cd to go into your project where you want to add the symlink

   cd c/users/oneezy/desktop/sveltekit-symlinks/src/routes
   

3. Create a relative symlink (not absolute!) to a directory folder (not a file!)

   ln -s ../../../docs docs
   

4. And your finished!

PROTIP: To see a list of your symlinks use the ls -l command

oneezy@oneezy MINGW64 ~/Desktop/sveltekit-symlinks/src/routes (main)
$ ls -l

rw-r--r-- 1 oneezy 197609 1354 Jun  1 13:00 index.svelte
+lrwxrwxrwx 1 oneezy 197609   20 Jun  1 20:45 docs -> ../../docs/

Deploying

This uses Sveltkits adapter-auto and is being deployed to Vercel but you may need to change it depending on how you want to deploy.

BUILD COMMAND

pnpm build --filter @apps/app

ROOD DIRECTORY

apps/+app

References

Monorepo

• 📽️ Building Svelte Society: Monorepos with pngwn🐧
• 📽️ Monorepos: Any Size Fits All, by Altan Stalker
• 🎧 How to Setup a PNPM Monorepo (Wes Bos and Scott Telenski)
• 🎧 Monorepos! Workspaces, pnpm, turborepo + more! (Wes Bos and Scott Telenski)
• 📖 Visual Studio Code tips for monorepo development
• 📖 Exploring The Monorepo (6 Part Series)
• 📖 Mono repository done right!
• 📖 Replacing Lerna + Yarn with PNPM Workspaces
• 📖 How to set up monorepo build in GitLab CI
• 📖 Why TurboRepo Will Be The First Big Trend of 2022
• 📖 Turborepo with Svelte
• 🛠️ Monorepo.tools
• 🛠️ Monorepo Workspace (VS Plugin)
• ✨ Prisma + PNPM workspace Starter
• ✨ Turborepo + Sveltekit Starter
• ✨ Vidstack (Big Turborepo + Sveltekit Example)
• ✨ SvelteUI (Big Turborepo + Sveltekit Example)

Docs Starters

• ✨ Sveleton
• ✨ KitDocs
• ✨ Vitebook
• ✨ BooKit

Blog Starters

• ✨ Hagura

Tailwind UI

• ✨ Tailblocks
• ✨ HyperUI

Svelte Themes

• ✨ Svelte Themes

Full-Stack Sveltekit

• SVEMIX

Thanks Everyone for your contributions!