Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/exectx/t3-cloudflare
A collection of basic create-t3-app templates compatible with Cloudflare Pages - (Next.js App Router + Cloudflare Pages + tRPC + Cloudflare D1 + TursoDB + Drizzle)
https://github.com/exectx/t3-cloudflare
app-router-nextjs c3-cli cloudflare-d1 cloudflare-pages cloudflare-workers d1 drizzle drizzle-orm edge next-on-pages nextjs nextjs-template sqlite starter-template t3 trpc turso
Last synced: 29 days ago
JSON representation
A collection of basic create-t3-app templates compatible with Cloudflare Pages - (Next.js App Router + Cloudflare Pages + tRPC + Cloudflare D1 + TursoDB + Drizzle)
- Host: GitHub
- URL: https://github.com/exectx/t3-cloudflare
- Owner: exectx
- Created: 2023-12-14T03:25:57.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-10T05:24:17.000Z (about 2 months ago)
- Last Synced: 2024-09-27T13:01:31.003Z (about 1 month ago)
- Topics: app-router-nextjs, c3-cli, cloudflare-d1, cloudflare-pages, cloudflare-workers, d1, drizzle, drizzle-orm, edge, next-on-pages, nextjs, nextjs-template, sqlite, starter-template, t3, trpc, turso
- Language: TypeScript
- Homepage: https://ct3a.exectx.run/
- Size: 1 MB
- Stars: 37
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# T3-App templates - Cloudflare Pages
This is a collection of basic create-t3-app templates designed for compatibility with Cloudflare Pages. You can use these templates with the Cloudflare C3 CLI and pnpm as the package manager:
> [!NOTE]
> Feel free to open an issue or PR if you have better templates
## Live demo
Live demo at https://ct3a.exectx.run/ (cloudflare pages + next-on-pages)
- Generated using `create-t3-app` with the following options: tRPC, drizzle, no auth, tailwind, SQLite. Then modified to support D1
- D1 instance location: Eastern North America — `enam`
## Templates
D1 template (no auth) - [next steps guide](./templates/d1/README.md):
> [!IMPORTANT]
> After runing the command, follow the instructions below or in the link above to finish setting up your D1 template
```sh
pnpm create cloudflare@latest --template=exectx/t3-cloudflare/templates/d1
```
Next steps... Instructions for finishing setting up your D1 database
Run the following command to create a D1 Database, then update the `database_id` in `wrangler.toml`. (Cloudflare's D1 [guide](https://developers.cloudflare.com/d1/get-started/))
```sh
pnpx wrangler d1 create
```
### 1. Set Up Database and Run Migrations
> Running drizzle-kit commands for remote databases requires valid cloudflare environment variables ([guide](#3-configure-cloudflare-environment-variables-optional))
Once you have updated your `wrangler.toml` with the correct `database_id`, follow the instructions below.
Using Wrangler for local database
```sh
pnpm db:generate
pnpm d1:migrate:local
pnpm dev # or pnpm preview
```
Using Wrangler for remote database
```sh
pnpm db:generate
pnpm d1:migrate:remote
pnpm dev # or pnpm preview
```
Using Drizzle-Kit for local database
#### Using Migrations
```sh
pnpm db:generate
pnpm db:migrate:local
pnpm dev # or pnpm preview
```
#### Pushing Schema Changes
```sh
pnpm db:push:local
pnpm dev # or pnpm preview
```
Using Drizzle-Kit for remote database requires Cloudflare environment variables
#### Using Migrations
```sh
pnpm db:generate
pnpm db:migrate
pnpm dev # or pnpm preview
```
#### Pushing Schema Changes
```sh
pnpm db:push
pnpm dev # or pnpm preview
```
### 2. Deployment
To deploy to Cloudflare, you can connect your application via cloudflare dashboard (GitHub integration) or run `pnpm deploy`. follow [Cloudflare's Next.js guide](https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/#6-deploy-to-cloudflare-pages).
### 3. Configure Cloudflare Environment Variables (Optional)
You can run migrations using `wrangler d1 migrations ...`, but if you want to use `drizzle-kit` instead, you need to configure your environment variables.
```sh
cp .dev.vars.example .dev.vars
```
You can find `CLOUDFLARE_ACCOUNT_ID`, `CLOUDFLARE_DATABASE_ID`, and `CLOUDFLARE_TOKEN` in the Cloudflare dashboard:
- To get `CLOUDFLARE_ACCOUNT_ID`, go to Workers & Pages -> Overview -> copy Account ID from the right sidebar.
- To get `CLOUDFLARE_DATABASE_ID`, open the D1 database you want to connect to and copy the Database ID.
- To get `CLOUDFLARE_TOKEN`, go to My Profile -> API Tokens and create a token with D1 edit permissions.
Now you can run Drizzle-Kit remote commands such as `db:push`, `db:migrate`, `db:studio`, etc.
Turso template (no-auth) - [next steps guide](./templates/turso/README.md):
```sh
pnpm create cloudflare@latest --template=exectx/t3-cloudflare/templates/turso
```
Just tRPC
```sh
pnpm create cloudflare@latest --template=exectx/t3-cloudflare/templates/trpc
```
## TODO Templates
- [x] T3 + D1 + Drizzle ORM/KIT (cf pages)
- [x] T3 + TursoDB + Drizzle ORM/KIT (cf pages)
- [x] T3 + tRPC (only) (cf pages)
- [ ] T3 + D1 (cf workers)