init

kentcdodds · May 5, 2022 · 12debe2 · 12debe2
commit 12debe2
Show file tree

Hide file tree

Showing 18 changed files with 22,579 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/node"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+# React Router + Remix
+
+This is an example of how you can incrementally migrate to Remix if you're using React Router. Here's the basic idea:
+
+1. Upgrade your React Router site to the latest version of React Router ([find out how to do this iteratively](https://www.npmjs.com/package/react-router-dom-v5-compat)).
+2. Install Remix and set up the conventional files of `app/{root,entry.client,entry.server}.tsx`
+3. Move all your existing code into a directory within the `app` directory (like `app/old-app` for example).
+4. Remove `<BrowserRouter>` from your `App`
+5. Create a `app/routes.$.tsx` file with just `export { default } from "~/old-app/app";` (or whatever file has the root component for your existing React Router app).
+6. Everything should work at this point (_and_ it'll be server rendered too!!). Commit + push!
+7. Over time, move old routes to the `routes` directory until you bring everything over.
+8. You're done!
+
+We'll have better docs and even videos about this in the future, but this is a pretty darn solid and iterative approach with quick wins and a clear path.
diff --git 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);
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -0,0 +1,21 @@
+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,
+  });
+}
diff --git a/app/old-app/app.js b/app/old-app/app.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+import { Routes, Route } from "react-router-dom";
+import { PageFour } from "./pages/page-4";
+import { PageTwo } from "./pages/page-2";
+
+function App() {
+  return (
+    <div>
+      <div>Old app</div>
+      <Routes>
+        <Route path="/page2" element={<PageTwo />} />
+        <Route path="/page4" element={<PageFour />} />
+      </Routes>
+    </div>
+  );
+}
+
+export default App;
diff --git a/app/old-app/pages/page-2/index.js b/app/old-app/pages/page-2/index.js
@@ -0,0 +1,17 @@
+import { Link } from "react-router-dom";
+
+export function PageTwo() {
+  return (
+    <div>
+      <main>
+        <p>Page 2 (old)</p>
+
+        <Link to="/">Go home (remix)</Link>
+        <br />
+        <Link to="/page3">Go to page 3 (remix)</Link>
+        <br />
+        <Link to="/page4">Go to page 4 (old)</Link>
+      </main>
+    </div>
+  );
+}
diff --git a/app/old-app/pages/page-4/index.js b/app/old-app/pages/page-4/index.js
@@ -0,0 +1,17 @@
+import { Link } from "react-router-dom";
+
+export function PageFour() {
+  return (
+    <div>
+      <main>
+        <p>Page 4</p>
+
+        <Link to="/">Go Home (remix)</Link>
+        <br />
+        <Link to="/page2">Go to page 2 (old)</Link>
+        <br />
+        <Link to="/page3">Go to page 3 (remix)</Link>
+      </main>
+    </div>
+  );
+}
diff --git 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>
+  );
+}
diff --git a/app/routes/$.tsx b/app/routes/$.tsx
@@ -0,0 +1 @@
+export { default } from "~/old-app/app";
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -0,0 +1,17 @@
+import { Link } from "@remix-run/react";
+
+export default function Page3() {
+  return (
+    <div>
+      <main>
+        <p>Home (remix)</p>
+
+        <Link to="/page2">Go to page 2 (old)</Link>
+        <br />
+        <Link to="/page3">Go to page 3 (remix)</Link>
+        <br />
+        <Link to="/page4">Go to page 4 (old)</Link>
+      </main>
+    </div>
+  );
+}
diff --git a/app/routes/page3.tsx b/app/routes/page3.tsx
@@ -0,0 +1,17 @@
+import { Link } from "@remix-run/react";
+
+export default function Page3() {
+  return (
+    <div>
+      <main>
+        <p>Page 3 (remix)</p>
+
+        <Link to="/page2">Go home (remix)</Link>
+        <br />
+        <Link to="/page3">Go to page 3 (remix)</Link>
+        <br />
+        <Link to="/page4">Go to page 4 (old)</Link>
+      </main>
+    </div>
+  );
+}