From 235eb537020656cd26e67300c0a9a6b6a24081ad Mon Sep 17 00:00:00 2001 From: Tarun Gupta Date: Mon, 18 Mar 2024 18:54:16 +0530 Subject: [PATCH 1/5] feat: upgraded remix compiler to remix vite --- .eslintrc.js => .eslintrc.cjs | 0 Dockerfile | 6 +++--- app/root.tsx | 12 ++---------- remix.env.d.ts => env.d.ts | 2 +- package.json | 13 ++++++------- postcss.config.js | 2 +- remix.config.js | 6 ------ tsconfig.json | 6 +++--- vite.config.ts | 18 ++++++++++++++++++ 9 files changed, 34 insertions(+), 31 deletions(-) rename .eslintrc.js => .eslintrc.cjs (100%) rename remix.env.d.ts => env.d.ts (50%) delete mode 100644 remix.config.js create mode 100644 vite.config.ts diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 100% rename from .eslintrc.js rename to .eslintrc.cjs diff --git a/Dockerfile b/Dockerfile index 093ace78..6bf9dd2e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -52,10 +52,10 @@ 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 -ENTRYPOINT [ "./start.sh" ] +ENTRYPOINT [ "./start.sh" ] \ No newline at end of file diff --git a/app/root.tsx b/app/root.tsx index 426fac35..88409941 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,9 +1,7 @@ -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, - LiveReload, Meta, Outlet, Scripts, @@ -11,12 +9,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) }); @@ -35,7 +28,6 @@ export default function App() { - ); 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/package.json b/package.json index 63c0ad81..5cce78dd 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,17 @@ { "name": "indie-stack-template", + "type": "module", "private": true, "sideEffects": false, "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": "remix 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": "remix-serve ./build/server/index.js", + "start:mocks": "binode --require ./mocks -- @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", @@ -27,7 +27,6 @@ ], "dependencies": { "@prisma/client": "^4.16.2", - "@remix-run/css-bundle": "*", "@remix-run/node": "*", "@remix-run/react": "*", "@remix-run/serve": "*", @@ -80,7 +79,7 @@ "ts-node": "^10.9.1", "tsconfig-paths": "^4.2.0", "typescript": "^5.2.2", - "vite": "^4.5.0", + "vite": "^5.1.6", "vite-tsconfig-paths": "^4.2.1", "vitest": "^0.34.6" }, 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..935f285f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,14 +1,14 @@ { "exclude": ["./cypress", "./cypress.config.ts"], - "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["env.d.ts", "**/*.ts", "**/*.tsx"], "compilerOptions": { "lib": ["DOM", "DOM.Iterable", "ES2020"], "types": ["vitest/globals"], "isolatedModules": true, "esModuleInterop": true, "jsx": "react-jsx", - "module": "CommonJS", - "moduleResolution": "node", + "module": "ESNext", + "moduleResolution": "Bundler", "resolveJsonModule": true, "target": "ES2020", "strict": true, diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 00000000..0f801591 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,18 @@ +import { 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: ["**/*.css"], + }), + tsconfigPaths(), + ], +}); From ef595a4c0373b19478c879f26285044a17eeca27 Mon Sep 17 00:00:00 2001 From: Tarun Gupta Date: Mon, 18 Mar 2024 19:17:43 +0530 Subject: [PATCH 2/5] update prisma seed cmd --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5cce78dd..e58e2536 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,6 @@ "node": ">=18.0.0" }, "prisma": { - "seed": "ts-node -r tsconfig-paths/register prisma/seed.ts" + "seed": "ts-node-esm -r tsconfig-paths/register prisma/seed.ts" } } From 3bf350e69227de324be91eed10ad469e7f2e1d0a Mon Sep 17 00:00:00 2001 From: Tarun Gupta Date: Tue, 19 Mar 2024 14:25:22 +0530 Subject: [PATCH 3/5] module changes --- cypress/{.eslintrc.js => .eslintrc.cjs} | 0 mocks/index.js | 4 ++-- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) rename cypress/{.eslintrc.js => .eslintrc.cjs} (100%) 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 41246682..9c4e4a7e 100644 --- a/mocks/index.js +++ b/mocks/index.js @@ -1,5 +1,5 @@ -const { rest } = require("msw"); -const { setupServer } = require("msw/node"); +import { rest } 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 e58e2536..fc063b80 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .", "setup": "prisma generate && prisma migrate deploy && prisma db seed", "start": "remix-serve ./build/server/index.js", - "start:mocks": "binode --require ./mocks -- @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", From 350befb8c852f670c1ffb57bccb83f0f9ba330b2 Mon Sep 17 00:00:00 2001 From: Tarun Gupta Date: Sat, 4 May 2024 19:03:15 +0530 Subject: [PATCH 4/5] fix: using tsx instead of ts-node --- cypress/support/commands.ts | 20 +++++++++----------- mocks/index.js | 11 +++++------ 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 23815c92..b5e54343 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -49,14 +49,14 @@ function login({ email?: string; } = {}) { cy.then(() => ({ email })).as("user"); - cy.exec( - `npx ts-node -r tsconfig-paths/register ./cypress/support/create-user.ts "${email}"`, - ).then(({ stdout }) => { - const cookieValue = stdout - .replace(/.*(?.*)<\/cookie>.*/s, "$") - .trim(); - cy.setCookie("__session", cookieValue); - }); + cy.exec(`tsx ./cypress/support/create-user.ts "${email}"`).then( + ({ stdout }) => { + const cookieValue = stdout + .replace(/.*(?.*)<\/cookie>.*/s, "$") + .trim(); + cy.setCookie("__session", cookieValue); + }, + ); return cy.get("@user"); } @@ -75,9 +75,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}"`, - ); + cy.exec(`tsx ./cypress/support/delete-user.ts "${email}"`); cy.clearCookie("__session"); } diff --git a/mocks/index.js b/mocks/index.js index ca2210ce..5d894559 100644 --- a/mocks/index.js +++ b/mocks/index.js @@ -1,15 +1,14 @@ -const { http, passthrough } = require("msw"); -const { setupServer } = require("msw/node"); +import { rest } from "msw"; +import { setupServer } from "msw/node"; // put one-off handlers that don't really need an entire file to themselves here const miscHandlers = [ - http.post(`${process.env.REMIX_DEV_HTTP_ORIGIN}/ping`, () => passthrough()), + rest.post(`${process.env.REMIX_DEV_HTTP_ORIGIN}/ping`, (req) => + req.passthrough(), + ), ]; - const server = setupServer(...miscHandlers); - server.listen({ onUnhandledRequest: "bypass" }); console.info("🔶 Mock server running"); - process.once("SIGINT", () => server.close()); process.once("SIGTERM", () => server.close()); From 4a98d2f219afe23a603ccd547b720d126e681f5d Mon Sep 17 00:00:00 2001 From: Tarun Gupta Date: Sat, 4 May 2024 19:31:17 +0530 Subject: [PATCH 5/5] fix: http import for msw --- mocks/index.js | 4 ++-- package.json | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/mocks/index.js b/mocks/index.js index 5d894559..5ce07d9d 100644 --- a/mocks/index.js +++ b/mocks/index.js @@ -1,9 +1,9 @@ -import { rest } from "msw"; +import { http } from "msw"; import { setupServer } from "msw/node"; // 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) => + http.post(`${process.env.REMIX_DEV_HTTP_ORIGIN}/ping`, (req) => req.passthrough(), ), ]; diff --git a/package.json b/package.json index ef8728ff..e27f9bfb 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,8 @@ "sideEffects": false, "scripts": { "build": "remix vite:build", - "dev": "remix vite:dev", + "dev": "binode --import ./mocks/index.js -- @remix-run/dev:remix 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/server/index.js", @@ -17,7 +16,8 @@ "pretest:e2e:run": "npm run build", "test:e2e:run": "cross-env PORT=8811 start-server-and-test start:mocks http://localhost:8811 \"npx cypress run\"", "typecheck": "tsc && tsc -p cypress", - "validate": "run-p \"test -- --run\" lint typecheck test:e2e:run" + "validate": "run-p \"test -- --run\" lint typecheck test:e2e:run", + "prisma:studio": "prisma studio" }, "prettier": {}, "eslintIgnore": [