feat: upgrade to remix v2 with vite setup

.gitignore

@@ -1,23 +1,12 @@
 node_modules
+.env
 
 # Remix
 /.cache
 /build
-/public/build
 
-# Remix stacks
-/package-lock.json
-
-# Custom Build
-/dist
-
-# Tailwind
-/app/styles/tailwind.css
+# Cloudflare
+.wrangler
 
-# Cypress
-/cypress/videos
-/cypress/screenshots
-
-# Miniflare
-/.mf
-/.env
+# Remix stacks
+/package-lock.json

app/root.tsx

@@ -7,35 +7,30 @@ import * as React from 'react';
 import {
   Link,
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-  useCatch,
+  isRouteErrorResponse,
+  useRouteError,
 } from '@remix-run/react';
+import stylesUrl from '~/styles.css?url';
 
-import stylesUrl from '~/styles/tailwind.css';
-
-/**
- * The `links` export is a function that returns an array of objects that map to
- * the attributes for an HTML `<link>` element. These will load `<link>` tags on
- * every route in the app, but individual routes can include their own links
- * that are automatically unloaded when a user navigates away from the route.
- *
- * https://remix.run/api/app#links
- */
-export let links: LinksFunction = () => {
+export const links: LinksFunction = () => {
   return [{ rel: 'stylesheet', href: stylesUrl }];
 };
 
-export let meta: MetaFunction = () => {
-  return {
-    viewport: 'width=device-width, initial-scale=1',
-  };
+export const meta: MetaFunction = () => {
+  return [
+    {
+      charset: 'utf-8',
+      // title: 'Conform Playground',
+      viewport: 'width=device-width,initial-scale=1',
+    },
+  ];
 };
 
-export let loader: LoaderFunction = async () => {
+export const loader: LoaderFunction = async () => {
   return { date: new Date() };
 };
 
@@ -68,7 +63,6 @@ function Document({
         {children}
         <ScrollRestoration />
         <Scripts />
-        {process.env.NODE_ENV === 'development' && <LiveReload />}
       </body>
     </html>
   );
@@ -98,49 +92,51 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
   );
 }
 
-export function CatchBoundary() {
-  let caught = useCatch();
+export function ErrorBoundary() {
+  const error = useRouteError();
 
-  let message;
-  switch (caught.status) {
-    case 401:
-      message = (
-        <p>
-          Oops! Looks like you tried to visit a page that you do not have access
-          to.
-        </p>
-      );
-      break;
-    case 404:
-      message = (
-        <p>Oops! Looks like you tried to visit a page that does not exist.</p>
-      );
-      break;
+  // Log the error to the console
+  console.error(error);
 
-    default:
-      throw new Error(caught.data || caught.statusText);
-  }
+  if (isRouteErrorResponse(error)) {
+    let message;
+    switch (error.status) {
+      case 401:
+        message = (
+          <p>
+            Oops! Looks like you tried to visit a page that you do not have
+            access to.
+          </p>
+        );
+        break;
+      case 404:
+        message = (
+          <p>Oops! Looks like you tried to visit a page that does not exist.</p>
+        );
+        break;
 
-  return (
-    <Document title={`${caught.status} ${caught.statusText}`}>
-      <Layout>
-        <h1>
-          {caught.status}: {caught.statusText}
-        </h1>
-        {message}
-      </Layout>
-    </Document>
-  );
-}
+      default:
+        throw new Error(error.data || error.statusText);
+    }
+
+    return (
+      <Document title={`${error.status} ${error.statusText}`}>
+        <Layout>
+          <h1>
+            {error.status}: {error.statusText}
+          </h1>
+          {message}
+        </Layout>
+      </Document>
+    );
+  }
 
-export function ErrorBoundary({ error }: { error: Error }) {
-  console.error(error);
   return (
     <Document title="Error!">
       <Layout>
         <div>
           <h1>There was an error</h1>
-          <p>{error.message}</p>
+          <p>{`${error}`}</p>
           <hr />
           <p>
             Hey, developer, you should replace this with what you want your

app/routes/index.tsx → app/routes/_index.tsx

@@ -1,29 +1,21 @@
-import type {
-  MetaFunction,
-  LinksFunction,
-  LoaderFunction,
-} from '@remix-run/cloudflare';
+import type { MetaFunction, LoaderFunctionArgs } from '@remix-run/cloudflare';
 import { useLoaderData } from '@remix-run/react';
 
-export let meta: MetaFunction = () => {
-  return {
-    title: 'remix-worker-template',
-    description: 'All-in-one remix starter template for Cloudflare Workers',
-  };
+export const meta: MetaFunction = () => {
+  return [
+    { title: 'remix-worker-template' },
+    { description: 'All-in-one remix starter template for Cloudflare Workers' },
+  ];
 };
 
-export let links: LinksFunction = () => {
-  return [];
-};
-
-export let loader: LoaderFunction = async ({ request }) => {
+export function loader({ request }: LoaderFunctionArgs) {
   return {
     title: 'remix-worker-template',
   };
-};
+}
 
 export default function Index() {
-  let { title } = useLoaderData();
+  const { title } = useLoaderData<typeof loader>();
 
   return (
     <div>

app/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

env.d.ts

@@ -0,0 +1,14 @@
+import 'vite/client';
+import '@remix-run/cloudflare';
+import '@cloudflare/workers-types';
+
+interface Env {
+  ENVIRONMENT?: 'development';
+}
+
+declare module '@remix-run/cloudflare' {
+  export interface AppLoadContext {
+    env: Env;
+    waitUntil(promise: Promise<void>): void;
+  }
+}

functions/[[path]].ts

@@ -0,0 +1,16 @@
+import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - the server build file is generated by `remix vite:build`
+// eslint-disable-next-line import/no-unresolved
+import * as build from '../build/server';
+
+export const onRequest = createPagesFunctionHandler({
+  build,
+  getLoadContext: (context) => ({
+    env: context.env,
+    waitUntil(promise: Promise<unknown>) {
+      context.waitUntil(promise);
+    },
+  }),
+});

package.json

@@ -1,54 +1,52 @@
 {
   "private": true,
   "name": "remix-worker-template",
-  "description": "All-in-one remix starter template for Cloudflare Workers",
+  "description": "All-in-one remix starter template for Cloudflare Pages",
   "module": "./dist/worker.mjs",
   "scripts": {
-    "cleanup": "rimraf .cache ./dist ./build ./public/build ./app/styles/tailwind.css",
-    "build:remix": "remix build",
-    "build:style": "cross-env NODE_ENV=production tailwindcss -o ./app/styles/tailwind.css --minify",
-    "build:worker": "cross-env NODE_ENV=production node ./scripts/build.mjs",
-    "build": "npm run build:style && npm run build:remix && npm run build:worker",
-    "dev:miniflare": "miniflare --modules --build-command \"node ./scripts/build.mjs\" --build-watch-path ./worker --build-watch-path ./build/index.js --no-cache --watch --open",
-    "dev:remix": "remix watch",
-    "dev:style": "tailwindcss -o ./app/styles/tailwind.css --watch",
-    "dev": "concurrently \"npm:dev:*\"",
-    "prebuild": "npm run cleanup",
+    "dev": "remix vite:dev",
     "test": "NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" playwright test",
-    "start": "miniflare --modules",
+    "start": "wrangler pages dev ./build/client",
+    "build": "remix vite:build",
+    "cleanup": "rimraf .cache ./build ./public/build",
+    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "typecheck": "tsc",
     "prepare": "husky install"
   },
   "dependencies": {
-    "@cloudflare/kv-asset-handler": "^0.2.0",
-    "@remix-run/cloudflare-workers": "*",
+    "@remix-run/cloudflare": "*",
+    "@remix-run/cloudflare-pages": "*",
     "@remix-run/react": "*",
     "isbot": "^3.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^3.18.0",
-    "@playwright/test": "^1.28.1",
+    "@cloudflare/workers-types": "^4.20240208.0",
+    "@playwright/test": "^1.41.2",
     "@remix-run/dev": "*",
     "@remix-run/eslint-config": "*",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
-    "concurrently": "^7.6.0",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "autoprefixer": "^10.4.17",
+    "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.15.15",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "husky": "^8.0.2",
-    "lint-staged": "^13.0.4",
-    "miniflare": "^2.11.0",
-    "prettier": "^2.8.0",
-    "rimraf": "^3.0.2",
-    "tailwindcss": "^3.2.4",
-    "typescript": "^4.9.3",
-    "wrangler": "^2.4.4"
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.10",
+    "lint-staged": "^15.2.2",
+    "miniflare": "^3.20240129.1",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "rimraf": "^5.0.5",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.1",
+    "vite-tsconfig-paths": "^4.3.1",
+    "wrangler": "^3.28.1"
   },
   "engines": {
-    "node": ">=16.7"
+    "node": ">=18"
   },
   "sideEffects": false,
   "lint-staged": {

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

public/_headers

@@ -0,0 +1,2 @@
+/assets/*
+  Cache-Control: public, max-age=31536000, immutable