update dependencies and enable HMR

Girish21 · Apr 9, 2023 · 22527ae · 22527ae
1 parent 38fa5e6
commit 22527ae
Show file tree

Hide file tree

Showing 11 changed files with 812 additions and 453 deletions.
diff --git a/config/cloudflare-env/index.d.ts b/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
 }
diff --git a/config/eslint-config-custom/package.json b/config/eslint-config-custom/package.json
@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "@remix-run/eslint-config": "1.13.0",
+    "@remix-run/eslint-config": "^1.15.0",
     "eslint-config-prettier": "^8.5.0"
   },
   "publishConfig": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/remix-app/build.d.ts b/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']
diff --git a/packages/remix-app/package.json b/packages/remix-app/package.json
@@ -5,32 +5,34 @@
   "main": "./build/index.js",
   "types": "./build.d.ts",
   "scripts": {
+    "build:css": "tailwindcss -m -i styles/app.css -o app/styles/app.css",
     "build:remix": "remix build",
     "build": "run-s build:*",
-    "dev": "npm-run-all build --parallel \"dev:*\"",
+    "dev": "concurrently \"npm:dev:css\" \"npm:dev:remix\"",
     "dev:css": "tailwindcss -w -i styles/app.css -o app/styles/app.css",
     "dev:remix": "remix dev",
     "lint": "eslint .",
+    "predev": "remix build",
     "typecheck": "tsc -b"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "1.13.0",
-    "@remix-run/react": "1.13.0",
+    "@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.13.0",
+    "@remix-run/dev": "^1.15.0",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
     "cloudflare-env": "*",
     "concurrently": "^7.2.1",
-    "eslint": "^8.27.0",
+    "eslint": "^8.23.0",
     "eslint-config-custom": "*",
     "isbot": "^3.6.5",
     "npm-run-all": "^4.1.5",
-    "tailwindcss": "^3.2.7",
+    "tailwindcss": "^3.3.1",
     "tsconfig": "*",
     "typescript": "^4.9.4"
   }

diff --git a/packages/remix-app/remix.config.js b/packages/remix-app/remix.config.js
@@ -2,12 +2,13 @@
  * @type {import('@remix-run/dev').AppConfig}
  */
 module.exports = {
-  serverDependenciesToBundle: 'all',
-  serverMainFields: ['browser', 'module', 'main'],
-  serverMinify: true,
-  serverModuleFormat: 'esm',
-  serverPlatform: 'neutral',
-  devServerBroadcastDelay: 1000,
   ignoredRouteFiles: ['**/.*'],
-  future: { unstable_dev: true },
+  serverModuleFormat: 'esm',
+  serverDependenciesToBundle: ['@remix-run/react'],
+  future: {
+    unstable_dev: {
+      appServerPort: 3000,
+      rebuildPollIntervalMs: 500,
+    },
+  },
 }
diff --git a/packages/remix-app/tailwind.config.js b/packages/remix-app/tailwind.config.js
@@ -1,3 +1,6 @@
+/**
+ * @type {import('tailwindcss').Config}
+ */
 module.exports = {
   darkMode: 'media',
   content: ['./app/**/*.{js,ts,jsx,tsx}'],

diff --git a/packages/worker/package.json b/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": "*"
   },

diff --git a/packages/worker/src/index.ts b/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) {

diff --git a/packages/worker/wrangler.example.toml b/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 = [

diff --git a/packages/worker/wrangler.toml b/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"