From 788d398783e097f168457f98b0aaff486742ed5b Mon Sep 17 00:00:00 2001 From: Manuel Puchta Date: Fri, 8 Nov 2024 10:14:47 +0100 Subject: [PATCH] Move to Vite bundler Remix template commit ref: 6a9e17cd29fad733acf36a51936319702d05245c --- .dockerignore | 5 ++- .gitignore | 1 - Dockerfile | 4 +-- README.md | 3 +- app/root.tsx | 14 +++----- package-lock.json | 85 ++++++++++++++++++++++++++++++++++------------ package.json | 11 +++--- postcss.config.mjs | 3 ++ remix.config.js | 8 ----- remix.env.d.ts | 2 -- tsconfig.json | 3 ++ vite.config.ts | 10 ++++++ 12 files changed, 95 insertions(+), 54 deletions(-) create mode 100644 postcss.config.mjs delete mode 100644 remix.config.js delete mode 100644 remix.env.d.ts create mode 100644 vite.config.ts diff --git a/.dockerignore b/.dockerignore index 599a9d6..e533ec3 100644 --- a/.dockerignore +++ b/.dockerignore @@ -4,13 +4,12 @@ # Include files required for building the application (except for node_modules these are installed by docker) !app !public -public/build !LICENSE !package-lock.json !package.json !README.md -!remix.config.js -!remix.env.d.ts !SECURITY.md !tailwind.config.js !tsconfig.json +!postcss.config.mjs +!vite.config.ts \ No newline at end of file diff --git a/.gitignore b/.gitignore index a892466..a3b9d9d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ # Remix /.cache /build -/public/build # Logs logs diff --git a/Dockerfile b/Dockerfile index ea5996a..6feb46b 100644 --- a/Dockerfile +++ b/Dockerfile @@ -42,8 +42,8 @@ WORKDIR /home/node/src # Move only the files to the final image that are really needed COPY --chown=node:node package*.json LICENSE SECURITY.md ./ COPY --chown=node:node --from=production-dependencies /src/node_modules/ ./node_modules/ -COPY --chown=node:node --from=build /src/build/ ./build/ -COPY --chown=node:node --from=build /src/public/ ./public/ +COPY --chown=node:node --from=build /src/build/server ./build/server +COPY --chown=node:node --from=build /src/build/client ./build/client EXPOSE 3000 CMD ["npm", "run", "start"] diff --git a/README.md b/README.md index 9f88309..2705d74 100644 --- a/README.md +++ b/README.md @@ -96,7 +96,7 @@ docker run -d -p 3000:3000 --name a2j-kommunikationsplattform a2j-kommunikations The website is then available under http://localhost:3000 -If you want to include any additional files during the build that are not in the `app` or `public` directories you need to add them to the `.dockerignore` file. +If you want to include any additional files during the build that are not in the `app` directories you need to add them to the `.dockerignore` file. The `.github/workflows/pipeline.yml` GitHub Action includes a `build-and-push-image` job to build the Docker Image and push it to GitHub Packages. @@ -107,7 +107,6 @@ If you're familiar with deploying node applications, the built-in Remix app serv Make sure to deploy the output of `npm run build` - `build/` -- `public/build/` ## Architecture Decision Records diff --git a/app/root.tsx b/app/root.tsx index 8e83f17..7089c2e 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,33 +1,28 @@ -import { cssBundleHref } from "@remix-run/css-bundle"; import type { LinksFunction } from "@remix-run/node"; import { Links, - LiveReload, Meta, Outlet, Scripts, ScrollRestoration, } from "@remix-run/react"; -import stylesheet from "~/styles.css"; -import fontsStylesheet from "@digitalservice4germany/angie/fonts.css"; -import fontRegular from "~/../public/fonts/BundesSansWeb-Regular.woff2"; -import fontBold from "~/../public/fonts/BundesSansWeb-Bold.woff2"; +import stylesheet from "~/styles.css?url"; +import fontsStylesheet from "@digitalservice4germany/angie/fonts.css?url"; export const links: LinksFunction = () => [ - ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), { rel: "preload", as: "font", type: "font/woff2", - href: fontRegular, + href: "/fonts/BundesSansWeb-Regular.woff2", crossOrigin: "anonymous", }, { rel: "preload", as: "font", type: "font/woff2", - href: fontBold, + href: "/fonts/BundesSansWeb-Bold.woff2", crossOrigin: "anonymous", }, { rel: "stylesheet", href: fontsStylesheet }, @@ -48,7 +43,6 @@ export default function App() { - ); diff --git a/package-lock.json b/package-lock.json index 3f74e7c..780a1ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,6 @@ "dependencies": { "@digitalservice4germany/angie": "^1.2.0", "@digitalservice4germany/style-dictionary": "^2.0.0", - "@remix-run/css-bundle": "^2.13.1", "@remix-run/node": "^2.13.1", "@remix-run/react": "^2.13.1", "@remix-run/serve": "^2.13.1", @@ -34,7 +33,9 @@ "prettier": "3.3.3", "ts-jest": "^29.2.5", "ts-node": "^10.9.2", - "typescript": "^5.6.3" + "typescript": "^5.6.3", + "vite": "^5.4.10", + "vite-tsconfig-paths": "^5.1.0" }, "engines": { "node": ">=20.0.0" @@ -2281,15 +2282,6 @@ "node": ">=18" } }, - "node_modules/@remix-run/css-bundle": { - "version": "2.13.1", - "resolved": "https://registry.npmjs.org/@remix-run/css-bundle/-/css-bundle-2.13.1.tgz", - "integrity": "sha512-ukams+HcEaovitySAmH2Q8Gg8c6A3fKr5RJEpAn0NYk1Cc2t0fH05GVAGToOgtWeFeOUjREXAqk3+C76o0cHkg==", - "license": "MIT", - "engines": { - "node": ">=18.0.0" - } - }, "node_modules/@remix-run/dev": { "version": "2.13.1", "resolved": "https://registry.npmjs.org/@remix-run/dev/-/dev-2.13.1.tgz", @@ -4583,9 +4575,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001678", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001678.tgz", - "integrity": "sha512-RR+4U/05gNtps58PEBDZcPWTgEO2MBeoPZ96aQcjmfkBWRIDfN451fW2qyDA9/+HohLLIL5GqiMwA+IB1pWarw==", + "version": "1.0.30001679", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001679.tgz", + "integrity": "sha512-j2YqID/YwpLnKzCmBOS4tlZdWprXm3ZmQLBH9ZBXFOhoxLA46fwyBvx6toCBWBmnuwUY/qB3kEU6gFx8qgCroA==", "dev": true, "funding": [ { @@ -5637,9 +5629,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.52", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.52.tgz", - "integrity": "sha512-xtoijJTZ+qeucLBDNztDOuQBE1ksqjvNjvqFoST3nGC7fSpqJ+X6BdTBaY5BHG+IhWWmpc6b/KfpeuEDupEPOQ==", + "version": "1.5.55", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.55.tgz", + "integrity": "sha512-6maZ2ASDOTBtjt9FhqYPRnbvKU5tjG0IN9SztUOWYw2AzNDNpKJYLJmlK0/En4Hs/aiWnB+JZ+gW19PIGszgKg==", "dev": true, "license": "ISC" }, @@ -7693,6 +7685,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/globrex": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", + "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==", + "dev": true, + "license": "MIT" + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -12740,11 +12739,14 @@ } }, "node_modules/psl": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", - "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==", + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.10.0.tgz", + "integrity": "sha512-KSKHEbjAnpUuAUserOq0FxGXCUrzC3WniuSJhvdbs102rL55266ZcHBqLWOsG30spQMlPdpy7icATiAQehg/iA==", "dev": true, - "license": "MIT" + "license": "MIT", + "dependencies": { + "punycode": "^2.3.1" + } }, "node_modules/pump": { "version": "2.0.1", @@ -14928,6 +14930,27 @@ "devOptional": true, "license": "MIT" }, + "node_modules/tsconfck": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.4.tgz", + "integrity": "sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==", + "dev": true, + "license": "MIT", + "bin": { + "tsconfck": "bin/tsconfck.js" + }, + "engines": { + "node": "^18 || >=20" + }, + "peerDependencies": { + "typescript": "^5.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/tsconfig-paths": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz", @@ -15645,6 +15668,26 @@ "url": "https://opencollective.com/vitest" } }, + "node_modules/vite-tsconfig-paths": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.0.tgz", + "integrity": "sha512-Y1PLGHCJfAq1Zf4YIGEsmuU/NCX1epoZx9zwSr32Gjn3aalwQHRKr5aUmbo6r0JHeHkqmWpmDg7WOynhYXw1og==", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "^4.1.1", + "globrex": "^0.1.2", + "tsconfck": "^3.0.3" + }, + "peerDependencies": { + "vite": "*" + }, + "peerDependenciesMeta": { + "vite": { + "optional": true + } + } + }, "node_modules/vite/node_modules/@esbuild/android-arm": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz", diff --git a/package.json b/package.json index 01dc2e3..875ea65 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,9 @@ "sideEffects": false, "type": "module", "scripts": { - "build": "remix build", - "dev": "remix dev --manual", - "start": "remix-serve ./build/index.js", + "build": "remix vite:build", + "dev": "remix vite:dev", + "start": "remix-serve ./build/server/index.js", "typecheck": "tsc", "test": "jest test", "test:e2e": "playwright test --config=tests/e2e/playwright.config.ts", @@ -23,7 +23,6 @@ "dependencies": { "@digitalservice4germany/angie": "^1.2.0", "@digitalservice4germany/style-dictionary": "^2.0.0", - "@remix-run/css-bundle": "^2.13.1", "@remix-run/node": "^2.13.1", "@remix-run/react": "^2.13.1", "@remix-run/serve": "^2.13.1", @@ -49,7 +48,9 @@ "prettier": "3.3.3", "ts-jest": "^29.2.5", "ts-node": "^10.9.2", - "typescript": "^5.6.3" + "typescript": "^5.6.3", + "vite": "^5.4.10", + "vite-tsconfig-paths": "^5.1.0" }, "engines": { "node": ">=20.0.0" diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..b7624e2 --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,3 @@ +export default { + plugins: { tailwindcss: {} }, +}; diff --git a/remix.config.js b/remix.config.js deleted file mode 100644 index 7fac2d3..0000000 --- a/remix.config.js +++ /dev/null @@ -1,8 +0,0 @@ -/** @type {import('@remix-run/dev').AppConfig} */ -export default { - ignoredRouteFiles: ["**/.*"], - // appDirectory: "app", - // assetsBuildDirectory: "public/build", - // publicPath: "/build/", - // serverBuildPath: "build/index.js", -}; diff --git a/remix.env.d.ts b/remix.env.d.ts deleted file mode 100644 index dcf8c45..0000000 --- a/remix.env.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -/// -/// diff --git a/tsconfig.json b/tsconfig.json index 28cce91..d85a0ba 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,9 @@ { "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"], "compilerOptions": { + "types": ["@remix-run/node", "vite/client"], + "skipLibCheck": true, + "module": "ESNext", "lib": ["DOM", "DOM.Iterable", "ES2022"], "isolatedModules": true, "esModuleInterop": true, diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..2b6aff9 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,10 @@ +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({ + plugins: [remix(), tsconfigPaths()], +});