Skip to content

Commit

Permalink
feat: adopt Remix
Browse files Browse the repository at this point in the history
  • Loading branch information
windchime-yk committed Nov 3, 2024
1 parent c634fd0 commit df18c2f
Show file tree
Hide file tree
Showing 22 changed files with 6,302 additions and 596 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# prod
dist/
build/

# dev
.yarn/
Expand Down
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ TiDB ServerlessとPrismaツール群を利用して、DB周りを楽したい
- [x] Seedデータの反映スクリプトを作成
- [x] シネログの新しいスキーマを反映し、移行ファイルを生成
- [x] HonoでREST APIを構築し、CRUDを構築
- [x] Remixでアプリケーションを構築し、REST APIを利用
- [ ] Prisma Accelerateを適用

## 参考資料
Expand Down
18 changes: 18 additions & 0 deletions app/entry.client.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* By default, Remix will handle hydrating your app on the client for you.
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
* For more information, see https://remix.run/file-conventions/entry.client
*/

import { RemixBrowser } from "@remix-run/react";
import { StrictMode, startTransition } from "react";
import { hydrateRoot } from "react-dom/client";

startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
</StrictMode>,
);
});
56 changes: 56 additions & 0 deletions app/entry.server.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/**
* By default, Remix will handle generating the HTTP Response for you.
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
* For more information, see https://remix.run/file-conventions/entry.server
*/

import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
import { RemixServer } from "@remix-run/react";
import { isbot } from "isbot";
import { renderToReadableStream } from "react-dom/server";

const ABORT_DELAY = 5000;

export default async function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
// This is ignored so we can keep it in the template for visibility. Feel
// free to delete this parameter in your app if you're not using it!
// eslint-disable-next-line @typescript-eslint/no-unused-vars
loadContext: AppLoadContext,
) {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), ABORT_DELAY);

const body = await renderToReadableStream(
<RemixServer
context={remixContext}
url={request.url}
abortDelay={ABORT_DELAY}
/>,
{
signal: controller.signal,
onError(error: unknown) {
if (!controller.signal.aborted) {
// Log streaming rendering errors from inside the shell
console.error(error);
}
responseStatusCode = 500;
},
},
);

body.allReady.then(() => clearTimeout(timeoutId));

if (isbot(request.headers.get("user-agent") || "")) {
await body.allReady;
}

responseHeaders.set("Content-Type", "text/html");
return new Response(body, {
headers: responseHeaders,
status: responseStatusCode,
});
}
45 changes: 45 additions & 0 deletions app/root.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import type { LinksFunction } from "@remix-run/cloudflare";
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";

import "./tailwind.css";

export const links: 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="ja">
<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 />;
}
37 changes: 37 additions & 0 deletions app/routes/_index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import type { MetaFunction } from "@remix-run/cloudflare";
import type { AppType } from "../../server";
import {hc} from 'hono/client';
import { useLoaderData } from "@remix-run/react";

export const meta: MetaFunction = () => {
return [
{ title: "New Remix App" },
{ name: "description", content: "Welcome to Remix!" },
];
};

export const loader = async () => {
const client = hc<AppType>('http://localhost:5173');
const res = await client.api.movie.$get();
const movies = await res.json();
return movies;
}

export default function Index() {
const movies = useLoaderData<typeof loader>();

return (
<html lang="ja">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1 className="text-3xl font-bold underline">Hello World</h1>
<ul>
{movies.map((movie) => (<li key={movie.id}>{movie.title}</li>))}
</ul>
</body>
</html>
);
}
12 changes: 12 additions & 0 deletions app/tailwind.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
@apply bg-white dark:bg-gray-950;

@media (prefers-color-scheme: dark) {
color-scheme: dark;
}
}
5 changes: 5 additions & 0 deletions functions/[[path]].ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import handle from 'hono-remix-adapter/cloudflare-pages'
import * as build from '../build/server'
import server from '../server'

export const onRequest = handle(build, server)
9 changes: 9 additions & 0 deletions load-context.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import type { PlatformProxy } from "wrangler";

type Cloudflare = Omit<PlatformProxy<Env>, "dispose">;

declare module "@remix-run/cloudflare" {
interface AppLoadContext {
cloudflare: Cloudflare;
}
}
32 changes: 29 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
{
"private": true,
"sideEffects": false,
"type": "module",
"scripts": {
"dev": "wrangler dev",
"deploy": "wrangler deploy --minify",
"dev": "remix vite:dev",
"build": "remix vite:build",
"deploy": "pnpm run build && wrangler pages deploy",
"start": "wrangler pages dev ./build/client",
"typecheck": "tsc",
"typegen": "wrangler types",
"preview": "pnpm run build && wrangler pages dev",
"cf-typegen": "wrangler types",
"check": "biome check --unsafe .",
"format": "pnpm check --write",
"prepare": "pnpm db:generate",
Expand All @@ -16,15 +25,32 @@
"devDependencies": {
"@biomejs/biome": "^1.8.3",
"@cloudflare/workers-types": "^4.20241022.0",
"@hono/vite-dev-server": "^0.16.0",
"@remix-run/dev": "^2.13.1",
"@types/node": "^22.8.4",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"autoprefixer": "^10.4.19",
"hono-remix-adapter": "^0.3.0",
"postcss": "^8.4.38",
"prisma": "^5.21.1",
"tailwindcss": "^3.4.4",
"tsx": "^4.19.2",
"typescript": "^5.1.6",
"vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1",
"wrangler": "^3.83.0"
},
"dependencies": {
"@prisma/client": "^5.21.1",
"@remix-run/cloudflare": "^2.13.1",
"@remix-run/cloudflare-pages": "^2.13.1",
"@remix-run/react": "^2.13.1",
"@tidbcloud/prisma-adapter": "^5.20.0",
"@tidbcloud/serverless": "^0.2.0",
"hono": "^4.6.8"
"hono": "^4.6.8",
"isbot": "^4.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
Loading

0 comments on commit df18c2f

Please sign in to comment.