use express

app/root.tsx

@@ -67,7 +67,8 @@ export default function App() {
           }}
         />
         <Scripts />
-        <LiveReload />
+        {/* TODO: implement LiveReload in our express server */}
+        {/* <LiveReload /> */}
       </body>
     </html>
   )

package.json

@@ -7,12 +7,13 @@
   "scripts": {
     "build-remix": "remix build",
     "build": "pnpm build-css && pnpm build-remix",
-    "dev-remix": "remix dev",
+    "dev-remix": "remix watch",
+    "dev-node": "nodemon build/index.js --watch build",
     "dev": "pnpm generate-css && run-p dev-*",
     "generate-css": "tailwindcss --input ./css/main.css --output ./app/generated.css --postcss",
     "dev-css": "pnpm generate-css --watch",
     "build-css": "pnpm generate-css --minify",
-    "start": "remix-serve build",
+    "start": "NODE_ENV=production node build/index.js",
     "deploy": "fly deploy --remote-only"
   },
   "dependencies": {
@@ -24,16 +25,21 @@
     "@codemirror/view": "^0.20.3",
     "@headlessui/react": "^1.6.0",
     "@prisma/client": "^3.13.0",
+    "@remix-run/express": "^1.4.3",
     "@remix-run/node": "*",
     "@remix-run/react": "*",
     "@remix-run/serve": "*",
     "@uiw/react-codemirror": "^4.7.0",
     "@vercel/node": "^1.14.0",
     "clsx": "^1.1.1",
+    "compression": "^1.7.4",
     "dayjs": "^1.11.1",
+    "dotenv": "^16.0.0",
+    "express": "^4.18.1",
     "form-data": "^4.0.0",
     "mailgun.js": "^5.2.2",
     "markdown-it": "^13.0.0",
+    "morgan": "^1.10.0",
     "nanoid": "^3.3.3",
     "react": "^17.0.2",
     "react-avatar-editor": "^12.0.0",
@@ -48,13 +54,17 @@
     "@remix-run/dev": "*",
     "@remix-run/eslint-config": "*",
     "@remix-run/serve": "*",
+    "@types/compression": "^1.7.2",
+    "@types/express": "^4.17.13",
     "@types/markdown-it": "^12.2.3",
+    "@types/morgan": "^1.9.3",
     "@types/react": "^17.0.24",
     "@types/react-avatar-editor": "^12.0.0",
     "@types/react-dom": "^17.0.9",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^8.3.4",
     "eslint": "^8.11.0",
+    "nodemon": "^2.0.16",
     "npm-run-all": "^4.1.5",
     "postcss-import": "^14.1.0",
     "prisma": "^3.13.0",

remix.config.js

@@ -3,6 +3,7 @@
  */
 module.exports = {
   ignoredRouteFiles: ["**/.*"],
+  server: "./server/index.ts",
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
   // serverBuildPath: "build/index.js",

server/globals/index.ts

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === "development") {
+  require("dotenv/config")
+}
+
+export {}

server/globals/package.json

@@ -0,0 +1,3 @@
+{
+  "sideEffects": true
+}

server/index.ts

@@ -0,0 +1,67 @@
+import "./globals/index"
+import path from "path"
+import express from "express"
+import compression from "compression"
+import morgan from "morgan"
+import { createRequestHandler } from "@remix-run/express"
+import { FLY_REGION } from "~/lib/config.server"
+
+const BUILD_DIR = path.join(process.cwd(), "build")
+
+const app = express()
+
+app.use(compression())
+
+// http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header
+app.disable("x-powered-by")
+
+// Remix fingerprints its assets so we can cache forever.
+app.use(
+  "/build",
+  express.static("public/build", { immutable: true, maxAge: "1y" })
+)
+
+// Everything else (like favicon.ico) is cached for an hour. You may want to be
+// more aggressive with this caching.
+app.use(express.static("public", { maxAge: "1h" }))
+
+app.use(morgan("tiny"))
+
+app.all(
+  "*",
+  process.env.NODE_ENV === "development"
+    ? (req, res, next) => {
+        purgeRequireCache()
+
+        return createRequestHandler({
+          build: require("@remix-run/dev/server-build"),
+          mode: process.env.NODE_ENV,
+        })(req, res, next)
+      }
+    : createRequestHandler({
+        build: require("@remix-run/dev/server-build"),
+        mode: process.env.NODE_ENV,
+      }),
+  (req, res, next) => {
+    res.setHeader("x-fly-region", FLY_REGION || "unknown")
+    next()
+  }
+)
+const port = process.env.PORT || 3000
+
+app.listen(port, () => {
+  console.log(`Open http://localhost:${port}`)
+})
+
+function purgeRequireCache() {
+  // purge require cache on requests for "server side HMR" this won't let
+  // you have in-memory objects between requests in development,
+  // alternatively you can set up nodemon/pm2-dev to restart the server on
+  // file changes, but then you'll have to reconnect to databases/etc on each
+  // change. We prefer the DX of this, so we've included it for you by default
+  for (let key in require.cache) {
+    if (key.startsWith(BUILD_DIR)) {
+      delete require.cache[key]
+    }
+  }
+}