Create-t3svelte-app NPM

Outline

Get Building
Available Templates
- Standard
- Custom (Modular)
Contributing
Caveats & Addendums
- Server-Side Rendering
- Vercel's Edge Cache for Serverless Functions
Shoutouts
License

Get Building

✅ Elegant full-stack framework powered by SvelteKit
✅ Static typing support with TypeScript
✅ End-to-end typesafe APIs with tRPC
✅ Enjoyable database interaction with Prisma
✅ Efficient styling with Tailwind CSS

npm

npx create-t3svelte-app@latest

yarn

yarn create t3svelte-app

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 'Custom' (modular build). Just run and start building.

Standard (Recommended)

SvelteKit
TypeScript
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 pull or prisma db generate

Custom (Modular Build)

Tech Stack Options:

SvelteKit
TypeScript || JavaScript
tRPC
Tailwind CSS
Prisma ORM

Tool Options:

Config Options:

Git Init
DB Auto Configure w/ Prisma (Postgresql, MySQL, MongoDB, SQLite)
Auto Dependency Install

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;
};