feat: node stuff

.eslintrc.cjs

@@ -8,8 +8,8 @@
 module.exports = {
   root: true,
   parserOptions: {
-    ecmaVersion: "latest",
+    ecmaVersion: 'latest',
-    sourceType: "module",
+    sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
     },
@@ -19,40 +19,40 @@ module.exports = {
     commonjs: true,
     es6: true,
   },
-  ignorePatterns: ["!**/.server", "!**/.client"],
+  ignorePatterns: ['!**/.server', '!**/.client'],
 
   // Base config
-  extends: ["eslint:recommended"],
+  extends: ['eslint:recommended'],
 
   overrides: [
     // React
     {
-      files: ["**/*.{js,jsx,ts,tsx}"],
+      files: ['**/*.{js,jsx,ts,tsx}'],
-      plugins: ["react", "jsx-a11y"],
+      plugins: ['react', 'jsx-a11y'],
       extends: [
-        "plugin:react/recommended",
+        'plugin:react/recommended',
-        "plugin:react/jsx-runtime",
+        'plugin:react/jsx-runtime',
-        "plugin:react-hooks/recommended",
+        'plugin:react-hooks/recommended',
-        "plugin:jsx-a11y/recommended",
+        'plugin:jsx-a11y/recommended',
       ],
       settings: {
         react: {
-          version: "detect",
+          version: 'detect',
         },
-        formComponents: ["Form"],
+        formComponents: ['Form'],
         linkComponents: [
-          { name: "Link", linkAttribute: "to" },
+          { name: 'Link', linkAttribute: 'to' },
-          { name: "NavLink", linkAttribute: "to" },
+          { name: 'NavLink', linkAttribute: 'to' },
         ],
       },
       rules: {
-        "react/prop-types": "off",
+        'react/prop-types': 'off',
       },
     },
 
     // Node
     {
-      files: [".eslintrc.cjs"],
+      files: ['.eslintrc.cjs', 'server.js'],
       env: {
         node: true,
       },

package-lock.json

@@ -6,15 +6,19 @@
     "": {
       "name": "silphius-next",
       "dependencies": {
+        "@remix-run/express": "^2.9.2",
         "@remix-run/node": "^2.9.2",
         "@remix-run/react": "^2.9.2",
-        "@remix-run/serve": "^2.9.2",
+        "compression": "^1.7.4",
+        "express": "^4.18.2",
         "isbot": "^4.1.0",
+        "morgan": "^1.10.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
       "devDependencies": {
         "@remix-run/dev": "^2.9.2",
+        "cross-env": "^7.0.3",
         "eslint": "^8.38.0",
         "eslint-plugin-import": "^2.28.1",
         "eslint-plugin-jsx-a11y": "^6.7.1",
@@ -1506,6 +1510,27 @@
         }
       }
     },
+    "node_modules/@remix-run/dev/node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remix-run/express": {
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/@remix-run/express/-/express-2.9.2.tgz",
@@ -1588,6 +1613,9 @@
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/@remix-run/serve/-/serve-2.9.2.tgz",
       "integrity": "sha512-wA3mjQcIkkzmr2798mMDDCkVmVraVwFgLiZ0ManlU5mOWZhI0W+b55fxHltJ4gkAMGYaxrk7vq/s8s/r+L3cTQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@remix-run/express": "2.9.2",
         "@remix-run/node": "2.9.2",
@@ -2151,6 +2179,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -2445,6 +2474,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -2520,6 +2550,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -2763,6 +2794,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -2980,6 +3012,24 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "dev": true
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -4395,6 +4445,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -4571,6 +4622,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -4655,6 +4707,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz",
       "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -4717,6 +4770,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -5163,6 +5217,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -5282,6 +5337,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5325,6 +5381,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -5388,6 +5445,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -7112,6 +7170,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7593,6 +7652,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -8089,6 +8149,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -9180,6 +9241,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -10398,27 +10460,6 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
-    "node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.3.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -5,20 +5,24 @@
   "type": "module",
   "scripts": {
     "build": "remix vite:build",
-    "dev": "remix vite:dev",
+    "dev": "node ./server.js",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
-    "start": "remix-serve ./build/server/index.js"
+    "start": "cross-env NODE_ENV=production node ./server.js"
   },
   "dependencies": {
+    "@remix-run/express": "^2.9.2",
     "@remix-run/node": "^2.9.2",
     "@remix-run/react": "^2.9.2",
-    "@remix-run/serve": "^2.9.2",
+    "compression": "^1.7.4",
+    "express": "^4.18.2",
     "isbot": "^4.1.0",
+    "morgan": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.9.2",
+    "cross-env": "^7.0.3",
     "eslint": "^8.38.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",

server.js

@@ -0,0 +1,79 @@
+import {createRequestHandler} from '@remix-run/express';
+import compression from 'compression';
+import express from 'express';
+import morgan from 'morgan';
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const app = express();
+
+let server;
+if (isProduction) {
+  const {createServer} = await import('node:http');
+  server = createServer(app);
+}
+else {
+  const {execSync} = await import('node:child_process');
+  const {mkdirSync, readFileSync, statSync} = await import('node:fs');
+  const cacheDirectory = `${import.meta.dirname}/node_modules/.cache`;
+  mkdirSync(cacheDirectory, {recursive: true});
+  try {
+    statSync(`${cacheDirectory}/localhost-key.pem`);
+  }
+  catch (error) { // eslint-disable-line no-unused-vars
+    execSync(`mkcert -cert-file ${cacheDirectory}/localhost.pem -key-file ${cacheDirectory}/localhost-key.pem localhost`)
+  }
+  const serverOptions = {
+    key: readFileSync(`${cacheDirectory}/localhost-key.pem`),
+    cert: readFileSync(`${cacheDirectory}/localhost.pem`),
+  };
+  const {createServer} = await import('node:https');
+  server = createServer(serverOptions, app);
+}
+
+const viteDevServer = isProduction
+  ? undefined
+  : await import('vite').then((vite) =>
+      vite.createServer({
+        server: {middlewareMode: {server}},
+      })
+    );
+
+const remixHandler = createRequestHandler({
+  build: () => (
+    viteDevServer
+      ? viteDevServer.ssrLoadModule('virtual:remix/server-build')
+      : import('./build/server/index.js')
+  ),
+});
+
+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');
+
+// handle asset requests
+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'));
+
+// handle SSR requests
+app.all('*', remixHandler);
+
+const port = process.env.PORT || 3000;
+server.listen(port, () =>
+  console.log(`Express server listening at http${isProduction ? '' : 's'}://localhost:${port}`)
+);

vite.config.js

@@ -1,5 +1,9 @@
-import { vitePlugin as remix } from "@remix-run/dev";
+import {readFileSync} from 'node:fs';
-import { defineConfig } from "vite";
+import {fileURLToPath} from 'node:url';
+import {vitePlugin as remix} from '@remix-run/dev';
+import {defineConfig} from 'vite';
+
+const cacheDirectory = `${import.meta.dirname}/node_modules/.cache`;
 
 export default defineConfig({
   plugins: [
@@ -11,4 +15,18 @@ export default defineConfig({
       },
     }),
   ],
+  resolve: {
+    alias: [
+      {
+        find: '@',
+        replacement: fileURLToPath(new URL('./app', import.meta.url))
+      },
+    ],
+  },
+  server: {
+    https: {
+      key: readFileSync(`${cacheDirectory}/localhost-key.pem`),
+      cert: readFileSync(`${cacheDirectory}/localhost.pem`),
+    },
+  },
 });