create-t3svelte-app
Just Build
npx create-t3svelte-app
Outline
Get Building
npm
npx create-t3svelte-app@latest
yarn
yarn create t3svelte-app
More Info
ðŸ›
Early Version Note
This initial version is lacking significant polish that I hope to add in a new release shortly, including:
- Less Opinions, More Customization (including prettier/eslint not as forced defaults)
- SQLite as
schema.prismadefault✅ - Helper comments
- Package Manager Support
Prisma Requirements
If you choose not to init DB on first build, you can initialize prisma db at any time by editing the DATABASE_URL in .env and then running npx prisma db pull and npx prisma generate. You can read more about Prisma on their docs.
Available Templates
A simple CLI with highly opinionated, out-of-the-box ready SvelteKit/tRPC/Prisma/Tailwind application. CLI options include 'Standard' and 'Standard + UI Extras' (customization soon). Just run and start building.
Standard
- SvelteKit
- tRPC - preconfigured with example API call in
+page.svelte - Tailwind CSS - preconfigured with eslint/prettier & 'tailwind prettier plugin' integration
- Prisma ORM - CLI option to initialize DB on run - no need to run
prisma db pullorprisma db generate
Standard + UI Extras
- Standard
- Headless UI
- HeroIcons
Contributing
See a bug? Want to help? Easiest way is to clone the main repo and run npm link in the cloned directory. You can code and then run create-t3svelte-app in any directory.
git clone https://github.com/zach-hopkins/create-t3svelte-app
cd create-t3svelte-app
npm i
npm link
mkdir test-project
cd test-project
create-t3svelte-app
Run npm unlink create-t3svelte-app to undo.
Caveats & Addendums
Server-Side Rendering
If you need to use the tRPC client in SvelteKit's load() function for SSR, make sure to initialize it like so:
// $lib/trpcClient.ts
import { browser } from '$app/env';
import type { Router } from '$lib/trpcServer';
import * as trpc from '@trpc/client';
import type { LoadEvent } from "@sveltejs/kit";
const url = browser ? '/trpc' : 'http://localhost:3000/trpc';
export default (loadFetch?: LoadEvent['fetch']) =>
trpc.createTRPCClient<Router>({
url: loadFetch ? '/trpc' : url,
transformer: trpcTransformer,
...(loadFetch && { fetch: loadFetch as typeof fetch })
});
Then use it like so:
// src/routes/+authors.svelte
import trpcClient from '$lib/trpcClient';
import type { Load } from '@sveltejs/kit';
export const load: Load = async ({ fetch }) => { // 👈 make sure to pass in this fetch, not the global fetch
const authors = await trpcClient(fetch).query('authors:browse', {
genre: 'fantasy',
});
return { props: { authors } };
};
Vercel's Edge Cache for Serverless Functions
Your server responses must satisfy some criteria in order for them to be cached on Vercel's Edge Network. tRPC's responseMeta() comes in handy here since you can initialize your handle in src/hooks.server.ts like so:
// src/hooks.server.ts
import { router } from '$lib/trpcServer';
import { createTRPCHandle } from 'trpc-sveltekit';
export const handle = async ({ event, resolve }) => {
const response = await createTRPCHandle({
url: '/trpc',
event,
resolve,
responseMeta({ type, errors }) {
if (type === 'query' && errors.length === 0) {
const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
return {
headers: {
'cache-control': `s-maxage=1, stale-while-revalidate=${ONE_DAY_IN_SECONDS}`
}
};
}
return {};
}
});
return response;
};
Shoutouts
- Theo @ T3 for T3 Stack inspiration!
- Nexxel for the OG create-t3-app!
- Ionut-Cristian Florescu for his wonderful work on SvelteKit + tRPC & SSR Info!
- Ryan Gossiaux for enabling TailwindUI & HeadlessUI on Svelte!
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
2 Dec 25, 2021
32 Apr 18, 2022
47 Oct 17, 2022
10 Dec 16, 2022
262 Dec 27, 2022
2 Nov 7, 2022
20 Dec 26, 2022
5 Jan 9, 2023
31 Aug 4, 2022
61 Dec 30, 2022
6 Sep 2, 2022
83 Dec 16, 2022
4 Nov 12, 2022
5 Nov 14, 2022
7 Jun 27, 2022
6 Aug 15, 2022