diff --git a/examples/apps/framework-t3/.env.example b/examples/apps/framework-t3/.env.example new file mode 100644 index 000000000..3fcccc633 --- /dev/null +++ b/examples/apps/framework-t3/.env.example @@ -0,0 +1,14 @@ +# Since the ".env" file is gitignored, you can use the ".env.example" file to +# build a new ".env" file when you clone the repo. Keep this file up-to-date +# when you add new variables to `.env`. + +# This file will be committed to version control, so make sure not to have any +# secrets in it. If you are cloning this repo, create a copy of this file named +# ".env" and populate it with your secrets. + +# When adding additional environment variables, the schema in "/src/env.mjs" +# should be updated accordingly. + +# Example: +# SERVERVAR="foo" +# NEXT_PUBLIC_CLIENTVAR="bar" diff --git a/examples/apps/framework-t3/.eslintrc.cjs b/examples/apps/framework-t3/.eslintrc.cjs new file mode 100644 index 000000000..2e6e541cf --- /dev/null +++ b/examples/apps/framework-t3/.eslintrc.cjs @@ -0,0 +1,25 @@ +/** @type {import("eslint").Linter.Config} */ +const config = { + parser: "@typescript-eslint/parser", + parserOptions: { + project: true, + }, + plugins: ["@typescript-eslint"], + extends: [ + "next/core-web-vitals", + "plugin:@typescript-eslint/recommended-type-checked", + "plugin:@typescript-eslint/stylistic-type-checked", + ], + rules: { + "@typescript-eslint/consistent-type-imports": [ + "warn", + { + prefer: "type-imports", + fixStyle: "inline-type-imports", + }, + ], + "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }], + }, +}; + +module.exports = config; diff --git a/examples/apps/framework-t3/.gitignore b/examples/apps/framework-t3/.gitignore new file mode 100644 index 000000000..2971a0bd6 --- /dev/null +++ b/examples/apps/framework-t3/.gitignore @@ -0,0 +1,42 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# database +/prisma/db.sqlite +/prisma/db.sqlite-journal + +# next.js +/.next/ +/out/ +next-env.d.ts + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables +.env +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo diff --git a/examples/apps/framework-t3/README.md b/examples/apps/framework-t3/README.md new file mode 100644 index 000000000..fba19edac --- /dev/null +++ b/examples/apps/framework-t3/README.md @@ -0,0 +1,28 @@ +# Create T3 App + +This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`. + +## What's next? How do I make an app with this? + +We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary. + +If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help. + +- [Next.js](https://nextjs.org) +- [NextAuth.js](https://next-auth.js.org) +- [Prisma](https://prisma.io) +- [Tailwind CSS](https://tailwindcss.com) +- [tRPC](https://trpc.io) + +## Learn More + +To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources: + +- [Documentation](https://create.t3.gg/) +- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials + +You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome! + +## How do I deploy this? + +Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information. diff --git a/examples/apps/framework-t3/next.config.mjs b/examples/apps/framework-t3/next.config.mjs new file mode 100644 index 000000000..654e72562 --- /dev/null +++ b/examples/apps/framework-t3/next.config.mjs @@ -0,0 +1,23 @@ +/** + * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful + * for Docker builds. + */ +await import("./src/env.mjs"); + +/** @type {import("next").NextConfig} */ +const config = { + reactStrictMode: true, + + /** + * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config + * out. + * + * @see https://github.com/vercel/next.js/issues/41980 + */ + i18n: { + locales: ["en"], + defaultLocale: "en", + }, +}; + +export default config; diff --git a/examples/apps/framework-t3/package-lock.json b/examples/apps/framework-t3/package-lock.json new file mode 100644 index 000000000..e69de29bb diff --git a/examples/apps/framework-t3/package.json b/examples/apps/framework-t3/package.json new file mode 100644 index 000000000..452924aff --- /dev/null +++ b/examples/apps/framework-t3/package.json @@ -0,0 +1,40 @@ +{ + "name": "framework-t3", + "version": "0.1.0", + "private": true, + "scripts": { + "build": "next build", + "dev": "next dev", + "lint": "next lint", + "start": "next start" + }, + "dependencies": { + "@t3-oss/env-nextjs": "^0.3.1", + "@tanstack/react-query": "^4.29.7", + "@trpc/client": "^10.26.0", + "@trpc/next": "^10.26.0", + "@trpc/react-query": "^10.26.0", + "@trpc/server": "^10.26.0", + "inngest": "~2", + "next": "^13.4.2", + "react": "18.2.0", + "react-dom": "18.2.0", + "superjson": "1.12.2", + "zod": "^3.21.4" + }, + "devDependencies": { + "@types/eslint": "^8.37.0", + "@types/node": "^18.16.0", + "@types/react": "^18.2.6", + "@types/react-dom": "^18.2.4", + "@typescript-eslint/eslint-plugin": "6.0.0", + "@typescript-eslint/parser": "6.0.0", + "eslint": "^8.40.0", + "eslint-config-next": "^13.4.2", + "typescript": "^5.0.4" + }, + "ct3aMetadata": { + "initVersion": "7.16.0" + }, + "packageManager": "npm@9.6.4" +} diff --git a/examples/apps/framework-t3/public/favicon.ico b/examples/apps/framework-t3/public/favicon.ico new file mode 100644 index 000000000..60c702aac Binary files /dev/null and b/examples/apps/framework-t3/public/favicon.ico differ diff --git a/examples/apps/framework-t3/src/env.mjs b/examples/apps/framework-t3/src/env.mjs new file mode 100644 index 000000000..a54ca68ba --- /dev/null +++ b/examples/apps/framework-t3/src/env.mjs @@ -0,0 +1,39 @@ +import { createEnv } from "@t3-oss/env-nextjs"; +import { z } from "zod"; + +export const env = createEnv({ + /** + * Specify your server-side environment variables schema here. This way you can ensure the app + * isn't built with invalid env vars. + */ + server: { + NODE_ENV: z.enum(["development", "test", "production"]), + INNGEST_EVENT_KEY: z.string().min(1).optional(), + INNGEST_SIGNING_KEY: z.string().min(1).optional(), + }, + + /** + * Specify your client-side environment variables schema here. This way you can ensure the app + * isn't built with invalid env vars. To expose them to the client, prefix them with + * `NEXT_PUBLIC_`. + */ + client: { + // NEXT_PUBLIC_CLIENTVAR: z.string().min(1), + }, + + /** + * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g. + * middlewares) or client-side so we need to destruct manually. + */ + runtimeEnv: { + NODE_ENV: process.env.NODE_ENV, + INNGEST_EVENT_KEY: process.env.INNGEST_EVENT_KEY, + INNGEST_SIGNING_KEY: process.env.INNGEST_SIGNING_KEY, + // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR, + }, + /** + * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. + * This is especially useful for Docker builds. + */ + skipValidation: !!process.env.SKIP_ENV_VALIDATION, +}); diff --git a/examples/apps/framework-t3/src/inngest/client.ts b/examples/apps/framework-t3/src/inngest/client.ts new file mode 100644 index 000000000..22eac648f --- /dev/null +++ b/examples/apps/framework-t3/src/inngest/client.ts @@ -0,0 +1,4 @@ +import { Inngest } from "inngest"; +import { schemas } from "./types"; + +export const inngest = new Inngest({ name: "My T3 app", schemas }); diff --git a/examples/apps/framework-t3/src/inngest/helloWorld.ts b/examples/apps/framework-t3/src/inngest/helloWorld.ts new file mode 100644 index 000000000..7de77e041 --- /dev/null +++ b/examples/apps/framework-t3/src/inngest/helloWorld.ts @@ -0,0 +1,11 @@ +import { inngest } from "./client"; + +export default inngest.createFunction( + { name: "Hello World" }, + { event: "demo/event.sent" }, + ({ event, step }) => { + return { + message: `Hello ${event.name}!`, + }; + } +); diff --git a/examples/apps/framework-t3/src/inngest/index.ts b/examples/apps/framework-t3/src/inngest/index.ts new file mode 100644 index 000000000..2315e5f4e --- /dev/null +++ b/examples/apps/framework-t3/src/inngest/index.ts @@ -0,0 +1,5 @@ +import helloWorld from "./helloWorld"; + +export const functions = [helloWorld]; + +export { inngest } from "./client"; diff --git a/examples/apps/framework-t3/src/inngest/types.ts b/examples/apps/framework-t3/src/inngest/types.ts new file mode 100644 index 000000000..76225a1cd --- /dev/null +++ b/examples/apps/framework-t3/src/inngest/types.ts @@ -0,0 +1,10 @@ +import { EventSchemas } from "inngest"; + +interface DemoEventSent { + name: "demo/event.sent"; + data: { + message: string; + }; +} + +export const schemas = new EventSchemas().fromUnion(); diff --git a/examples/apps/framework-t3/src/pages/_app.tsx b/examples/apps/framework-t3/src/pages/_app.tsx new file mode 100644 index 000000000..279d2188e --- /dev/null +++ b/examples/apps/framework-t3/src/pages/_app.tsx @@ -0,0 +1,9 @@ +import { type AppType } from "next/app"; +import { api } from "~/utils/api"; +import "~/styles/globals.css"; + +const MyApp: AppType = ({ Component, pageProps }) => { + return ; +}; + +export default api.withTRPC(MyApp); diff --git a/examples/apps/framework-t3/src/pages/api/inngest.ts b/examples/apps/framework-t3/src/pages/api/inngest.ts new file mode 100644 index 000000000..f1af63b82 --- /dev/null +++ b/examples/apps/framework-t3/src/pages/api/inngest.ts @@ -0,0 +1,4 @@ +import { serve } from "inngest/next"; +import { functions, inngest } from "../../inngest"; + +export default serve(inngest, functions); diff --git a/examples/apps/framework-t3/src/pages/api/trpc/[trpc].ts b/examples/apps/framework-t3/src/pages/api/trpc/[trpc].ts new file mode 100644 index 000000000..6c53746bd --- /dev/null +++ b/examples/apps/framework-t3/src/pages/api/trpc/[trpc].ts @@ -0,0 +1,18 @@ +import { createNextApiHandler } from "@trpc/server/adapters/next"; +import { env } from "~/env.mjs"; +import { appRouter } from "~/server/api/root"; +import { createTRPCContext } from "~/server/api/trpc"; + +// export API handler +export default createNextApiHandler({ + router: appRouter, + createContext: createTRPCContext, + onError: + env.NODE_ENV === "development" + ? ({ path, error }) => { + console.error( + `❌ tRPC failed on ${path ?? ""}: ${error.message}` + ); + } + : undefined, +}); diff --git a/examples/apps/framework-t3/src/pages/index.module.css b/examples/apps/framework-t3/src/pages/index.module.css new file mode 100644 index 000000000..d9caeeaf2 --- /dev/null +++ b/examples/apps/framework-t3/src/pages/index.module.css @@ -0,0 +1,149 @@ +.main { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + background-image: linear-gradient(to bottom, #2e026d, #15162c); +} + +.container { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3rem; + padding: 4rem 1rem; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.title { + font-size: 3rem; + line-height: 1; + font-weight: 800; + letter-spacing: -0.025em; + margin: 0; + color: white; +} + +@media (min-width: 640px) { + .title { + font-size: 5rem; + } +} + +.pinkSpan { + color: hsl(280 100% 70%); +} + +.cardRow { + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: 1rem; +} + +@media (min-width: 640px) { + .cardRow { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (min-width: 768px) { + .cardRow { + gap: 2rem; + } +} + +.card { + max-width: 20rem; + display: flex; + flex-direction: column; + gap: 1rem; + padding: 1rem; + border-radius: 0.75rem; + color: white; + background-color: rgb(255 255 255 / 0.1); +} + +.card:hover { + background-color: rgb(255 255 255 / 0.2); + transition: background-color 150ms cubic-bezier(0.5, 0, 0.2, 1); +} + +.cardTitle { + font-size: 1.5rem; + line-height: 2rem; + font-weight: 700; + margin: 0; +} + +.cardText { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.showcaseContainer { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; +} + +.showcaseText { + color: white; + text-align: center; + font-size: 1.5rem; + line-height: 2rem; +} + +.authContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; +} + +.loginButton { + border-radius: 9999px; + background-color: rgb(255 255 255 / 0.1); + padding: 0.75rem 2.5rem; + font-weight: 600; + color: white; + text-decoration-line: none; + transition: background-color 150ms cubic-bezier(0.5, 0, 0.2, 1); +} + +.loginButton:hover { + background-color: rgb(255 255 255 / 0.2); +} diff --git a/examples/apps/framework-t3/src/pages/index.tsx b/examples/apps/framework-t3/src/pages/index.tsx new file mode 100644 index 000000000..2cda92c2e --- /dev/null +++ b/examples/apps/framework-t3/src/pages/index.tsx @@ -0,0 +1,52 @@ +import styles from "./index.module.css"; +import Head from "next/head"; +import Link from "next/link"; +import { api } from "~/utils/api"; + +export default function Home() { + const hello = api.example.hello.useQuery({ text: "from tRPC" }); + + return ( + <> + + Create T3 App + + + +
+
+

+ Create T3 App +

+
+ +

First Steps →

+
+ Just the basics - Everything you need to know to set up your + database and authentication. +
+ + +

Documentation →

+
+ Learn more about Create T3 App, the libraries it uses, and how + to deploy it. +
+ +
+

+ {hello.data ? hello.data.greeting : "Loading tRPC query..."} +

+
+
+ + ); +} diff --git a/examples/apps/framework-t3/src/server/api/root.ts b/examples/apps/framework-t3/src/server/api/root.ts new file mode 100644 index 000000000..7caea0fed --- /dev/null +++ b/examples/apps/framework-t3/src/server/api/root.ts @@ -0,0 +1,14 @@ +import { exampleRouter } from "~/server/api/routers/example"; +import { createTRPCRouter } from "~/server/api/trpc"; + +/** + * This is the primary router for your server. + * + * All routers added in /api/routers should be manually added here. + */ +export const appRouter = createTRPCRouter({ + example: exampleRouter, +}); + +// export type definition of API +export type AppRouter = typeof appRouter; diff --git a/examples/apps/framework-t3/src/server/api/routers/example.ts b/examples/apps/framework-t3/src/server/api/routers/example.ts new file mode 100644 index 000000000..df732786c --- /dev/null +++ b/examples/apps/framework-t3/src/server/api/routers/example.ts @@ -0,0 +1,12 @@ +import { z } from "zod"; +import { createTRPCRouter, publicProcedure } from "~/server/api/trpc"; + +export const exampleRouter = createTRPCRouter({ + hello: publicProcedure + .input(z.object({ text: z.string() })) + .query(({ input }) => { + return { + greeting: `Hello ${input.text}`, + }; + }), +}); diff --git a/examples/apps/framework-t3/src/server/api/trpc.ts b/examples/apps/framework-t3/src/server/api/trpc.ts new file mode 100644 index 000000000..3bda296a6 --- /dev/null +++ b/examples/apps/framework-t3/src/server/api/trpc.ts @@ -0,0 +1,92 @@ +/** + * YOU PROBABLY DON'T NEED TO EDIT THIS FILE, UNLESS: + * 1. You want to modify request context (see Part 1). + * 2. You want to create a new middleware or type of procedure (see Part 3). + * + * TL;DR - This is where all the tRPC server stuff is created and plugged in. The pieces you will + * need to use are documented accordingly near the end. + */ + +import { initTRPC } from "@trpc/server"; +import { type CreateNextContextOptions } from "@trpc/server/adapters/next"; +import superjson from "superjson"; +import { ZodError } from "zod"; + +/** + * 1. CONTEXT + * + * This section defines the "contexts" that are available in the backend API. + * + * These allow you to access things when processing a request, like the database, the session, etc. + */ + +type CreateContextOptions = Record; + +/** + * This helper generates the "internals" for a tRPC context. If you need to use it, you can export + * it from here. + * + * Examples of things you may need it for: + * - testing, so we don't have to mock Next.js' req/res + * - tRPC's `createSSGHelpers`, where we don't have req/res + * + * @see https://create.t3.gg/en/usage/trpc#-serverapitrpcts + */ +const createInnerTRPCContext = (_opts: CreateContextOptions) => { + return {}; +}; + +/** + * This is the actual context you will use in your router. It will be used to process every request + * that goes through your tRPC endpoint. + * + * @see https://trpc.io/docs/context + */ +export const createTRPCContext = (_opts: CreateNextContextOptions) => { + return createInnerTRPCContext({}); +}; + +/** + * 2. INITIALIZATION + * + * This is where the tRPC API is initialized, connecting the context and transformer. We also parse + * ZodErrors so that you get typesafety on the frontend if your procedure fails due to validation + * errors on the backend. + */ + +const t = initTRPC.context().create({ + transformer: superjson, + errorFormatter({ shape, error }) { + return { + ...shape, + data: { + ...shape.data, + zodError: + error.cause instanceof ZodError ? error.cause.flatten() : null, + }, + }; + }, +}); + +/** + * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT) + * + * These are the pieces you use to build your tRPC API. You should import these a lot in the + * "/src/server/api/routers" directory. + */ + +/** + * This is how you create new routers and sub-routers in your tRPC API. + * + * @see https://trpc.io/docs/router + */ +export const createTRPCRouter = t.router; + +/** + * Public (unauthenticated) procedure + * + * This is the base piece you use to build new queries and mutations on your tRPC API. It does not + * guarantee that a user querying is authorized, but you can still access user session data if they + * are logged in. + */ +export const publicProcedure = t.procedure; diff --git a/examples/apps/framework-t3/src/styles/globals.css b/examples/apps/framework-t3/src/styles/globals.css new file mode 100644 index 000000000..e5e2dcc23 --- /dev/null +++ b/examples/apps/framework-t3/src/styles/globals.css @@ -0,0 +1,16 @@ +html, +body { + padding: 0; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +* { + box-sizing: border-box; +} diff --git a/examples/apps/framework-t3/src/utils/api.ts b/examples/apps/framework-t3/src/utils/api.ts new file mode 100644 index 000000000..b2d5afd02 --- /dev/null +++ b/examples/apps/framework-t3/src/utils/api.ts @@ -0,0 +1,67 @@ +/** + * This is the client-side entrypoint for your tRPC API. It is used to create the `api` object which + * contains the Next.js App-wrapper, as well as your type-safe React Query hooks. + * + * We also create a few inference helpers for input and output types. + */ +import { httpBatchLink, loggerLink } from "@trpc/client"; +import { createTRPCNext } from "@trpc/next"; +import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server"; +import superjson from "superjson"; +import { type AppRouter } from "~/server/api/root"; + +const getBaseUrl = () => { + if (typeof window !== "undefined") return ""; // browser should use relative url + if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url + return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost +}; + +/** A set of type-safe react-query hooks for your tRPC API. */ +export const api = createTRPCNext({ + config() { + return { + /** + * Transformer used for data de-serialization from the server. + * + * @see https://trpc.io/docs/data-transformers + */ + transformer: superjson, + + /** + * Links used to determine request flow from client to server. + * + * @see https://trpc.io/docs/links + */ + links: [ + loggerLink({ + enabled: (opts) => + process.env.NODE_ENV === "development" || + (opts.direction === "down" && opts.result instanceof Error), + }), + httpBatchLink({ + url: `${getBaseUrl()}/api/trpc`, + }), + ], + }; + }, + /** + * Whether tRPC should await queries when server rendering pages. + * + * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false + */ + ssr: false, +}); + +/** + * Inference helper for inputs. + * + * @example type HelloInput = RouterInputs['example']['hello'] + */ +export type RouterInputs = inferRouterInputs; + +/** + * Inference helper for outputs. + * + * @example type HelloOutput = RouterOutputs['example']['hello'] + */ +export type RouterOutputs = inferRouterOutputs; diff --git a/examples/apps/framework-t3/tsconfig.json b/examples/apps/framework-t3/tsconfig.json new file mode 100644 index 000000000..03ebb748a --- /dev/null +++ b/examples/apps/framework-t3/tsconfig.json @@ -0,0 +1,33 @@ +{ + "compilerOptions": { + "target": "es2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "checkJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "noUncheckedIndexedAccess": true, + "baseUrl": ".", + "paths": { + "~/*": ["./src/*"] + } + }, + "include": [ + ".eslintrc.cjs", + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + "**/*.cjs", + "**/*.mjs" + ], + "exclude": ["node_modules"] +}