WIP

examples/v7-remix/.eslintrc.cjs

@@ -1,4 +1,84 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+  ignorePatterns: ["!**/.server", "!**/.client"],
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
 };

examples/v7-remix/.gitignore

@@ -1,10 +1,11 @@
-.DS_Store
 node_modules
 
 /.cache
 /build
-/public/build
 .env
 
 # Edgio generated build directory
 .edgio
+
+# Edgio generated build directory
+.edgio

examples/v7-remix/README.md

@@ -30,21 +30,19 @@ npm run edgio:deploy
 
 ---
 
-## Welcome to Remix!
+# Welcome to Remix + Vite!
 
-- [Remix Docs](https://remix.run/docs)
+📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
 
-### Development
+## Development
 
-Start the Remix development asset server and the Express server by running:
+Run the Vite dev server:
 
-```sh
+```shellscript
 npm run 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
+## Deployment
 
 First, build your app for production:
 
@@ -60,29 +58,11 @@ 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`
-
-- `build/`
-- `public/build/`
+### DIY
 
-#### Using a Template
+If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
 
-When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over relevant code/assets from your current app to the new project that's pre-configured for your target server.
+Make sure to deploy the output of `npm run build`
 
-Most importantly, this means everything in the `app/` directory, but if you've further customized your current application outside of there it may also include:
-
-- Any assets you've added/updated in `public/`
-- Any updated versions of root files such as `.eslintrc.js`, etc.
-
-```sh
-cd ..
-# create a new project, and pick a pre-configured host
-npx create-remix@latest
-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
-```
+- `build/server`
+- `build/client`

examples/v7-remix/app/entry.server.tsx

@@ -7,9 +7,9 @@
 import { PassThrough } from "node:stream";
 
 import type { AppLoadContext, EntryContext } from "@remix-run/node";
-import { Response } from "@remix-run/node";
+import { createReadableStreamFromReadable } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
-import isbot from "isbot";
+import { isbot } from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
 
 const ABORT_DELAY = 5_000;
@@ -19,9 +19,12 @@ export default function handleRequest(
   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
 ) {
-  return isbot(request.headers.get("user-agent"))
+  return isbot(request.headers.get("user-agent") || "")
     ? handleBotRequest(
         request,
         responseStatusCode,
@@ -54,11 +57,12 @@ function handleBotRequest(
         onAllReady() {
           shellRendered = true;
           const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
 
           responseHeaders.set("Content-Type", "text/html");
 
           resolve(
-            new Response(body, {
+            new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
             })
@@ -103,11 +107,12 @@ function handleBrowserRequest(
         onShellReady() {
           shellRendered = true;
           const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
 
           responseHeaders.set("Content-Type", "text/html");
 
           resolve(
-            new Response(body, {
+            new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
             })

examples/v7-remix/app/root.tsx

@@ -1,33 +1,29 @@
-import { cssBundleHref } from "@remix-run/css-bundle";
-import type { LinksFunction } from "@remix-run/node";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
 
-export const links: LinksFunction = () => [
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-];
-
-export default function App() {
+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 name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}

examples/v7-remix/app/routes/_index.tsx

@@ -1,6 +1,6 @@
-import type { V2_MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
     { name: "description", content: "Welcome to Remix!" },

examples/v7-remix/edgio.config.cjs

@@ -7,13 +7,13 @@ module.exports = {
   // The name of the site in Edgio to which this app should be deployed.
   // name: 'my-site-name',
 
-  // The name of the team in Edgio to which this app should be deployed.
-  // team: 'my-team-name',
+  // The name of the organization in Edgio to which this app should be deployed.
+  // organization: 'my-organization-name',
 
   // Overrides the default path to the routes file. The path should be relative to the root of your app.
   // routes: 'routes.js',
 
-  express: {
+    express: {
     // The main entry point for your app, which exports an instance of express app.
     // This file and its dependencies will be bundled into a single file for serverless deployment.
     //
@@ -33,11 +33,15 @@ module.exports = {
     // Uncomment the line below to bundle your express app using @vercel/nft to reduce the bundle size and cold start times
     // nft (Node file trace) produces an exploded, tree-shaken bundle with a node_modules directory containing only those modules
     // used by your app.
-    bundler: '@vercel/nft',
+    // bundler: '@vercel/nft',
     // Uncomment the line below to bundle your express app using @vercel/ncc to reduce the bundle size and cold start times
     // NCC produces an a single-file, tree-shaken bundle containing only those modules used by your app.
     // bundler: '@vercel/ncc',
-  },
+  }
+
+  // When set to true or omitted entirely, Edgio includes the deployment number in the cache key,
+  // effectively purging the cache each time you deploy.
+  // purgeCacheOnDeploy: false,
 
   // If you need to proxy some URLs to an origin instead of your Next.js app, you can configure the origins here:
   // origins: [
@@ -47,13 +51,13 @@ module.exports = {
   //
   //     // When provided, the following value will be sent as the host header when connecting to the origin.
   //     // If omitted, the host header from the browser will be forwarded to the origin.
-  //     override_host_header: "example.com",
+  //     override_host_header: "test-origin.edgio.net",
   //
   //     // The list of backend hosts
   //     hosts: [
   //       {
   //         // The domain name or IP address of the origin server
-  //         location: "example.com"
+  //         location: "test-origin.edgio.net"
   //       }
   //     ]
   //   }
@@ -64,10 +68,10 @@ module.exports = {
   //   // Set to true to include all packages listed in the dependencies property of package.json when deploying to Edgio.
   //   // This option generally isn't needed as Edgio automatically includes all modules imported by your code in the bundle that
   //   // is uploaded during deployment
-  //   includeNodeModules: true,
+  //   // includeNodeModules: true,
   //
   //   // Include additional paths that are dynamically loaded by your app at runtime here when building the serverless bundle.
-  //   include: ['views/**/*'],
+  //   // include: ['views/**/*'],
   // },
 
   // The maximum number of URLs that will be concurrently prerendered during deployment when static prerendering is enabled.
@@ -82,4 +86,4 @@ module.exports = {
   //   '**/*', // include all files
   //   '!(**/secrets/**/*)', // except everything in the secrets directory
   // ],
-};
+}