From eead4049961d5df5c0ab38e540520e078ec5d496 Mon Sep 17 00:00:00 2001 From: Shmuli Margulies Date: Thu, 1 Feb 2024 16:27:33 +0000 Subject: [PATCH 01/11] add vite --- .eslintrc.js => .eslintrc.cjs | 2 +- app/root.tsx | 12 +++--------- cypress/{.eslintrc.js => .eslintrc.cjs} | 0 cypress/support/commands.ts | 4 ++-- cypress/support/delete-user.ts | 2 +- remix.env.d.ts => env.d.ts | 2 +- mocks/{index.js => index.cjs} | 0 package.json | 15 ++++++++------- postcss.config.js | 2 +- remix.config.js | 6 ------ tsconfig.json | 12 ++++++------ vite.config.ts | 20 ++++++++++++++++++++ 12 files changed, 43 insertions(+), 34 deletions(-) rename .eslintrc.js => .eslintrc.cjs (98%) rename cypress/{.eslintrc.js => .eslintrc.cjs} (100%) rename remix.env.d.ts => env.d.ts (50%) rename mocks/{index.js => index.cjs} (100%) delete mode 100644 remix.config.js create mode 100644 vite.config.ts diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 98% rename from .eslintrc.js rename to .eslintrc.cjs index 3365bc62..171a048c 100644 --- a/.eslintrc.js +++ b/.eslintrc.cjs @@ -127,7 +127,7 @@ module.exports = { // Node { - files: [".eslintrc.js", "mocks/**/*.js"], + files: [".eslintrc.cjs", "mocks/**/*.cjs"], env: { node: true, }, diff --git a/app/root.tsx b/app/root.tsx index 426fac35..caf482c9 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,5 +1,4 @@ -import { cssBundleHref } from "@remix-run/css-bundle"; -import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node"; +import type { LoaderFunctionArgs } from "@remix-run/node"; import { json } from "@remix-run/node"; import { Links, @@ -11,12 +10,7 @@ import { } from "@remix-run/react"; import { getUser } from "~/session.server"; -import stylesheet from "~/tailwind.css"; - -export const links: LinksFunction = () => [ - { rel: "stylesheet", href: stylesheet }, - ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), -]; +import "~/tailwind.css"; export const loader = async ({ request }: LoaderFunctionArgs) => { return json({ user: await getUser(request) }); @@ -34,8 +28,8 @@ 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/cypress/support/commands.ts b/cypress/support/commands.ts index f4875c19..d7e97ab9 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -50,7 +50,7 @@ function login({ } = {}) { cy.then(() => ({ email })).as("user"); cy.exec( - `npx ts-node -r tsconfig-paths/register ./cypress/support/create-user.ts "${email}"`, + `npx ts-node -r tsconfig-paths/register --esm ./cypress/support/create-user.ts "${email}"`, ).then(({ stdout }) => { const cookieValue = stdout .replace(/.*(?.*)<\/cookie>.*/s, "$") @@ -76,7 +76,7 @@ function cleanupUser({ email }: { email?: string } = {}) { function deleteUserByEmail(email: string) { cy.exec( - `npx ts-node -r tsconfig-paths/register ./cypress/support/delete-user.ts "${email}"`, + `npx ts-node -r tsconfig-paths/register --esm ./cypress/support/delete-user.ts "${email}"`, ); cy.clearCookie("__session"); } diff --git a/cypress/support/delete-user.ts b/cypress/support/delete-user.ts index fd1fb025..01727a42 100644 --- a/cypress/support/delete-user.ts +++ b/cypress/support/delete-user.ts @@ -1,6 +1,6 @@ // Use this to delete a user by their email // Simply call this with: -// npx ts-node -r tsconfig-paths/register ./cypress/support/delete-user.ts username@example.com, +// npx ts-node -r tsconfig-paths/register --esm ./cypress/support/delete-user.ts username@example.com, // and that user will get deleted import { PrismaClientKnownRequestError } from "@prisma/client/runtime"; diff --git a/remix.env.d.ts b/env.d.ts similarity index 50% rename from remix.env.d.ts rename to env.d.ts index dcf8c45e..8d2f9518 100644 --- a/remix.env.d.ts +++ b/env.d.ts @@ -1,2 +1,2 @@ -/// +/// /// diff --git a/mocks/index.js b/mocks/index.cjs similarity index 100% rename from mocks/index.js rename to mocks/index.cjs diff --git a/package.json b/package.json index 63c0ad81..905403a4 100644 --- a/package.json +++ b/package.json @@ -2,16 +2,16 @@ "name": "indie-stack-template", "private": true, "sideEffects": false, + "type": "module", "scripts": { - "build": "remix build", - "dev": "remix dev -c \"npm run dev:serve\"", - "dev:serve": "binode --require ./mocks -- @remix-run/serve:remix-serve ./build/index.js", + "build": "remix vite:build", + "dev": "binode --require ./mocks/index.cjs -- vite:vite dev", "format": "prettier --write .", "format:repo": "npm run format && npm run lint -- --fix", "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .", "setup": "prisma generate && prisma migrate deploy && prisma db seed", - "start": "remix-serve ./build/index.js", - "start:mocks": "binode --require ./mocks -- @remix-run/serve:remix-serve ./build/index.js", + "start": "dotenv -e .env remix-serve ./build/server/index.js", + "start:mocks": "binode --require ./mocks/index.cjs -- @remix-run/serve:remix-serve ./build/server/index.js", "test": "vitest", "test:e2e:dev": "start-server-and-test dev http://localhost:3000 \"npx cypress open\"", "pretest:e2e:run": "npm run build", @@ -32,6 +32,7 @@ "@remix-run/react": "*", "@remix-run/serve": "*", "bcryptjs": "^2.4.3", + "dotenv-cli": "^7.3.0", "isbot": "^3.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -80,7 +81,7 @@ "ts-node": "^10.9.1", "tsconfig-paths": "^4.2.0", "typescript": "^5.2.2", - "vite": "^4.5.0", + "vite": "^5.0.12", "vite-tsconfig-paths": "^4.2.1", "vitest": "^0.34.6" }, @@ -88,6 +89,6 @@ "node": ">=18.0.0" }, "prisma": { - "seed": "ts-node -r tsconfig-paths/register prisma/seed.ts" + "seed": "ts-node -r tsconfig-paths/register --esm prisma/seed.ts" } } diff --git a/postcss.config.js b/postcss.config.js index 12a703d9..2aa7205d 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,4 +1,4 @@ -module.exports = { +export default { plugins: { tailwindcss: {}, autoprefixer: {}, diff --git a/remix.config.js b/remix.config.js deleted file mode 100644 index 29582b29..00000000 --- a/remix.config.js +++ /dev/null @@ -1,6 +0,0 @@ -/** @type {import('@remix-run/dev').AppConfig} */ -module.exports = { - cacheDirectory: "./node_modules/.cache/remix", - ignoredRouteFiles: ["**/.*", "**/*.test.{ts,tsx}"], - serverModuleFormat: "cjs", -}; diff --git a/tsconfig.json b/tsconfig.json index c0a761dd..17738d90 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,16 +1,16 @@ { - "exclude": ["./cypress", "./cypress.config.ts"], - "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["./cypress", "cypress.config.ts"], + "include": ["env.d.ts", "**/*.ts", "**/*.tsx", "cypress.config.ts", "cypress/support/e2e.ts"], "compilerOptions": { - "lib": ["DOM", "DOM.Iterable", "ES2020"], + "lib": ["DOM", "DOM.Iterable", "ES2022"], "types": ["vitest/globals"], "isolatedModules": true, "esModuleInterop": true, "jsx": "react-jsx", - "module": "CommonJS", - "moduleResolution": "node", + "module": "ESNext", + "moduleResolution": "Bundler", "resolveJsonModule": true, - "target": "ES2020", + "target": "ES2022", "strict": true, "allowJs": true, "forceConsistentCasingInFileNames": true, diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 00000000..9ab6b916 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,20 @@ +/// +/// +import { unstable_vitePlugin as remix } from "@remix-run/dev"; +import { installGlobals } from "@remix-run/node"; +import { defineConfig } from "vite"; +import tsconfigPaths from "vite-tsconfig-paths"; + +installGlobals(); + +export default defineConfig({ + server: { + port: 3000, + }, + plugins: [ + remix({ + ignoredRouteFiles: ["**/.*", "**/*.test.{ts,tsx}"], + }), + tsconfigPaths(), + ], +}); From 22b4af9bca2fbdcb8b07470b4f8d032ff3046897 Mon Sep 17 00:00:00 2001 From: Shmuli Margulies Date: Thu, 1 Feb 2024 17:09:01 +0000 Subject: [PATCH 02/11] removed unecessary livereload --- app/root.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/root.tsx b/app/root.tsx index caf482c9..88409941 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -2,7 +2,6 @@ import type { LoaderFunctionArgs } from "@remix-run/node"; import { json } from "@remix-run/node"; import { Links, - LiveReload, Meta, Outlet, Scripts, @@ -28,7 +27,6 @@ export default function App() { - From 25d140d38d72e92ffbe922de08c9408e7bf40d97 Mon Sep 17 00:00:00 2001 From: Shmuli Margulies Date: Thu, 1 Feb 2024 17:12:15 +0000 Subject: [PATCH 03/11] update dockerfile for vite --- Dockerfile | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Dockerfile b/Dockerfile index 093ace78..74929254 100644 --- a/Dockerfile +++ b/Dockerfile @@ -52,8 +52,8 @@ WORKDIR /myapp COPY --from=production-deps /myapp/node_modules /myapp/node_modules COPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma -COPY --from=build /myapp/build /myapp/build -COPY --from=build /myapp/public /myapp/public +COPY --from=build /myapp/build/server /myapp/build/server +COPY --from=build /myapp/build/client /myapp/build/client COPY --from=build /myapp/package.json /myapp/package.json COPY --from=build /myapp/start.sh /myapp/start.sh COPY --from=build /myapp/prisma /myapp/prisma From 6395af678c7d925a7c9e94bae07d11209e6517b7 Mon Sep 17 00:00:00 2001 From: Shmuli Margulies Date: Thu, 1 Feb 2024 19:02:55 +0000 Subject: [PATCH 04/11] remove dep on cypress for deploys --- .github/workflows/deploy.yml | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 464ceff0..f8629f64 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -113,7 +113,7 @@ jobs: deploy: name: 🚀 Deploy runs-on: ubuntu-latest - needs: [lint, typecheck, vitest, cypress] + needs: [lint, typecheck, vitest] # only deploy main/dev branch on pushes if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }} diff --git a/README.md b/README.md index d9895663..d274954c 100644 --- a/README.md +++ b/README.md @@ -176,7 +176,7 @@ This project uses TypeScript. It's recommended to get TypeScript set up for your ### Linting -This project uses ESLint for linting. That is configured in `.eslintrc.js`. +This project uses ESLint for linting. That is configured in `.eslintrc.cjs`. ### Formatting From 9d803364a7e5cc17a71c8450becc1ad98da40356 Mon Sep 17 00:00:00 2001 From: Shmuli Margulies Date: Tue, 7 May 2024 12:04:57 +0100 Subject: [PATCH 05/11] bump remix vite api usage --- vite.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.ts b/vite.config.ts index 9ab6b916..2553996d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,6 @@ /// /// -import { unstable_vitePlugin as remix } from "@remix-run/dev"; +import { vitePlugin as remix } from "@remix-run/dev"; import { installGlobals } from "@remix-run/node"; import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths"; From 4e2ecb1351e86a8e2a6e78eb63cb19a2d718d84d Mon Sep 17 00:00:00 2001 From: Shmuli Margulies Date: Tue, 7 May 2024 12:06:02 +0100 Subject: [PATCH 06/11] updated seed command for node 20 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1eeb8c2e..613e6647 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,6 @@ "node": ">=18.0.0" }, "prisma": { - "seed": "ts-node -r tsconfig-paths/register --esm prisma/seed.ts" + "seed": "node --loader ts-node/esm -r tsconfig-paths/register prisma/seed.ts" } } From 915bc707c1b26c014c3272774ac704d46401e45d Mon Sep 17 00:00:00 2001 From: Shmuli Margulies Date: Tue, 7 May 2024 12:44:00 +0100 Subject: [PATCH 07/11] use vite-node for better esm support --- cypress/support/commands.ts | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index fcbae723..a12fc624 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -50,7 +50,7 @@ function login({ } = {}) { cy.then(() => ({ email })).as("user"); cy.exec( - `npx ts-node -r tsconfig-paths/register --esm ./cypress/support/create-user.ts "${email}"`, + `npx vite-node ./cypress/support/create-user.ts "${email}"`, ).then(({ stdout }) => { const cookieValue = stdout .replace(/.*(?.*)<\/cookie>.*/s, "$") @@ -76,7 +76,7 @@ function cleanupUser({ email }: { email?: string } = {}) { function deleteUserByEmail(email: string) { cy.exec( - `npx ts-node -r tsconfig-paths/register --esm ./cypress/support/delete-user.ts "${email}"`, + `npx vite-node ./cypress/support/delete-user.ts "${email}"`, ); cy.clearCookie("__session"); } diff --git a/package.json b/package.json index 613e6647..973c64d0 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,6 @@ "node": ">=18.0.0" }, "prisma": { - "seed": "node --loader ts-node/esm -r tsconfig-paths/register prisma/seed.ts" + "seed": "vite-node prisma/seed.ts" } } From 03583a2732c06739a7ea26318ea459ca96910225 Mon Sep 17 00:00:00 2001 From: Shmuli Margulies Date: Tue, 7 May 2024 13:01:25 +0100 Subject: [PATCH 08/11] replaced ts-node with vite-node to simplify running esm scripts --- cypress/support/create-user.ts | 2 +- cypress/support/delete-user.ts | 2 +- package.json | 2 +- remix.init/index.js | 8 ++++---- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/cypress/support/create-user.ts b/cypress/support/create-user.ts index fa33b948..52b08dbd 100644 --- a/cypress/support/create-user.ts +++ b/cypress/support/create-user.ts @@ -1,6 +1,6 @@ // Use this to create a new user and login with that user // Simply call this with: -// npx ts-node -r tsconfig-paths/register ./cypress/support/create-user.ts username@example.com, +// npx vite-node ./cypress/support/create-user.ts username@example.com, // and it will log out the cookie value you can use to interact with the server // as that new user. diff --git a/cypress/support/delete-user.ts b/cypress/support/delete-user.ts index 01727a42..7e8eaaa6 100644 --- a/cypress/support/delete-user.ts +++ b/cypress/support/delete-user.ts @@ -1,6 +1,6 @@ // Use this to delete a user by their email // Simply call this with: -// npx ts-node -r tsconfig-paths/register --esm ./cypress/support/delete-user.ts username@example.com, +// npx vite-node ./cypress/support/delete-user.ts username@example.com, // and that user will get deleted import { PrismaClientKnownRequestError } from "@prisma/client/runtime"; diff --git a/package.json b/package.json index 973c64d0..46bd29dd 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "prisma": "^4.16.2", "start-server-and-test": "^2.0.3", "tailwindcss": "^3.4.3", - "ts-node": "^10.9.2", + "vite-node":"^1.6.0", "tsconfig-paths": "^4.2.0", "typescript": "^5.4.5", "vite": "^5.2.11", diff --git a/remix.init/index.js b/remix.init/index.js index 94b1200e..9abac82b 100644 --- a/remix.init/index.js +++ b/remix.init/index.js @@ -10,8 +10,8 @@ const semver = require("semver"); const cleanupCypressFiles = ({ fileEntries, packageManager }) => fileEntries.flatMap(([filePath, content]) => { const newContent = content.replace( - new RegExp("npx ts-node", "g"), - packageManager.name === "bun" ? "bun" : `${packageManager.exec} ts-node`, + new RegExp("npx vite-node", "g"), + packageManager.name === "bun" ? "bun" : `${packageManager.exec} vite-node`, ); return [fs.writeFile(filePath, newContent)]; @@ -87,13 +87,13 @@ const updatePackageJson = ({ APP_NAME, packageJson, packageManager }) => { name: APP_NAME, devDependencies: packageManager.name === "bun" - ? removeUnusedDependencies(devDependencies, ["ts-node"]) + ? removeUnusedDependencies(devDependencies, ["vite-node"]) : devDependencies, prisma: { ...prisma, seed: packageManager.name === "bun" - ? prismaSeed.replace("ts-node", "bun") + ? prismaSeed.replace("vite-node", "bun") : prismaSeed, }, scripts, From b5b8cabcb297e457ce4371d56a3c1031c973ceb0 Mon Sep 17 00:00:00 2001 From: Shmuli Margulies Date: Mon, 13 May 2024 13:29:07 +0100 Subject: [PATCH 09/11] make mocks esm compatible --- .eslintrc.cjs | 2 +- mocks/{index.cjs => index.js} | 4 ++-- package.json | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) rename mocks/{index.cjs => index.js} (82%) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 171a048c..1c02c8de 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -127,7 +127,7 @@ module.exports = { // Node { - files: [".eslintrc.cjs", "mocks/**/*.cjs"], + files: [".eslintrc.cjs", "mocks/**/*.js"], env: { node: true, }, diff --git a/mocks/index.cjs b/mocks/index.js similarity index 82% rename from mocks/index.cjs rename to mocks/index.js index ca2210ce..2cbbbe76 100644 --- a/mocks/index.cjs +++ b/mocks/index.js @@ -1,5 +1,5 @@ -const { http, passthrough } = require("msw"); -const { setupServer } = require("msw/node"); +import { http, passthrough } from "msw"; +import { setupServer } from "msw/node"; // put one-off handlers that don't really need an entire file to themselves here const miscHandlers = [ diff --git a/package.json b/package.json index 46bd29dd..ac86b285 100644 --- a/package.json +++ b/package.json @@ -5,13 +5,13 @@ "type": "module", "scripts": { "build": "remix vite:build", - "dev": "binode --require ./mocks/index.cjs -- vite:vite dev", + "dev": "binode --import ./mocks/index.js -- vite:vite dev", "format": "prettier --write .", "format:repo": "npm run format && npm run lint -- --fix", "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .", "setup": "prisma generate && prisma migrate deploy && prisma db seed", "start": "dotenv -e .env remix-serve ./build/server/index.js", - "start:mocks": "binode --require ./mocks/index.cjs -- @remix-run/serve:remix-serve ./build/server/index.js", + "start:mocks": "binode --import ./mocks/index.js -- @remix-run/serve:remix-serve ./build/server/index.js", "test": "vitest", "test:e2e:dev": "start-server-and-test dev http://localhost:3000 \"npx cypress open\"", "pretest:e2e:run": "npm run build", @@ -79,7 +79,7 @@ "prisma": "^4.16.2", "start-server-and-test": "^2.0.3", "tailwindcss": "^3.4.3", - "vite-node":"^1.6.0", + "vite-node": "^1.6.0", "tsconfig-paths": "^4.2.0", "typescript": "^5.4.5", "vite": "^5.2.11", From 9536621931e6a88d35e2713460cc230459c3ed88 Mon Sep 17 00:00:00 2001 From: Shmuli Margulies Date: Mon, 13 May 2024 13:30:10 +0100 Subject: [PATCH 10/11] reordered deps --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ac86b285..bc92deb6 100644 --- a/package.json +++ b/package.json @@ -79,10 +79,10 @@ "prisma": "^4.16.2", "start-server-and-test": "^2.0.3", "tailwindcss": "^3.4.3", - "vite-node": "^1.6.0", "tsconfig-paths": "^4.2.0", "typescript": "^5.4.5", "vite": "^5.2.11", + "vite-node": "^1.6.0", "vite-tsconfig-paths": "^4.3.2", "vitest": "^1.5.3" }, From 388dec75d863d8e38fb84ab7a510604f286cc7be Mon Sep 17 00:00:00 2001 From: Shmuli Margulies Date: Mon, 13 May 2024 13:34:51 +0100 Subject: [PATCH 11/11] added back deploy dep on cypress --- .github/workflows/deploy.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index e4943b35..3d622193 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -113,7 +113,7 @@ jobs: deploy: name: 🚀 Deploy runs-on: ubuntu-latest - needs: [lint, typecheck, vitest] + needs: [lint, typecheck, vitest, cypress] # only deploy main/dev branch on pushes if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}