init

2022-04-07 10:01:20 -04:00
commit 6781fd5fdb
21 changed files with 17230 additions and 0 deletions
--- a/app/entry.client.tsx
+++ b/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { RemixBrowser } from "@remix-run/react";
+import { hydrate } from "react-dom";
+
+hydrate(<RemixBrowser />, document);
--- a/app/entry.server.tsx
+++ b/app/entry.server.tsx
@@ -0,0 +1,22 @@
+import 'dotenv/config'
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  let markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -0,0 +1,32 @@
+import type { MetaFunction } from "@remix-run/node";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  title: "New Remix App",
+  viewport: "width=device-width,initial-scale=1",
+});
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -0,0 +1,30 @@
+
+import type { LoaderFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import type { Note } from "@prisma/client";
+
+import { db } from "~/utils/db.server";
+
+type LoaderData = { notes: Array<Note> };
+
+export const loader: LoaderFunction = async () => {
+  const data: LoaderData = {
+    notes: await db.note.findMany(),
+  };
+  return json(data);
+};
+export default function Index() {
+  const data = useLoaderData<LoaderData>();
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+      <h1>Welcome to Remix Heroku</h1>
+      <p> Notes: </p>
+      <ul>
+        {data.notes.map(({ id, name }) => ( <li key={name}>id: {id} name: {name}</li>))}
+      </ul>
+      
+      
+    </div>
+  );
+}
--- a/app/utils/db.server.ts
+++ b/app/utils/db.server.ts
@@ -0,0 +1,21 @@
+import { PrismaClient } from "@prisma/client";
+
+let db: PrismaClient;
+
+declare global {
+  var __db: PrismaClient | undefined;
+}
+
+// this is needed because in development we don't want to restart
+// the server with every change, but we want to make sure we don't
+// create a new connection to the DB with every change either.
+if (process.env.NODE_ENV === "production") {
+  db = new PrismaClient();
+} else {
+  if (!global.__db) {
+    global.__db = new PrismaClient();
+  }
+  db = global.__db;
+}
+
+export { db };