initial commit

Signed-off-by: Logan McAnsh <[email protected]>
mcansh · Aug 25, 2021 · 928cacc · 928cacc
commit 928cacc
Show file tree

Hide file tree

Showing 23 changed files with 6,393 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+dist
+node_modules
+.ds_store
+.yalc
+yalc.lock
+
+/example/server/build
+/example/public/build
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/server/build
+/public/build
diff --git a/example/.npmrc b/example/.npmrc
@@ -0,0 +1,2 @@
+//npm.remix.run/:_authToken=${REMIX_TOKEN}
+@remix-run:registry=https://npm.remix.run
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,60 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://docs.remix.run)
+- [Customer Dashboard](https://remix.run/dashboard)
+
+## Development
+
+You'll need to run two terminals (or bring in a process manager like concurrently/pm2-dev if you like):
+
+Start the Remix development asset server
+
+```sh
+npm run dev
+```
+
+In a new tab start your express app:
+
+```sh
+npm run start:dev
+```
+
+This starts your app in development mode, which will purge the server require cache when Remix rebuilds assets so you don't need a process manager restarting the express server.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying express applications you should be right at home just make sure to deploy the output of `remix build`
+
+- `server/build/`
+- `public/build/`
+
+### Using a Template
+
+When you ran `npm init remix` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
+
+```sh
+cd ..
+# create a new project, and pick a pre-configured host
+npm init remix
+cd my-new-remix-app
+# remove the new project's app (not the old one!)
+rm -rf app
+# copy your app over
+cp -R ../my-old-remix-app/app app
+```
diff --git a/example/app/entry.client.tsx b/example/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import ReactDOM from "react-dom";
+import { RemixBrowser } from "remix";
+
+ReactDOM.hydrate(<RemixBrowser />, document);
diff --git a/example/app/entry.server.tsx b/example/app/entry.server.tsx
@@ -0,0 +1,22 @@
+import ReactDOMServer from "react-dom/server";
+import type { EntryContext } from "remix";
+import { RemixServer } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  let markup = ReactDOMServer.renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: {
+      ...Object.fromEntries(responseHeaders),
+      "Content-Type": "text/html"
+    }
+  });
+}
diff --git a/example/app/root.tsx b/example/app/root.tsx
@@ -0,0 +1,57 @@
+import type { LinksFunction, LoaderFunction } from "remix";
+import { Meta, Links, Scripts, useRouteData, LiveReload } from "remix";
+import { Outlet } from "react-router-dom";
+
+import stylesUrl from "./styles/global.css";
+
+export let links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: stylesUrl }];
+};
+
+export let loader: LoaderFunction = async () => {
+  return { date: new Date() };
+};
+
+function Document({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <link rel="icon" href="/favicon.png" type="image/png" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+
+        <Scripts />
+        {process.env.NODE_ENV === "development" && <LiveReload />}
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  let data = useRouteData();
+  return (
+    <Document>
+      <Outlet />
+      <footer>
+        <p>This page was rendered at {data.date.toLocaleString()}</p>
+      </footer>
+    </Document>
+  );
+}
+
+export function ErrorBoundary({ error }: { error: Error }) {
+  return (
+    <Document>
+      <h1>App Error</h1>
+      <pre>{error.message}</pre>
+      <p>
+        Replace this UI with what you want users to see when your app throws
+        uncaught errors.
+      </p>
+    </Document>
+  );
+}
diff --git a/example/app/routes/404.tsx b/example/app/routes/404.tsx
@@ -0,0 +1,13 @@
+import type { MetaFunction } from "remix";
+
+export let meta: MetaFunction = () => {
+  return { title: "Ain't nothing here" };
+};
+
+export default function FourOhFour() {
+  return (
+    <div>
+      <h1>404</h1>
+    </div>
+  );
+}
diff --git a/example/app/routes/index.tsx b/example/app/routes/index.tsx
@@ -0,0 +1,34 @@
+import type { MetaFunction, LinksFunction, LoaderFunction } from "remix";
+import { useRouteData } from "remix";
+
+import stylesUrl from "../styles/index.css";
+
+export let meta: MetaFunction = () => {
+  return {
+    title: "Remix Starter",
+    description: "Welcome to remix!",
+  };
+};
+
+export let links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: stylesUrl }];
+};
+
+export let loader: LoaderFunction = async () => {
+  return { message: "this is awesome 😎" };
+};
+
+export default function Index() {
+  let data = useRouteData();
+
+  return (
+    <div style={{ textAlign: "center", padding: 20 }}>
+      <h2>Welcome to Remix!!!</h2>
+      <p>
+        <a href="https://remix.run/dashboard/docs">Check out the docs</a> to get
+        started.
+      </p>
+      <p>Message from the loader: {data.message}</p>
+    </div>
+  );
+}
diff --git a/example/app/styles/global.css b/example/app/styles/global.css
@@ -0,0 +1,13 @@
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+body {
+  font-family: sans-serif;
+}
+
+footer {
+  text-align: center;
+  color: #ccc;
+  padding-top: 80px;
+}
diff --git a/example/app/styles/index.css b/example/app/styles/index.css
@@ -0,0 +1,5 @@
+/* 
+ * when the user visits this page, this style will apply, when they leave, it
+ * will get unloaded, so don't worry so much about conflicting styles between
+ * pages!
+ */
diff --git a/example/app/tsconfig.json b/example/app/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "target": "es2019",
+    "strict": true,
+    "skipLibCheck": true
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		//npm.remix.run/:_authToken=${REMIX_TOKEN}
		@remix-run:registry=https://npm.remix.run