New Remix dev server (HMR 🔥)

.nvmrc

@@ -1 +1 @@
-16
+18

config/cloudflare-env/index.d.ts

@@ -1,7 +1,10 @@
+/// <reference types="@cloudflare/workers-types" />
+
 interface Env {
   __STATIC_CONTENT: KVNamespace
 
   COUNTER: DurableObjectNamespace
 
+  ENVIRONMENT: string
   SESSION_SECRET: string
 }

config/eslint-config-custom/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "@remix-run/eslint-config": "^1.8.2",
+    "@remix-run/eslint-config": "^1.15.0",
     "eslint-config-prettier": "^8.5.0"
   },
   "publishConfig": {

packages/remix-app/build.d.ts

@@ -1 +1,9 @@
-export * from '@remix-run/dev/server-build'
+import type { ServerBuild } from '@remix-run/cloudflare'
+
+export const assets: ServerBuild['assets']
+export const assetsBuildDirectory: ServerBuild['assetsBuildDirectory']
+export const dev: ServerBuild['dev']
+export const entry: ServerBuild['entry']
+export const future: ServerBuild['future']
+export const publicPath: ServerBuild['publicPath']
+export const routes: ServerBuild['routes']

packages/remix-app/package.json

@@ -10,19 +10,20 @@
     "build": "run-s build:*",
     "dev": "concurrently \"npm:dev:css\" \"npm:dev:remix\"",
     "dev:css": "tailwindcss -w -i styles/app.css -o app/styles/app.css",
-    "dev:remix": "remix watch",
+    "dev:remix": "remix dev",
     "lint": "eslint .",
+    "predev": "remix build",
     "typecheck": "tsc -b"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "^1.8.2",
-    "@remix-run/react": "^1.8.2",
+    "@remix-run/cloudflare": "^1.15.0",
+    "@remix-run/react": "^1.15.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^3.10.0",
-    "@remix-run/dev": "^1.8.2",
+    "@remix-run/dev": "^1.15.0",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
     "cloudflare-env": "*",
@@ -31,7 +32,7 @@
     "eslint-config-custom": "*",
     "isbot": "^3.6.5",
     "npm-run-all": "^4.1.5",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.3.1",
     "tsconfig": "*",
     "typescript": "^4.9.4"
   }

packages/remix-app/remix.config.js

@@ -2,7 +2,13 @@
  * @type {import('@remix-run/dev').AppConfig}
  */
 module.exports = {
-  serverBuildTarget: 'cloudflare-workers',
-  devServerBroadcastDelay: 1000,
   ignoredRouteFiles: ['**/.*'],
+  serverModuleFormat: 'esm',
+  serverDependenciesToBundle: ['@remix-run/react'],
+  future: {
+    unstable_dev: {
+      appServerPort: 3000,
+      rebuildPollIntervalMs: 500,
+    },
+  },
 }

packages/remix-app/tailwind.config.js

@@ -1,3 +1,6 @@
+/**
+ * @type {import('tailwindcss').Config}
+ */
 module.exports = {
   darkMode: 'media',
   content: ['./app/**/*.{js,ts,jsx,tsx}'],

packages/worker/package.json

@@ -3,13 +3,13 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "dev": "wrangler dev --config wrangler.dev.toml --env dev --local",
+    "dev": "wrangler dev --config wrangler.dev.toml --env dev --port 3000 --local",
     "lint": "eslint .",
     "typecheck": "tsc -b"
   },
   "dependencies": {
     "@cloudflare/kv-asset-handler": "^0.2.0",
-    "@remix-run/cloudflare": "^1.8.2",
+    "@remix-run/cloudflare": "^1.15.0",
     "counter-do": "*",
     "remix-app": "*"
   },

packages/worker/src/index.ts

@@ -7,7 +7,7 @@ import manifestJSON from '__STATIC_CONTENT_MANIFEST'
 export { default as CounterDurableObject } from 'counter-do'
 
 let assetManifest = JSON.parse(manifestJSON)
-let handleRemixRequest = createRequestHandler(build, process.env.NODE_ENV)
+let handleRemixRequest: ReturnType<typeof createRequestHandler>
 
 export default {
   async fetch(
@@ -39,6 +39,9 @@ export default {
     } catch (error) {}
 
     try {
+      if (!handleRemixRequest) {
+        handleRemixRequest = createRequestHandler(build, env.ENVIRONMENT)
+      }
       let loadContext: AppLoadContext = { env }
       return await handleRemixRequest(request, loadContext)
     } catch (error) {

packages/worker/wrangler.example.toml

@@ -8,7 +8,7 @@ workers_dev = true
 bucket = "../remix-app/public"
 
 [env.dev]
-vars = {SESSION_SECRET = "should-be-secure-in-prod"}
+vars = {SESSION_SECRET = "should-be-secure-in-prod", ENVIRONMENT = "development"}
 
 [env.dev.durable_objects]
 bindings = [

packages/worker/wrangler.toml

@@ -3,6 +3,8 @@ main = "src/index.ts"
 compatibility_date = "2022-11-17"
 compatibility_flags = ["streams_enable_constructors"]
 
+vars = {ENVIRONMENT = "production"}
+
 [site]
 bucket = "../remix-app/public"