From 93963efdbcd40413c223bf9720a51507d3f4ec9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Wed, 6 Sep 2023 22:28:40 +0200 Subject: [PATCH] chore: bring in line with latest arc template --- .env.example | 1 - .eslintrc.js => .eslintrc.cjs | 6 +-- .eslintrc.repo.js => .eslintrc.repo.cjs | 2 +- .gitignore | 3 ++ app.arc | 12 +++++- app/root.tsx | 3 +- cypress/{.eslintrc.js => .eslintrc.cjs} | 0 mocks/index.js | 12 +++++- package.json | 6 ++- plugin-remix.js | 49 +++++++++++++++++++++++++ postcss.config.js => postcss.config.cjs | 0 remix.config.js | 19 +++++----- remix.init/gitignore | 6 +-- remix.init/index.js | 2 +- tsconfig.json | 2 +- 15 files changed, 95 insertions(+), 28 deletions(-) rename .eslintrc.js => .eslintrc.cjs (69%) rename .eslintrc.repo.js => .eslintrc.repo.cjs (96%) rename cypress/{.eslintrc.js => .eslintrc.cjs} (100%) create mode 100644 plugin-remix.js rename postcss.config.js => postcss.config.cjs (100%) diff --git a/.env.example b/.env.example index 66df29b..930bffd 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1 @@ -NODE_ENV="development" SESSION_SECRET="super-duper-s3cret" diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 69% rename from .eslintrc.js rename to .eslintrc.cjs index 484b320..f6b3896 100644 --- a/.eslintrc.js +++ b/.eslintrc.cjs @@ -11,9 +11,9 @@ module.exports = { "cypress/globals": true, }, plugins: ["cypress"], - // we're using vitest which has a very similar API to jest - // (so the linting plugins work nicely), but it we have to explicitly - // set the jest version. + // We're using vitest which has a very similar API to jest + // (so the linting plugins work nicely), but it means we + // have to set the jest version explicitly. settings: { jest: { version: 28, diff --git a/.eslintrc.repo.js b/.eslintrc.repo.cjs similarity index 96% rename from .eslintrc.repo.js rename to .eslintrc.repo.cjs index 67f4896..a3796fa 100644 --- a/.eslintrc.repo.js +++ b/.eslintrc.repo.cjs @@ -6,7 +6,7 @@ const WARN = 1; /** @type {import('eslint').Linter.Config} */ module.exports = { extends: [ - "./.eslintrc.js", + "./.eslintrc.cjs", "@remix-run/eslint-config/internal", "plugin:markdown/recommended", ], diff --git a/.gitignore b/.gitignore index 44412e9..17f1c13 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,9 @@ pnpm-lock.yml node_modules /public/build +/server/index.mjs +/server/index.mjs.map +/server/metafile.* preferences.arc sam.json sam.yaml diff --git a/app.arc b/app.arc index bfdb720..57c421a 100644 --- a/app.arc +++ b/app.arc @@ -1,15 +1,23 @@ @app grunge-stack-template -# @aws -# region us-east-2 +@aws +runtime nodejs16.x +# concurrency 1 +# memory 1152 # profile default +# region us-west-1 +# timeout 30 @http /* method any src server +@plugins +plugin-remix + src plugin-remix.js + @static @tables diff --git a/app/root.tsx b/app/root.tsx index 94c4f8e..ac5c76c 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -16,8 +16,6 @@ import stylesheet from "~/tailwind.css"; export const links: LinksFunction = () => [ { rel: "stylesheet", href: stylesheet }, ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), - // NOTE: Architect deploys the public directory to /_static/ - { rel: "icon", href: "/_static/favicon.ico" }, ]; export const loader = async ({ request }: LoaderArgs) => { @@ -30,6 +28,7 @@ export default function App() { + diff --git a/cypress/.eslintrc.js b/cypress/.eslintrc.cjs similarity index 100% rename from cypress/.eslintrc.js rename to cypress/.eslintrc.cjs diff --git a/mocks/index.js b/mocks/index.js index 20c384c..b7782ca 100644 --- a/mocks/index.js +++ b/mocks/index.js @@ -1,6 +1,14 @@ -const { setupServer } = require("msw/node"); +import { rest } from "msw"; +import { setupServer } from "msw/node"; -const server = setupServer(); +// put one-off handlers that don't really need an entire file to themselves here +const miscHandlers = [ + rest.post(`${process.env.REMIX_DEV_HTTP_ORIGIN}/ping`, (req) => + req.passthrough(), + ), +]; + +const server = setupServer(...miscHandlers); server.listen({ onUnhandledRequest: "bypass" }); diff --git a/package.json b/package.json index bca2ecb..d769968 100644 --- a/package.json +++ b/package.json @@ -2,13 +2,15 @@ "name": "grunge-stack-template", "private": true, "sideEffects": false, + "type": "module", "scripts": { "build": "remix build", "dev": "remix dev --manual -c \"arc sandbox -e testing\"", "format": "prettier --write .", "format:repo": "npm run format && npm run lint:repo -- --fix", "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .", - "lint:repo": "npm run lint -- --config ./.eslintrc.repo.js", + "lint:repo": "npm run lint -- --config ./.eslintrc.repo.cjs", + "start": "cross-env NODE_ENV=production arc sandbox", "test": "vitest", "test:e2e:dev": "start-server-and-test dev http://localhost:3000 \"npx cypress open\"", "test:e2e:run": "cross-env PORT=8811 start-server-and-test dev http://localhost:8811 \"npx cypress run\"", @@ -75,6 +77,6 @@ "vitest": "^0.34.2" }, "engines": { - "node": ">=14" + "node": ">=14.0.0" } } diff --git a/plugin-remix.js b/plugin-remix.js new file mode 100644 index 0000000..21947da --- /dev/null +++ b/plugin-remix.js @@ -0,0 +1,49 @@ +// This should eventually be a npm package, but for now it lives here. +// Its job is to notify the remix dev server of the version of the running +// app to trigger HMR / HDR. + +import * as fs from "node:fs"; +import * as path from "node:path"; + +import { logDevReady } from "@remix-run/node"; + +const buildPath = "server/index.mjs"; + +let lastTimeout; + +export default { + sandbox: { + async watcher() { + if (lastTimeout) { + clearTimeout(lastTimeout); + } + + lastTimeout = setTimeout(async () => { + const contents = fs.readFileSync( + path.resolve(process.cwd(), buildPath), + "utf8" + ); + const manifestMatches = contents.matchAll(/manifest-([A-f0-9]+)\.js/g); + const sent = new Set(); + for (const match of manifestMatches) { + const buildHash = match[1]; + if (!sent.has(buildHash)) { + sent.add(buildHash); + logDevReady({ assets: { version: buildHash } }); + } + } + }, 300); + }, + }, + set: { + env() { + // Pass matching env variables through to the application in dev mode. + const passthruKeys = /^NODE_ENV$|^REMIX_DEV_/; + return { + testing: Object.fromEntries( + Object.entries(process.env).filter(([key]) => passthruKeys.test(key)) + ), + }; + }, + }, +}; diff --git a/postcss.config.js b/postcss.config.cjs similarity index 100% rename from postcss.config.js rename to postcss.config.cjs diff --git a/remix.config.js b/remix.config.js index b2880e6..153f9cc 100644 --- a/remix.config.js +++ b/remix.config.js @@ -1,7 +1,7 @@ -const path = require("path"); +import path from "node:path"; /** @type {import('@remix-run/dev').AppConfig} */ -module.exports = { +export default { cacheDirectory: "./node_modules/.cache/remix", future: { v2_dev: true, @@ -14,22 +14,21 @@ module.exports = { ignoredRouteFiles: ["**/.*", "**/*.test.{js,jsx,ts,tsx}"], publicPath: "/_static/build/", postcss: true, - server: "./server.ts", - serverBuildPath: "server/index.js", - serverModuleFormat: "cjs", + server: "server.ts", + serverBuildPath: "server/index.mjs", + serverModuleFormat: "esm", tailwind: true, - routes(defineRoutes) { - return defineRoutes((route) => { + routes: (defineRoutes) => + defineRoutes((route) => { if (process.env.NODE_ENV === "production") return; console.log("⚠️ Test routes enabled."); - const appDir = path.join(__dirname, "app"); + const appDir = path.join(process.cwd(), "app"); route( "__tests/create-user", path.relative(appDir, "cypress/support/test-routes/create-user.ts"), ); - }); - }, + }), }; diff --git a/remix.init/gitignore b/remix.init/gitignore index cd3da90..be0c7d5 100644 --- a/remix.init/gitignore +++ b/remix.init/gitignore @@ -1,9 +1,9 @@ node_modules -/server/index.js -/server/index.js.map -/server/metafile.* /public/build +/server/index.mjs +/server/index.mjs.map +/server/metafile.* preferences.arc sam.json sam.yaml diff --git a/remix.init/index.js b/remix.init/index.js index 8009282..830f8e0 100644 --- a/remix.init/index.js +++ b/remix.init/index.js @@ -201,7 +201,7 @@ const main = async ({ isTypeScript, packageManager, rootDirectory }) => { fs.rm(path.join(rootDirectory, ".github", "workflows", "no-response.yml")), fs.rm(path.join(rootDirectory, ".github", "dependabot.yml")), fs.rm(path.join(rootDirectory, ".github", "PULL_REQUEST_TEMPLATE.md")), - fs.rm(path.join(rootDirectory, ".eslintrc.repo.js")), + fs.rm(path.join(rootDirectory, ".eslintrc.repo.cjs")), fs.rm(path.join(rootDirectory, "LICENSE.md")), ]; diff --git a/tsconfig.json b/tsconfig.json index 9bacef8..76e38a0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,7 @@ "isolatedModules": true, "esModuleInterop": true, "jsx": "react-jsx", - "module": "CommonJS", + "module": "ES2020", "moduleResolution": "node", "resolveJsonModule": true, "target": "ES2019",