sveltekit + turborepo + histoire in a turborepo

Overview

swyx's SvelteKit monorepo starter

This is my starter for a monorepo with 2022 tech:

Demo

Proof that this repo deploys to Netlify properly (which was way harder than it should be...)

https://sveltekit-monorepo-ui.netlify.app/

image

What's inside?

Apps and Packages

  • Apps
    • dashboard: a SvelteKit app. This is the end product that end users should be seeing. Feel free to clone this if building more.
    • ui: a stub Svelte component library usable by the dashboard app
      • with a histoire storybook you can also run for dev, or publish
      • it is also set up for you to publish the component library with svelte-package
  • Packages
    • eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
    • tsconfig: tsconfig.jsons used throughout the monorepo

Utilities

This turborepo has some additional tools already setup for you:

  • We have opted for using jsdoc types for now, but that opinion is open for debate.
  • ESLint for code linting
  • Prettier for code formatting

Setup

pnpm # to install all the things

Build

To build all apps and packages, run the following command:

cd my-turborepo
pnpm run build

Develop

To develop all apps and packages, run the following command:

cd my-turborepo
pnpm run dev

Installing packages

To install a library package in the ui workspace with pnpm:

pnpm add --filter ui library

Run histoire

pnpm --filter ui story:dev

Remote Caching

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

cd my-turborepo
pnpx turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo:

pnpx turbo link

Turborepo Links

Learn more about the power of Turborepo:

Useful Links

You might also like...

A simple handle tap and hold action for Svelte/SvelteKit.

Svelte Tap Hold Minimalistic tap and hold component for Svelte/SvelteKit, see demo here. Installation // Using Yarn to install yarn add --dev svelte-t

Dec 8, 2022

Projen project type for Turborepo monorepo setup.

πŸ“¦ projen-turborepo Projen project type for Turborepo monorepo setup. Getting Started To create a new project, run the following command and follow th

Oct 4, 2022

A Turborepo with Strapi v4 (w/ postgres database) + Next.js powered by docker and docker-compose

A Turborepo with Strapi v4 (w/ postgres database) + Next.js powered by docker and docker-compose

Turborepo + Strapi + Next.js + Docker A Turborepo with Strapi v4 (w/ postgres database) + Next.js powered by docker and docker-compose. ⚠️ Prerequisit

Dec 29, 2022

open-source implementation of the Turborepo custom remote cache server.

open-source implementation of the Turborepo custom remote cache server.

This project is an open-source implementation of the Turborepo custom remote cache server. If Vercel's official cache server isn't a viable option, th

Dec 30, 2022

Fullstack Turborepo starter. Typescript, Nestjs, Nextjs, Tailwind, Prisma, Github Actions, Docker, And Reverse proxy configured

Turborepo (NestJS + Prisma + NextJS + Tailwind + Typescript + Jest) Starter This is fullstack turborepo starter. It comes with the following features.

Jan 9, 2023

Blog and Resume template with turborepo

Blog and Resume template with turborepo

Comet-land BLOG DEMO RESUME DEMO Blog and Resume template with turborepo ν•œκ΅­μ–΄ λ¬Έμ„œλŠ” λ‹€μŒ λ§ν¬μ—μ„œ ν™•μΈν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€. Blog Feature πŸ‘” Code highlight with line-highlig

Dec 27, 2022

Remix + Cloudflare Workers + DO + Turborepo

Remix + Cloudflare Workers + DO + Turborepo A starter to get you up and going with Remix on Cloudflare with all the latest and greatest. What's inside

Dec 12, 2022

A starter template for Remix + Cloudflare Workers + DO + KV + Turborepo

Remix + Cloudflare Workers starter with Turborepo πŸš€ Starter to get going with Remix and Cloudflare Workers. This template is based on the starter cre

Jan 2, 2023

Turborepo starter with pnpm

Turborepo starter with pnpm This is an official starter turborepo. What's inside? This turborepo uses pnpm as a packages manager. It includes the foll

Dec 18, 2022
Comments
  • Tailwind and exported css

    Tailwind and exported css

    Hi,

    Just wondering if you have solved things like let's say the UI project utilising the tailwind plugin and the dashboard consuming the components from UI. At lest in dev mode, I find that the dashboard project won't receive the tailwind classes until I publish the UI package to get the appropriate TW classes generated and exported.

    Any ideas or pointers to how one might work around this ?

    Cheers, Nik

    opened by niktek 2
Owner
swyx
Learn in Public
swyx
Perfect SvelteKit dark mode in 2 lines of code. Support System preference and any other theme with no flashing

This library is a port of next-theme for SvelteKit. All credit goes to pacocoursey and all next-themes contributors While usable, this library is stil

null 42 Sep 30, 2022
This is a blog built with sveltekit, tailwind and daisyUI, made to be used as my personal blog.

svelte-blogger This is a blog built with sveltekit, tailwind and daisyUI, made to be used as my personal blog. This app also use graphql and use markd

lipe 6 Jun 23, 2022
End-to-end typesafe APIs with tRPC.io in SvelteKit applications

✨ tRPC-SvelteKit End-to-end typesafe APIs with tRPC.io in SvelteKit applications. No code generation, run-time bloat, or build pipeline. ❀️ ???? See b

Ionut-Cristian Florescu 307 Dec 29, 2022
Sveltekit + Tauri Template

Skitty Template for building SvelteKit + Tauri (Skitty) Warning This project is supposed to be used temporary only (until svelte-add tauri has finishe

null 6 Jul 25, 2022
Documentation integration for SvelteKit.

KitDocs Documentation integration for SvelteKit. You can think of it as a VitePress alternative for Svelte. ✨ Features ?? Vite plugin for transforming

Svelteness 244 Dec 28, 2022
A set of tools, helping you building efficient apps in a fast way. >> SvelteKit & GraphQL <<

KitQL KitQL, A set of tools, helping you building efficient apps in a fast way. ?? Infos Documentation: https://kitql.vercel.app/ Day by day progress,

JYC 262 Dec 27, 2022
Simple starter for SvelteKit with Tailwind CSS already set up and ready to go.

Get Started Simple Sveltekit boilerplate with Tailwind CSS already set up. Just run npm install to download the dependencies. Info I use Tailwind in p

Jordan 16 Dec 23, 2022
Scaffold a full-stack SvelteKit application with tRPC and WindiCSS out of the box

create-sweet-app Interactive CLI to quickly set up an opinionated, full-stack, typesafe SvelteKit project. Inspired by the T3 Stack and create-t3-app

David HrabΔ› 10 Dec 16, 2022
Quick T3 Stack with SvelteKit for rapid deployment of highly performant typesafe web apps.

create-t3svelte-app Just Build npx create-t3svelte-app Outline Get Building npm yarn More Info ?? Early Version Note Prisma Requirements Available Tem

Zach 85 Dec 26, 2022
An example SvelteKit app implementing a simple authentication system.

SvelteKit Auth Example An example SvelteKit app implementing a variety of authentication backends View the demo NOTE: this is very much a work in prog

Dana Woodman 54 Dec 30, 2022