) {
+ return (
+
+
+ )
+}
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+}
diff --git a/starters/react-shadcn/src/client/context.ts b/starters/react-shadcn/src/client/context.ts
new file mode 100644
index 00000000..3ef02b2f
--- /dev/null
+++ b/starters/react-shadcn/src/client/context.ts
@@ -0,0 +1,43 @@
+// Thin layer on top of fetch()
+// to automatically perform JSON requests
+import { sendJSON } from '/fetch.ts'
+
+// The default export function runs exactly once on
+// the server and once on the client during the
+// first render, that is, it's not executed again
+// in subsquent client-side navigation via React Router.
+export default (ctx) => {
+ if (ctx.server) {
+ ctx.state.todoList = ctx.server.db.todoList
+ }
+}
+
+// State initializer, must be a function called state
+// as this is a special context.js export and has
+// special processing, e.g., serialization and hydration
+export function state () {
+ return {
+ user: {
+ authenticated: false,
+ },
+ todoList: null,
+ }
+}
+
+// Grouped actions that operate on the state. This export
+// could be named anything, no special processing involved.
+export const actions = {
+ authenticate (state) {
+ state.user.authenticated = true
+ },
+ todoList: {
+ async add (state, item) {
+ await sendJSON('/api/todo/items', { method: 'put', json: item })
+ state.todoList.push(item)
+ },
+ async remove (state, index) {
+ await sendJSON('/api/todo/items', { method: 'delete', json: index })
+ state.todoList.splice(index, 1)
+ },
+ }
+}
diff --git a/starters/react-shadcn/src/client/fetch.ts b/starters/react-shadcn/src/client/fetch.ts
new file mode 100644
index 00000000..e1fe09ad
--- /dev/null
+++ b/starters/react-shadcn/src/client/fetch.ts
@@ -0,0 +1,15 @@
+// This method is only used on the client, assuming the
+// requests are made to the current location, so no base
+// URL configuration is needed in this example.
+
+export function sendJSON (path, options) {
+ return fetch(path, {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ ...options.json && {
+ body: JSON.stringify(options.json),
+ },
+ ...options
+ })
+}
diff --git a/starters/react-shadcn/src/client/index.css b/starters/react-shadcn/src/client/index.css
new file mode 100644
index 00000000..560a99f3
--- /dev/null
+++ b/starters/react-shadcn/src/client/index.css
@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.922 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
+
+@import "./base.css";
diff --git a/starters/react-shadcn/src/client/index.html b/starters/react-shadcn/src/client/index.html
new file mode 100644
index 00000000..910829d2
--- /dev/null
+++ b/starters/react-shadcn/src/client/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/starters/react-shadcn/src/client/layouts/auth.jsx b/starters/react-shadcn/src/client/layouts/auth.jsx
new file mode 100644
index 00000000..a047b707
--- /dev/null
+++ b/starters/react-shadcn/src/client/layouts/auth.jsx
@@ -0,0 +1,25 @@
+import { Suspense } from 'react'
+import { useRouteContext } from '@fastify/react/client'
+
+export default function Auth ({ children }) {
+ const { actions, state, snapshot } = useRouteContext()
+ const authenticate = () => actions.authenticate(state)
+ return (
+
+ {snapshot.user.authenticated
+ ? children
+ : authenticate()} /> }
+
+ )
+}
+
+function Login ({ onClick }) {
+ return (
+ <>
+ This route needs authentication.
+
+ Click this button to authenticate.
+
+
+ )
+}
\ No newline at end of file
diff --git a/starters/react-shadcn/src/client/layouts/default.jsx b/starters/react-shadcn/src/client/layouts/default.jsx
new file mode 100644
index 00000000..604b629d
--- /dev/null
+++ b/starters/react-shadcn/src/client/layouts/default.jsx
@@ -0,0 +1,9 @@
+import { Suspense } from 'react'
+
+export default function Default ({ children }) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/starters/react-shadcn/src/client/lib/utils.ts b/starters/react-shadcn/src/client/lib/utils.ts
new file mode 100644
index 00000000..bd0c391d
--- /dev/null
+++ b/starters/react-shadcn/src/client/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/starters/react-shadcn/src/client/pages/actions/data.tsx b/starters/react-shadcn/src/client/pages/actions/data.tsx
new file mode 100644
index 00000000..f6e4db6c
--- /dev/null
+++ b/starters/react-shadcn/src/client/pages/actions/data.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+import { createServerAction, useServerAction } from '$app/core.jsx'
+
+const accessCounter = createServerAction()
+
+export function configure (server) {
+ let counter = 0
+ server.get(accessCounter, (_, reply) => {
+ reply.send({ counter: ++counter })
+ })
+}
+
+export default function Form () {
+ // useServerAction(endpoint) acts a React suspense resource,
+ // with the exception that data is retrieved only once per
+ // route and cleared only when the user navigates to another route.
+ const data = useServerAction(accessCounter)
+ const [counter, setCounter] = useState(data.counter)
+
+ // Just use endpoint string to retrieve fresh data on-demand
+ const incrementCounter = async () => {
+ const request = await fetch(accessCounter)
+ const data = await request.json(0)
+ setCounter(data.counter)
+ }
+
+ return (
+ <>
+ Using inline server GET handler
+ useServerAction(endpoint) acts a React Suspense resource,
+ with the exception that data is retrieved only once per
+ route and cleared only when the user navigates to another route.
+ Counter: {counter}
+
+
+
+ )
+}
diff --git a/starters/react-shadcn/src/client/pages/actions/form.tsx b/starters/react-shadcn/src/client/pages/actions/form.tsx
new file mode 100644
index 00000000..cd72394f
--- /dev/null
+++ b/starters/react-shadcn/src/client/pages/actions/form.tsx
@@ -0,0 +1,33 @@
+import { Link } from 'react-router'
+import { createServerAction } from '$app/core.jsx'
+
+const isAdmin = createServerAction()
+
+export function configure (server) {
+ server.post(isAdmin, async (req, reply) => {
+ await new Promise((resolve, reject) => {
+ setTimeout(resolve, 1000)
+ })
+ const username = req.body.username
+ if (username === 'admin') {
+ return reply.redirect('/admin')
+ }
+ return new Error('Invalid username')
+ })
+}
+
+export default function Form () {
+ return (
+ <>
+ Using inline server POST handler
+
+
+
+
+ )
+}
diff --git a/starters/react-shadcn/src/client/pages/client-only.tsx b/starters/react-shadcn/src/client/pages/client-only.tsx
new file mode 100644
index 00000000..e8e6424d
--- /dev/null
+++ b/starters/react-shadcn/src/client/pages/client-only.tsx
@@ -0,0 +1,32 @@
+import { Link } from 'react-router'
+import { useHead } from '@unhead/react'
+
+export const clientOnly = true
+
+export function getMeta () {
+ return {
+ title: 'Client Only Page'
+ }
+}
+
+export default function ClientOnly () {
+ useHead({
+ meta: [
+ {
+ name: 'description',
+ content: 'More head updates!'
+ }
+ ]
+ })
+ return (
+ <>
+ This route is rendered on the client only!
+
+
+ ⁂
+ When this route is rendered on the server, no SSR takes place.
+ See the output of curl http://localhost:3000/client-only.
+
+ )
+}
diff --git a/starters/react-shadcn/src/client/pages/form/[id].tsx b/starters/react-shadcn/src/client/pages/form/[id].tsx
new file mode 100644
index 00000000..5483e4ae
--- /dev/null
+++ b/starters/react-shadcn/src/client/pages/form/[id].tsx
@@ -0,0 +1,31 @@
+
+import { useRouteContext } from '@fastify/react/client'
+
+export function getData ({ req, reply }) {
+ if (req.method === 'POST') {
+ if (req.body.number !== '42') {
+ return reply.redirect('/')
+ }
+ return req.body
+ } else {
+ return {
+ number: ''
+ }
+ }
+}
+
+export default function Form () {
+ const { data } = useRouteContext()
+ return (
+ <>
+ Form example with dynamic URL
+
+
+ )
+}
diff --git a/starters/react-shadcn/src/client/pages/index.tsx b/starters/react-shadcn/src/client/pages/index.tsx
new file mode 100644
index 00000000..c77b76e2
--- /dev/null
+++ b/starters/react-shadcn/src/client/pages/index.tsx
@@ -0,0 +1,35 @@
+import logo from '/assets/logo.svg'
+import { Link } from 'react-router'
+import { useRouteContext } from '@fastify/react/client'
+
+export function getMeta () {
+ return {
+ title: 'Welcome to @fastify/react!'
+ }
+}
+
+export default function Index () {
+ const { snapshot, state } = useRouteContext()
+ if (import.meta.env.SSR) {
+ // State is automatically hydrated on the client
+ state.message = 'Welcome to @fastify/react!'
+ }
+ return (
+ <>
+ {snapshot.message}
+
+ Valtio store.custom layout .POST to dynamic route.GET handler.POST handler.disabling SSR.0kb JavaScript.streaming SSR.wildcard route matching /wildcard/*
+
+ )
+}
diff --git a/starters/react-shadcn/src/client/pages/server-only.tsx b/starters/react-shadcn/src/client/pages/server-only.tsx
new file mode 100644
index 00000000..6baebf11
--- /dev/null
+++ b/starters/react-shadcn/src/client/pages/server-only.tsx
@@ -0,0 +1,17 @@
+import { Link } from 'react-router'
+
+export const serverOnly = true
+
+export default function ServerOnly () {
+ return (
+ <>
+ This route is rendered on the server only!
+
+
+ ⁂
+ When this route is rendered on the server, no JavaScript is sent to the client.
+ See the output of curl http://localhost:3000/server-only.
+
+ )
+}
diff --git a/starters/react-shadcn/src/client/pages/streaming.tsx b/starters/react-shadcn/src/client/pages/streaming.tsx
new file mode 100644
index 00000000..042357cb
--- /dev/null
+++ b/starters/react-shadcn/src/client/pages/streaming.tsx
@@ -0,0 +1,46 @@
+import { Suspense } from 'react'
+
+export const streaming = true
+
+export default function Index () {
+ return (
+ Waiting for content}>
+
+ )
+}
+
+function Message () {
+ const message = afterSeconds({
+ id: 'index',
+ message: 'Delayed by Suspense API',
+ seconds: 5
+ })
+ return {message}
+}
+
+const delays = new Map()
+
+function afterSeconds ({ id, message, seconds }) {
+ const delay = delays.get(id)
+ if (delay) {
+ if (delay.message) {
+ delays.delete(id)
+ return delay.message
+ }
+ if (delay.promise) {
+ throw delay.promise
+ }
+ } else {
+ delays.set(id, {
+ message: null,
+ promise: new Promise((resolve) => {
+ setTimeout(() => {
+ delays.get(id).message = message
+ resolve()
+ }, seconds * 1000)
+ })
+ })
+ return afterSeconds({ id, message })
+ }
+}
diff --git a/starters/react-shadcn/src/client/pages/using-auth.tsx b/starters/react-shadcn/src/client/pages/using-auth.tsx
new file mode 100644
index 00000000..5930454e
--- /dev/null
+++ b/starters/react-shadcn/src/client/pages/using-auth.tsx
@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+import { useRouteContext } from '@fastify/react/client'
+
+export const layout = 'auth'
+
+export function getMeta () {
+ return { title: 'Using Custom Layout' }
+}
+
+export default function Index (props) {
+ const {snapshot, state, actions} = useRouteContext()
+ const [input, setInput] = useState(null)
+ const addItem = async (value) => {
+ await actions.todoList.add(state, value)
+ input.value = ''
+ }
+ return (
+ <>
+ Todo List — Using Custom Layout
+ {
+ snapshot.todoList.map((item, i) => {
+ return {item}
+ })
+ }
+
+ addItem(input.value)}>Add
+
+
+
+ ⁂
+ This example is exactly the same as user.authenticated is true in the global state.
+
+ )
+}
diff --git a/starters/react-shadcn/src/client/pages/using-data.tsx b/starters/react-shadcn/src/client/pages/using-data.tsx
new file mode 100644
index 00000000..a346d6a2
--- /dev/null
+++ b/starters/react-shadcn/src/client/pages/using-data.tsx
@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+import { useRouteContext } from '@fastify/react/client'
+
+export function getMeta () {
+ return { title: 'Todo List — Using Data' }
+}
+
+export function getData ({ server }) {
+ return {
+ todoList: server.db.todoList
+ }
+}
+
+export default function Index (props) {
+ const {data} = useRouteContext()
+ const [todoList, updateTodoList] = useState(data.todoList)
+ const [input, setInput] = useState(null)
+ const addItem = (value) => {
+ updateTodoList(list => [...list, value])
+ input.value = ''
+ }
+ return (
+ <>
+ Todo List — Using Data
+ {
+ todoList.map((item, i) => {
+ return {item}
+ })
+ }
+
+ addItem(input.value)}>Add
+
+
+
+ ⁂
+ When you navigate away from this route, any additions to the to-do
+ list will be lost, because they're bound to this route component only.
+ See the
+
+ )
+}
diff --git a/starters/react-shadcn/src/client/pages/using-store.tsx b/starters/react-shadcn/src/client/pages/using-store.tsx
new file mode 100644
index 00000000..2d625c03
--- /dev/null
+++ b/starters/react-shadcn/src/client/pages/using-store.tsx
@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+import { useRouteContext } from '@fastify/react/client'
+
+export function getMeta () {
+ return { title: 'Todo List — Using Store' }
+}
+
+export default function Index (props) {
+ const {snapshot, state, actions} = useRouteContext()
+ const [input, setInput] = useState(null)
+ const addItem = async (value) => {
+ await actions.todoList.add(state, value)
+ input.value = ''
+ }
+ return (
+ <>
+ Todo List — Using Store
+ {
+ snapshot.todoList.map((item, i) => {
+ return {item}
+ })
+ }
+
+ addItem(input.value)}>Add
+
+
+
+ ⁂
+ When you navigate away from this route, any additions to the to-do
+ list are not lost, because they're bound to the global application state.
+
+ )
+}
diff --git a/starters/react-shadcn/src/client/pages/wildcard/[slug+].tsx b/starters/react-shadcn/src/client/pages/wildcard/[slug+].tsx
new file mode 100644
index 00000000..441f67f0
--- /dev/null
+++ b/starters/react-shadcn/src/client/pages/wildcard/[slug+].tsx
@@ -0,0 +1,22 @@
+import { useRouteContext } from '@fastify/react/client'
+
+export function getData ({ req }) {
+ let pathMatch = req.params['*'];
+ if (pathMatch.charAt(pathMatch.length - 1) == '/') {
+ pathMatch = pathMatch.substr(0, pathMatch.length - 1);
+ }
+
+ return {
+ pathMatch: pathMatch.split('/'),
+ }
+}
+
+export default function Wildcard () {
+ const { data } = useRouteContext()
+ return (
+ <>
+ Wildcard example that matches /wildcard/*
+ Path match: { data.pathMatch }
+
+ )
+}
diff --git a/starters/react-shadcn/src/client/pages/with-shadcn.tsx b/starters/react-shadcn/src/client/pages/with-shadcn.tsx
new file mode 100644
index 00000000..6aeabdde
--- /dev/null
+++ b/starters/react-shadcn/src/client/pages/with-shadcn.tsx
@@ -0,0 +1,74 @@
+
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+
+export default function SelectScrollable() {
+ return (
+
+
+
+
+
+ North America
+ Eastern Standard Time (EST)
+ Central Standard Time (CST)
+ Mountain Standard Time (MST)
+ Pacific Standard Time (PST)
+ Alaska Standard Time (AKST)
+ Hawaii Standard Time (HST)
+
+
+ Europe & Africa
+ Greenwich Mean Time (GMT)
+ Central European Time (CET)
+ Eastern European Time (EET)
+
+ Western European Summer Time (WEST)
+
+ Central Africa Time (CAT)
+ East Africa Time (EAT)
+
+
+ Asia
+ Moscow Time (MSK)
+ India Standard Time (IST)
+ China Standard Time (CST)
+ Japan Standard Time (JST)
+ Korea Standard Time (KST)
+
+ Indonesia Central Standard Time (WITA)
+
+
+
+ Australia & Pacific
+
+ Australian Western Standard Time (AWST)
+
+
+ Australian Central Standard Time (ACST)
+
+
+ Australian Eastern Standard Time (AEST)
+
+ New Zealand Standard Time (NZST)
+ Fiji Time (FJT)
+
+
+ South America
+ Argentina Time (ART)
+ Bolivia Time (BOT)
+ Brasilia Time (BRT)
+ Chile Standard Time (CLT)
+
+
+
+ )
+}
diff --git a/starters/react-shadcn/src/client/root.tsx b/starters/react-shadcn/src/client/root.tsx
new file mode 100644
index 00000000..81ed5a24
--- /dev/null
+++ b/starters/react-shadcn/src/client/root.tsx
@@ -0,0 +1,27 @@
+import { Suspense } from 'react'
+import { Routes, Route } from 'react-router'
+import { Router, AppRoute } from '$app/core.tsx'
+
+export default function Root ({ url, routes, head, ctxHydration, routeMap }) {
+ return (
+
+
+ {
+ routes.map(({ path, component: Component }) =>
+
+
+
+
+ )
+}
diff --git a/starters/react-shadcn/src/server.ts b/starters/react-shadcn/src/server.ts
new file mode 100644
index 00000000..88e9c049
--- /dev/null
+++ b/starters/react-shadcn/src/server.ts
@@ -0,0 +1,52 @@
+import { resolve } from 'node:path'
+import Fastify from 'fastify'
+import FastifyVite from '@fastify/vite'
+import FastifyFormBody from '@fastify/formbody'
+interface Database {
+ todoList: string[]
+}
+
+const server = Fastify({
+ logger: {
+ transport: {
+ target: '@fastify/one-line-logger'
+ }
+ }
+})
+
+await server.register(FastifyFormBody)
+
+await server.register(FastifyVite, {
+ // TODO handle via CLI path argument with proper resolve
+ root: resolve(import.meta.dirname, '..'),
+ distDir: import.meta.dirname, // This file will also live in the dist folder when built
+ renderer: '@fastify/react',
+})
+
+await server.vite.ready()
+
+server.decorate('db', {
+ todoList: [
+ 'Do laundry',
+ 'Respond to emails',
+ 'Write report',
+ ]
+})
+
+server.put<{
+ Body: string
+}>('/api/todo/items', (req, reply) => {
+ const db = server.getDecorator('db')
+ db.todoList.push(req.body)
+ reply.send({ ok: true })
+})
+
+server.delete<{
+ Body: number
+}>('/api/todo/items', (req, reply) => {
+ const db = server.getDecorator('db')
+ db.todoList.splice(req.body, 1)
+ reply.send({ ok: true })
+})
+
+await server.listen({ port: 3000 })
diff --git a/starters/react-shadcn/tsconfig.app.json b/starters/react-shadcn/tsconfig.app.json
new file mode 100644
index 00000000..4e332dba
--- /dev/null
+++ b/starters/react-shadcn/tsconfig.app.json
@@ -0,0 +1,37 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Shadcn */
+ "baseUrl": "./src/client/",
+ "paths": {
+ "@/*": [
+ "./src/client/*"
+ ]
+ },
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+
+ "include": ["src/client"],
+ "exclude": ["src/client/**/*", "src/**/*.test.ts"]
+}
diff --git a/starters/react-shadcn/tsconfig.json b/starters/react-shadcn/tsconfig.json
new file mode 100644
index 00000000..7c5fc8c3
--- /dev/null
+++ b/starters/react-shadcn/tsconfig.json
@@ -0,0 +1,38 @@
+{
+ "compilerOptions": {
+ "allowJs": false,
+ "allowSyntheticDefaultImports": true,
+ "checkJs": false,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "incremental": true,
+ "isolatedModules": true,
+ "lib": ["ESNext"],
+ "module": "NodeNext",
+ "moduleResolution": "NodeNext",
+ "outDir": "dist",
+ "noFallthroughCasesInSwitch": true,
+ "noUnusedLocals": true,
+ "removeComments": true,
+ "resolveJsonModule": true,
+ "rootDir": "src",
+ "skipLibCheck": true,
+ "sourceMap": true,
+ "strict": true,
+ "target": "ESNext",
+ "verbatimModuleSyntax": true,
+ /* Shadcn */
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/client/*"]
+ }
+ },
+ "references": [
+ {
+ "path": "./tsconfig.app.json"
+ },
+ {
+ "path": "./tsconfig.node.json"
+ }
+ ]
+}
diff --git a/starters/react-shadcn/tsconfig.node.json b/starters/react-shadcn/tsconfig.node.json
new file mode 100644
index 00000000..14fe7204
--- /dev/null
+++ b/starters/react-shadcn/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2022",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
\ No newline at end of file
diff --git a/starters/react-shadcn/vite.config.ts b/starters/react-shadcn/vite.config.ts
new file mode 100644
index 00000000..a2f2d8b6
--- /dev/null
+++ b/starters/react-shadcn/vite.config.ts
@@ -0,0 +1,25 @@
+import { join } from 'path'
+
+import viteReact from '@vitejs/plugin-react'
+import viteFastifyReact from '@fastify/react/plugin'
+import tailwindcss from '@tailwindcss/vite'
+
+export default {
+ root: join(import.meta.dirname, 'src', 'client'),
+ build: {
+ emptyOutDir: true,
+ outDir: join(import.meta.dirname, 'dist'),
+ },
+ plugins: [
+ tailwindcss(),
+ viteReact(),
+ viteFastifyReact({
+ ts: true
+ }),
+ ],
+ resolve: {
+ alias: {
+ '@': join(import.meta.dirname, 'src', 'client'),
+ },
+ },
+}