Turborepo + Sveltekit + Tailwind + Histoire (Demo)
This is a monorepo starter powered by:
- 🆕 create "main" app for all other apps to live on the same level / better control of (group) layouts
- 🆕 fixed layouts / duplicate content
- 🆕 created
$baselinks so stand-alone app links will work - 🆕 bumped histoire to
v0.11.7 - 🆕 better tailwind.config content paths
- 🆕 fix
plop appto work w/ new layout structure - convert Histoire (svelte) to Histoire (sveltekit)
- Turborepo
- Sveltekit
^1.0.0-next.570 - Tailwind
^3.1.8 - PNPM
- Husky
- Commitlint
- Symlink routes fixed! (sveltekit issue #6303)
- Shared
@packages/*between@apps/* - Remove all build folder w/
pnpm cleanscript - Open multiple apps on different ports w/
pnpm dev - Build multiple apps w/
pnpm build(turborepo build under hood) - Preview built apps w/
pnpm preview - Implement Changesets (link)
- Setup Component Stories
- Histoire
-
Vitebook(deprecated / no iframe) -
Bookit(no iframe)
- Commitlint Emojis
- Setup Docker w/ Turborepo
- Deploy
dev,beta, andprodto real web host - CI Build Process
- Create
envvariables shared inpackages - Limit access to certain directories
- Setup git submodules for opensource repos
- Create
@oneezy/componentsGitHub repo + NPM package for sharing components between projects - Automate Release Tags
- Testing
websites and webapps live in the ./apps folder. They all live at the same level but the app routes are symlinked into the +app (main app) directory so they inherit Sveltekit's SPA routing system (Single Page Application).
- +app (main app)
- +stories (histoire stories)
- site
- docs
libraries, configs and components live in the ./packages folder.
- components
- where components and global css live
- config
- shared configs between all apps
- dependencies
- shared
dependenciesanddevDependenciesbetween alls apps
- shared
- libs
- useful libraries from npm and other 3rd party resources
- metadata
- base metadata shared between apps
- utils
- where utilities live
Prereqs
node v18.8.0 (or later)
pnpm v7 (or later)image.png
Installation
degit oneezy/monorepo my-app
pnpm i
+ start all apps
pnpm dev
+ start single app
pnpm dev --filter @apps/site
+ production build all apps
pnpm build
+ production preview all apps
pnpm preview
+ production preview single app
pnpm preview --filter @apps/devThis monorepo makes use of symlinks to handle 2 separate scenarios. if you plan on using either you will need to follow the steps below for your app(s) to work properly. Learn more about symlinks by clicking here.
PROTIP: Quickly generate an app using plop !
pnpm plop app
symlink static assets
this monorepo only uses one folder for static assets located at ./apps/+app/static so you will need to symlink that static folder into every app you add to the apps/* folder to get static assets working (this may change in the future but this is how we're handling it at the moment).
This is automatically handled for you when you
pnpm ianywhere.
symlink app routes
if you want to link entire apps together as routes you will need to symlink your ./apps/my-app/src/routes directory into the main ./apps/+app/src/routes directory.
This is automatically handled for you when you
pnpm ianywhere.
Components are the building blocks of your apps.
PROTIP: Quickly generate a component using plop !
pnpm plop component
or do it manually...
-
create new component in
./packages/components/srcdirectory -
export new component from
./packages/components/index.jsfile -
use component in an app
./apps/site/src/routes/index.svelte
<script>
import { MyComponent } from '@packages/components';
</script>
<MyComponent />- create new folder in
./apps(i.e.docs) - create new folder in
./packages(i.e.components) - go to
componentsfolder and createpackage.jsonwith proper namespace
{
"name": "@packages/components",
"version": "0.0.0",
"type": "module",
"main": "index.js"
}- cd into the app you want to add the package to and use the
pnpm addcommand
cd apps/docs
pnpm add @packages/components
pnpm adds the workspace at the bottom of your
docs/package.json
"dependencies": {
"@packages/components": "workspace:*"
}Make sure to modify the contents in the project's root package json to fit your needs.
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"
],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"
},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
🟦 Option 1: Run as Administrator
When you make a symlink this way, you'll always need to open up the terminal as an Administrator.
🟦 Option 2: Developer Mode
This is the easiest way but not the safest (security risk).
- Go to your start menu and search "Developer Settings".
- Turn Developer Mode
On.
✅ Option 3: Local Security Policy
- Go to your start menu and search "Local Security Policy".
- Double click on
Create symbolic links
+ Security Settings > Local Policies > User Rights Assignment > Create symbolic links- Click the Add User or Group button
- Type in your username and click the OK button
- Click the Apply button
- Restart your computer for the settings to take place
- Open the Command Prompt
- Use
cdto go into your project where you want to add thesymlink
cd C:\Users\oneezy\Desktop\sveltekit-symlinks\src\routes
- Create a relative
symlink(not absolute!) to a directory folder (not a file!)
mklink /D my-new-symlink ..\..\symlinked-docs
- And your finished!
🟦 Option 1: Exporting variable per session (tedious)
In your terminal you'll need to write the following command every time you restart git bash.
export MSYS=winsymlinks:nativestrict
✅ Option 2: Create an entry for MSYS (once)
- Go to your start menu and search for "System Settings"
- Click the Environment Variables... button
- Go to
System variablessection and click the New button - Enter in the New System Variable
nameandvalueand click the OK button.
Variable name: MSYS
Variable value: winsymlinks:nativestrict
- Click the OK button again to confirm.
- Congratulations! Now you have the power to create symlinks whenever you want!
You may also need to enable symlinks in your .gitconfig user profile.
git config --global core.symlinks true
This will add the
symlinks = truetoC:\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
- Open up Git Bash
- Use
cdto go into your project where you want to add thesymlink
cd c/users/oneezy/desktop/sveltekit-symlinks/src/routes
- Create a relative
symlink(not absolute!) to a directory folder (not a file!)
ln -s ../../../docs docs
- And your finished!
PROTIP: To see a list of your symlinks use the
ls -lcommand
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/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
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
Blog Starters
Tailwind UI
Svelte Themes
Full-Stack Sveltekit
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent