Convert to ESM (#162)

* Convert to ESM

* Update server.js to server.mjs in Dockerfile

Author: brookslybrand

Dockerfile

@@ -47,7 +47,7 @@ WORKDIR /remixapp
 
 COPY --from=production-deps /remixapp/node_modules /remixapp/node_modules
 COPY --from=build /remixapp/build /remixapp/build
-COPY --from=build /remixapp/server.js /remixapp/server.js
+COPY --from=build /remixapp/server.mjs /remixapp/server.mjs
 COPY --from=build /remixapp/package.json /remixapp/package.json
 COPY --from=build /remixapp/start.sh /remixapp/start.sh
 

package.json

@@ -5,14 +5,15 @@
   "description": "",
   "license": "",
   "sideEffects": false,
+  "type": "module",
   "scripts": {
     "build": "remix vite:build",
-    "dev": "node ./server.js",
+    "dev": "node ./server.mjs",
     "format": "prettier --write ./",
     "deploy": "flyctl deploy --build-arg REMIX_TOKEN=${REMIX_TOKEN}",
     "push:stage": "git tag -f stage && git push origin stage -f",
-    "start": "cross-env NODE_ENV=production node server.js",
-    "preview": "cross-env NODE_ENV=production dotenv node server.js",
+    "start": "cross-env NODE_ENV=production node server.mjs",
+    "preview": "cross-env NODE_ENV=production dotenv node server.mjs",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "lint:fix": "npm run lint -- --fix",
     "test": "vitest",

postcss.config.js renamed to postcss.config.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     "tailwindcss/nesting": {},
     tailwindcss: {},

server.js

@@ -0,0 +1,69 @@
+import express from "express";
+import compression from "compression";
+import morgan from "morgan";
+import rateLimit from "express-rate-limit";
+import { createRequestHandler } from "@remix-run/express";
+import sourceMapSupport from "source-map-support";
+import { installGlobals } from "@remix-run/node";
+
+sourceMapSupport.install();
+installGlobals();
+
+const viteDevServer =
+  process.env.NODE_ENV === "production"
+    ? undefined
+    : await import("vite").then((vite) =>
+        vite.createServer({
+          server: { middlewareMode: true },
+        }),
+      );
+
+const app = express();
+
+const limiter = rateLimit({
+  windowMs: 2 * 60 * 1000, // 2 minutes
+  max: 1000,
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+
+app.set("trust proxy", true);
+app.use(limiter);
+
+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");
+
+if (viteDevServer) {
+  app.use(viteDevServer.middlewares);
+} else {
+  // Vite fingerprints its assets so we can cache forever.
+  app.use(
+    "/assets",
+    express.static("build/client/assets", { 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("build/client", { maxAge: "1h" }));
+
+app.use(morgan("tiny"));
+
+app.all(
+  "*",
+  createRequestHandler({
+    build: viteDevServer
+      ? () => viteDevServer.ssrLoadModule("virtual:remix/server-build")
+      : await import("./build/server/index.js"),
+    mode: process.env.NODE_ENV,
+  }),
+);
+const port = process.env.PORT || 3000;
+
+app.listen(port, () => {
+  console.log(
+    `Express server listening on port ${port} (http://localhost:${port})`,
+  );
+});

server.mjs

@@ -5,7 +5,7 @@ const aspectRatioPlugin = require("@tailwindcss/aspect-ratio");
 const defaultTheme = require("tailwindcss/defaultTheme");
 
 /** @type {TailwindConfig} */
-module.exports = {
+export default {
   mode: "jit",
   content: ["./app/**/*.{ts,tsx}", "./data/**/*.md", "./tailwind-extras.html"],
   darkMode: "class",

tailwind.config.js renamed to tailwind.config.mjs

@@ -5,12 +5,7 @@ import arraybuffer from "vite-plugin-arraybuffer";
 
 export default defineConfig({
   ssr: {
-    noExternal: ["@docsearch/react", "satori"],
+    noExternal: ["@docsearch/react"],
   },
-  plugins: [
-    remix({ serverModuleFormat: "cjs" }),
-    tsconfigPaths(),
-    splitVendorChunkPlugin(),
-    arraybuffer(),
-  ],
+  plugins: [remix(), tsconfigPaths(), splitVendorChunkPlugin(), arraybuffer()],
 });