wip

Author: kentcdodds

.gitignore

@@ -13,3 +13,5 @@ data.db
 # file as well, but since this is for a workshop
 # we're going to keep them around.
 # .env
+dist
+.wrangler

epicshop/epic-me/.gitignore

@@ -0,0 +1,17 @@
+.DS_Store
+/node_modules/
+*.tsbuildinfo
+
+# React Router
+/.react-router/
+/build/
+
+# Cloudflare
+.mf
+.wrangler
+.dev.vars*
+
+
+!.dev.vars.example
+.env*
+!.env.example

epicshop/epic-me/.npmrc

@@ -0,0 +1,2 @@
+legacy-peer-deps=true
+registry=https://registry.npmjs.org/

epicshop/epic-me/.prettierignore

@@ -0,0 +1,14 @@
+node_modules
+dist
+build
+.next
+.vercel
+.netlify
+coverage
+*.log
+.env*
+!.env.example
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+**/worker-configuration.d.ts

epicshop/epic-me/README.md

@@ -0,0 +1,95 @@
+# Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications
+using React Router.
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+> Note: Wrangler and the Cloudflare Vite plugin now support dotenv files for local development.
+> Create a `.env` in this app's root (alongside `wrangler.jsonc`) to define local `vars`.
+> For example:
+>
+> ```dotenv
+> TITLE="My Worker"
+> API_TOKEN="dev-token"
+> ```
+>
+> These will be available on `context.cloudflare.env.TITLE` / `env.API_TOKEN` in worker code during `wrangler dev`.
+> You can also add `.env.<environment>` files (e.g. `.env.staging`) and run `wrangler dev --env staging`.
+
+## Previewing the Production Build
+
+Preview the production build locally:
+
+```bash
+npm run preview
+```
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+Deployment is done using the Wrangler CLI.
+
+To build and deploy directly to production:
+
+```sh
+npm run deploy
+```
+
+To deploy a preview URL:
+
+```sh
+npx wrangler versions upload
+```
+
+You can then promote a version to production after verification or roll it out
+progressively.
+
+```sh
+npx wrangler versions deploy
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already
+configured for a simple default starting experience. You can use whatever CSS
+framework you prefer.
+
+---
+
+Built with ❤️ using React Router.

epicshop/epic-me/app/app.css

@@ -0,0 +1,16 @@
+@import 'tailwindcss' source('.');
+
+@theme {
+	--font-sans:
+		'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+html,
+body {
+	@apply bg-white dark:bg-gray-950;
+
+	@media (prefers-color-scheme: dark) {
+		color-scheme: dark;
+	}
+}

epicshop/epic-me/app/entry.server.tsx

@@ -0,0 +1,46 @@
+import { isbot } from 'isbot'
+import { renderToReadableStream } from 'react-dom/server'
+import {
+	type AppLoadContext,
+	type EntryContext,
+	ServerRouter,
+} from 'react-router'
+
+export default async function handleRequest(
+	request: Request,
+	responseStatusCode: number,
+	responseHeaders: Headers,
+	routerContext: EntryContext,
+	_loadContext: AppLoadContext,
+) {
+	let shellRendered = false
+	const userAgent = request.headers.get('user-agent')
+
+	const body = await renderToReadableStream(
+		<ServerRouter context={routerContext} url={request.url} />,
+		{
+			onError(error: unknown) {
+				responseStatusCode = 500
+				// Log streaming rendering errors from inside the shell.  Don't log
+				// errors encountered during initial shell rendering since they'll
+				// reject and get logged in handleDocumentRequest.
+				if (shellRendered) {
+					console.error(error)
+				}
+			},
+		},
+	)
+	shellRendered = true
+
+	// Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+	// https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+	if ((userAgent && isbot(userAgent)) || routerContext.isSpaMode) {
+		await body.allReady
+	}
+
+	responseHeaders.set('Content-Type', 'text/html')
+	return new Response(body, {
+		headers: responseHeaders,
+		status: responseStatusCode,
+	})
+}

epicshop/epic-me/app/root.tsx

@@ -0,0 +1,75 @@
+import {
+	isRouteErrorResponse,
+	Links,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration,
+} from 'react-router'
+
+import { type Route } from './+types/root'
+import './app.css'
+
+export const links: Route.LinksFunction = () => [
+	{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+	{
+		rel: 'preconnect',
+		href: 'https://fonts.gstatic.com',
+		crossOrigin: 'anonymous',
+	},
+	{
+		rel: 'stylesheet',
+		href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+	},
+]
+
+export function Layout({ children }: { children: React.ReactNode }) {
+	return (
+		<html lang="en">
+			<head>
+				<meta charSet="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<Meta />
+				<Links />
+			</head>
+			<body>
+				{children}
+				<ScrollRestoration />
+				<Scripts />
+			</body>
+		</html>
+	)
+}
+
+export default function App() {
+	return <Outlet />
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+	let message = 'Oops!'
+	let details = 'An unexpected error occurred.'
+	let stack: string | undefined
+
+	if (isRouteErrorResponse(error)) {
+		message = error.status === 404 ? '404' : 'Error'
+		details =
+			error.status === 404
+				? 'The requested page could not be found.'
+				: error.statusText || details
+	} else if (import.meta.env.DEV && error && error instanceof Error) {
+		details = error.message
+		stack = error.stack
+	}
+
+	return (
+		<main className="container mx-auto p-4 pt-16">
+			<h1>{message}</h1>
+			<p>{details}</p>
+			{stack && (
+				<pre className="w-full overflow-x-auto p-4">
+					<code>{stack}</code>
+				</pre>
+			)}
+		</main>
+	)
+}

epicshop/epic-me/app/routes.ts

@@ -0,0 +1,10 @@
+import { type RouteConfig, index, route } from '@react-router/dev/routes'
+
+export default [
+	index('routes/index.tsx'),
+	route('/authorize', 'routes/authorize.tsx'),
+	route('/healthcheck', 'routes/healthcheck.tsx'),
+	route('/db-api', 'routes/db-api.tsx'),
+	route('/introspect', 'routes/introspect.tsx'),
+	route('/test-auth', 'routes/test-auth.tsx'),
+] satisfies RouteConfig