feat: replace create-react-app with vite (#34)

* feat: replace `create-react-app` with `vite`

* fix: correct axios-override extension

* chore: add more extensions to lint-staged

apps/frontend/craco.config.js

@@ -1,44 +0,0 @@
-const path = require("path");
-const webpack = require("webpack");
-
-module.exports = {
-  eslint: {
-    enable: false,
-  },
-  webpack: {
-    alias: {
-      dotenv: path.resolve(__dirname, "src/dotenv-browser-stub.js"),
-      "../src/fetchers/wakatime.js": path.resolve(
-        __dirname,
-        "src/wakatime-override.js",
-      ),
-    },
-
-    configure: (webpackConfig) => {
-      webpackConfig.resolve.fallback = {
-        ...webpackConfig.resolve.fallback,
-        pg: false,
-        path: require.resolve("path-browserify"),
-        querystring: require.resolve("querystring-es3"),
-        url: require.resolve("url/"),
-        http: require.resolve("stream-http"),
-        util: require.resolve("util/"),
-        stream: require.resolve("stream-browserify"),
-        buffer: require.resolve("buffer/"),
-        fs: false,
-        net: false,
-      };
-
-      // remove the DefinePlugin, which (only) replaces process.env in code
-      webpackConfig.plugins = webpackConfig.plugins.filter(function (plugin) {
-        let isDefinePlugin = plugin instanceof webpack.DefinePlugin;
-        if (isDefinePlugin) {
-          console.log("filtered plugin:", plugin);
-        }
-        return !isDefinePlugin;
-      });
-
-      return webpackConfig;
-    },
-  },
-};

apps/frontend/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
@@ -23,26 +23,22 @@
       content="Dynamically generate GitHub stats for your READMEs."
     />
 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- 
+      https://vite.dev/guide/assets#the-public-directory
+    -->
+
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" href="/manifest.json" />
 
     <title>GitHub Stats Extended</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>

apps/frontend/package.json

@@ -5,43 +5,36 @@
   "dependencies": {
     "axios": "^1",
     "axios-cache-interceptor": "^1",
-    "buffer": "^6.0.3",
     "daisyui": "2.31.0",
     "emoji-name-map": "^2.0.3",
     "github-username-regex": "^1.0.0",
-    "path-browserify": "^1.0.1",
     "prop-types": "^15.8.1",
-    "querystring-es3": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-loading-skeleton": "^3.3.1",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.18.0",
-    "react-scripts": "^5.0.1",
     "react-spinners": "^0.13.8",
     "react-toastify": "^9.1.3",
     "redux": "^4.2.1",
     "save-svg-as-png": "^1.4.17",
-    "stream-browserify": "^3.0.0",
-    "stream-http": "^3.2.0",
-    "url": "^0.11.4",
-    "util": "^0.12.5",
     "uuid": "^9.0.1",
     "word-wrap": "^1.2.5"
   },
   "devDependencies": {
-    "@craco/craco": "^7.1.0",
+    "@vitejs/plugin-react-swc": "4.2.2",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5",
-    "webpack": "5.104.1"
+    "vite": "7.3.1",
+    "vite-plugin-node-polyfills": "0.25.0"
   },
   "scripts": {
-    "start-trends": "craco start",
-    "build-trends": "craco build",
-    "test": "craco test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "build-trends": "vite build",
+    "preview": "vite preview"
   },
   "homepage": "/frontend",
   "browserslist": {

apps/frontend/vite.config.ts

@@ -0,0 +1,56 @@
+import path from "node:path";
+
+import { defineConfig } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import react from "@vitejs/plugin-react-swc";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: "/frontend/",
+  plugins: [
+    nodePolyfills({
+      include: [
+        "path",
+        "querystring",
+        "url",
+        "http",
+        "util",
+        "stream",
+        "buffer",
+      ],
+      exclude: ["fs", "net"],
+    }),
+
+    react(),
+  ],
+  build: {
+    outDir: "build",
+    rollupOptions: {
+      external: ["pg"],
+    },
+    /** @todo use chunks to split bundle? */
+    chunkSizeWarningLimit: 800,
+  },
+  define: {
+    // Prevent Vite from injecting process.env like Webpack DefinePlugin
+    "process.env": {},
+  },
+  resolve: {
+    alias: [
+      {
+        find: "dotenv",
+        replacement: path.resolve(
+          import.meta.dirname,
+          "src/dotenv-browser-stub.js",
+        ),
+      },
+      {
+        find: "./src/fetchers/wakatime.js",
+        replacement: path.resolve(
+          import.meta.dirname,
+          "src/wakatime-override.js",
+        ),
+      },
+    ],
+  },
+});

eslint.config.js

@@ -102,7 +102,7 @@ export default defineConfig(
       },
     },
     rules: {
-      "react/jsx-uses-react": "error",
+      "react/jsx-no-undef": "error",
       "react/jsx-uses-vars": "error",
       "react/no-array-index-key": "warn",
       "react-hooks/rules-of-hooks": "error",

knip.jsonc

@@ -19,18 +19,11 @@
     },
     "apps/frontend": {
       "entry": [
-        "src/index.js",
+        "src/index.jsx",
         "src/dotenv-browser-stub.js",
-        "src/wakatime-override.js",
-
-        "craco.config.js"
+        "src/wakatime-override.js"
       ],
       "ignoreDependencies": [
-        // used by webpack as polyfill
-        "url",
-        "buffer",
-        "util",
-
         // below dependencies are added because backend folder is copied inside frontend folder,
         // so some of his dependencies must be present here
         "github-username-regex",

package.json

@@ -14,7 +14,8 @@
     "husky": "9.1.7",
     "knip": "5.81.0",
     "lint-staged": "16.2.7",
-    "prettier": "3.7.4"
+    "prettier": "3.7.4",
+    "typescript": "5.9.3"
   },
   "scripts": {
     "prepare": "husky",
@@ -25,13 +26,6 @@
     "lint:knip": "knip"
   },
   "lint-staged": {
-    "*.{js,ts,css}": "prettier --write"
-  },
-  "resolutions": {
-    "eslint": "9.39.2",
-    "eslint-plugin-react-hooks": "7.0.1",
-    "@svgr/webpack": "^6.0.0",
-    "resolve-url-loader": "^5.0.0",
-    "webpack-dev-server": "^5.2.2"
+    "*.{js,jsx,ts,tsx,css,json,jsonc,yaml,yml}": "prettier --write"
   }
 }

pnpm-workspace.yaml

@@ -6,6 +6,6 @@ catalog: null
 minimumReleaseAge: 10080
 
 onlyBuiltDependencies:
-  - core-js
-  - core-js-pure
+  - "@swc/core"
+  - esbuild
   - unrs-resolver