Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/zach-hopkins/create-t3svelte-app

Quick T3 Stack with SvelteKit for rapid deployment of highly performant typesafe web apps.
https://github.com/zach-hopkins/create-t3svelte-app

Last synced: 3 months ago
JSON representation

Quick T3 Stack with SvelteKit for rapid deployment of highly performant typesafe web apps.

Lists

README 

        


  T3-SvelteKit

  


*Looking for Maintainers! Message me...*



create-t3svelte-app





  

  

    NPM version

  

  

    License

  

  

    Stars

  

  

    Downloads

  






  


  Just Build 

  


  npx create-t3svelte-app

  





## Outline



* [Get Building](#get-building)

  * [npm](#npm)

  * [yarn](#yarn)

  * [Prisma Requirements](#prisma-requirements)

* [Available Templates](#available-templates)

  * [Standard](#standard-recommended)

  * [Custom (Modular)](#custom-modular-build)

* [Contributing](#contributing)

* [Caveats & Addendums](#caveats--addendums)

  * [Server-Side Rendering](#server-side-rendering)

  * [Vercel's Edge Cache for Serverless Functions](#vercels-edge-cache-for-serverless-functions)

* [Shoutouts](#shoutouts)

* [License](#license)



## Get Building

 create-t3svelte-app is completely modular. Choose the components you need! 



✅ Elegant full-stack framework powered by [SvelteKit](https://kit.svelte.dev/)  

✅ Static typing support with [TypeScript](https://typescriptlang.org)  

✅ End-to-end typesafe APIs with [tRPC](https://trpc.io)  

✅ Enjoyable database interaction with [Prisma](https://www.prisma.io/)  

✅ Efficient styling with [Tailwind CSS](https://tailwindcss.com/)  



### npm



```bash

npx create-t3svelte-app@latest

```



### yarn



```bash

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](https://www.prisma.io/docs/reference/api-reference/command-reference).



## 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**](https://kit.svelte.dev/)

- [**TypeScript**](https://www.typescriptlang.org/)

- [**tRPC**](https://trpc.io/) - preconfigured with example API call in `+page.svelte`

- [**Tailwind CSS**](https://tailwindcss.com/) - preconfigured with eslint/prettier & 'tailwind prettier plugin' integration

- [**Prisma ORM**](https://www.prisma.io/) - 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:



- [ESLint](https://eslint.org/)

- [Prettier](https://prettier.io/)

- [Tailwind Prettier Plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)

- [Prisma ORM](https://www.prisma.io/)

- [Svelte Headless UI](https://github.com/rgossiaux/svelte-headlessui)

- [Svelte HeroIcons](https://github.com/JustinVoitel/svelte-hero-icons)



#### 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.



```bash

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()`](https://kit.svelte.dev/docs/load) function for SSR, make sure to initialize it like so:



```ts

// $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({

    url: loadFetch ? '/trpc' : url,

    transformer: trpcTransformer,

    ...(loadFetch && { fetch: loadFetch as typeof fetch })

  });

  

```



Then use it like so:



```ts

// 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](https://vercel.com/docs/concepts/functions/edge-caching) 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`](https://kit.svelte.dev/docs/hooks#server-hooks) like so: 



```ts

// 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](https://t3.gg/) for T3 Stack inspiration!

- [Nexxel](https://github.com/nexxeln) for the OG create-t3-app!

- [Ionut-Cristian Florescu](https://github.com/icflorescu/trpc-sveltekit) for his wonderful work on SvelteKit + tRPC & SSR Info!

- [Ryan Gossiaux](https://github.com/rgossiaux) for enabling TailwindUI & HeadlessUI on Svelte!



## License



[MIT](/LICENSE)