migrating from CRA to vite

codegouvfr · Mar 7, 2025 · a6dce69 · a6dce69
1 parent d8f1d0f
commit a6dce69
Show file tree

Hide file tree

Showing 14 changed files with 764 additions and 4,375 deletions.
diff --git a/Dockerfile.web b/Dockerfile.web
@@ -5,13 +5,14 @@ COPY package.json yarn.lock ./
 COPY api/package.json api/
 COPY web/package.json web/
 COPY web/public/ web/public/
+COPY web/index.html web/
 
 RUN yarn install --frozen-lockfile
 
 COPY turbo.json ./
 COPY api/ api/
 COPY web/src/ web/src/
-COPY web/config-overrides.js web/tsconfig.json web/
+COPY web/vite.config.ts web/tsconfig.json web/
 
 WORKDIR /app
 RUN yarn build

diff --git a/lefthook.yml b/lefthook.yml
@@ -4,15 +4,15 @@ pre-commit:
       run: yarn format
       stage_fixed: true
     lint:
-      run: turbo lint
+      run: yarn turbo lint
 
 pre-push:
   parallel: true
   commands:
     format:
-      run: turbo format:check
+      run: yarn turbo format:check
     lint:
-      run: turbo lint
+      run: yarn turbo lint
     typecheck:
-      run: turbo typecheck
+      run: yarn turbo typecheck
 
diff --git a/package.json b/package.json
@@ -10,7 +10,8 @@
     "test": "turbo test",
     "format": "turbo format",
     "format:check": "turbo format:check",
-    "fullcheck": "turbo typecheck format:check lint test"
+    "fullcheck": "turbo typecheck format:check lint test",
+    "turbo": "turbo"
   },
   "devDependencies": {
     "lefthook": "^1.10.10",

diff --git a/web/config-overrides.js b/web/config-overrides.js
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+
+    <title>
+      Le socle interministériel de logiciels libres est un ensemble de logiciels libres préconisés par l'État français depuis 2013.
+    </title>
+
+    <link rel="me" href="https://social.numerique.gouv.fr/@codegouvfr">
+    <link rel="apple-touch-icon" href="/dsfr/favicon/apple-touch-icon.png" />
+    <link rel="icon" href="/dsfr/favicon/favicon.svg" type="image/svg+xml" />
+    <link rel="shortcut icon" href="/dsfr/favicon/favicon.ico" type="image/x-icon" />
+    <link rel="manifest" href="/dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />
+
+    <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css" />
+    <link rel="stylesheet" href="/dsfr/dsfr.min.css" />
+
+    <!-- Primary Meta Tags -->
+    <meta name="title" content="Socle Interministériel des Logiciels Libres">
+    <meta name="description" content="Catalogue de référence de logiciels libres recommandés pour l'ensemble de l'administration.">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://code.gouv.fr/sill/">
+    <meta property="og:title" content="Socle Interministériel des Logiciels Libres">
+    <meta property="og:description" content="Catalogue de référence de logiciels libres recommandés pour l'ensemble de l'administration.">
+    <meta property="og:image" content="https://code.gouv.fr/sill/social-preview.png">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://code.gouv.fr/sill/">
+    <meta property="twitter:title" content="Socle Interministériel des Logiciels Libres">
+    <meta property="twitter:description" content="Catalogue de référence de logiciels libres recommandés pour l'ensemble de l'administration.">
+    <meta property="twitter:image" content="https://code.gouv.fr/sill/social-preview.png">
+
+    <script async="true">
+      var _paq = window._paq || []; _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "//stats.data.gouv.fr/"; _paq.push(['setTrackerUrl', u + 'piwik.php']); _paq.push(['setSiteId', '290']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.type = 'text/javascript'; g.async = true; g.defer = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })();
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <noscript>
+      <h3>No Javascript? No problem.</h3>
+      <p>We do understand why you might not want to use Javascript.</p>
+      <p>To access to the data exposed in this website, please refer to <a href="/api/sill.json">this link</a>.</p>
+      <h3>Pas de Javascript? Pas de souci.</h3>
+      <p>Nous comprenons bien pourquoi vous ne souhaitez pas utiliser de Javascript.</p>
+      <p>Pour accéder aux données exposées via ce site web, merci de vous référer à <a href="/api/sill.json">ce lien</a>.</p>
+    </noscript>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/web/package.json b/web/package.json
@@ -3,8 +3,8 @@
     "version": "1.41.5",
     "license": "MIT",
     "scripts": {
-        "dev": "react-app-rewired start",
-        "build": "react-app-rewired build",
+        "dev": "vite",
+        "build": "vite build",
         "storybook": "start-storybook -p 6006",
         "lint": "eslint --max-warnings=0 --ext .ts,.tsx,.js,.jsx src",
         "_format": "prettier '**/*.{ts,tsx,json,md}'",
@@ -15,7 +15,8 @@
         "prestorybook": "react-dsfr update-icons",
         "prestart": "react-dsfr update-icons",
         "prebuild": "react-dsfr update-icons",
-        "typecheck": "tsc --noEmit"
+        "typecheck": "tsc --noEmit",
+        "preview": "vite preview"
     },
     "dependencies": {
         "@codegouvfr/react-dsfr": "^1.16.0",
@@ -44,7 +45,6 @@
         "react-hook-form": "^7.43.0",
         "react-i18next": "^15.2.0",
         "react-markdown": "^9.0.1",
-        "react-scripts": "5.0.1",
         "react-waypoint": "^10.3.0",
         "redux-clean-architecture": "^4.1.1",
         "run-exclusive": "^2.2.19",
@@ -68,45 +68,80 @@
         "@types/node": "^18.19.64",
         "@types/react": "^18.0.18",
         "@types/react-dom": "^18.0.6",
-        "@typescript-eslint/eslint-plugin": "^4.24.0",
-        "@typescript-eslint/parser": "^4.24.0",
-        "circular-dependency-plugin": "^5.2.2",
-        "eslint-config-prettier": "^8.3.0",
+        "@typescript-eslint/eslint-plugin": "^5.62.0",
+        "@typescript-eslint/parser": "^5.62.0",
+        "@vitejs/plugin-react": "^4.3.4",
+        "eslint": "^8.56.0",
+        "eslint-config-prettier": "^10.1.1",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
+        "eslint-plugin-react": "^7.37.4",
+        "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-tss-unused-classes": "^1.0.3",
         "minimal-polyfills": "^2.2.3",
         "node-fetch": "^2.6.1",
         "prettier": "^3.5.1",
-        "react-app-rewired": "^2.2.1",
         "rimraf": "^5.0.5",
         "source-map-explorer": "^2.5.2",
         "storybook-dark-mode": "^2.0.5",
         "ts-node": "^10.2.1",
-        "typescript": "^5.7.3"
+        "typescript": "^5.7.3",
+        "vite": "^6.2.1",
+        "vite-plugin-svgr": "^4.3.0",
+        "vite-tsconfig-paths": "^5.1.4"
     },
     "eslintConfig": {
-        "plugins": [
-            "tss-unused-classes"
-        ],
         "extends": [
-            "react-app",
+            "eslint:recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:react/recommended",
+            "plugin:jsx-a11y/recommended",
             "prettier"
         ],
+        "parser": "@typescript-eslint/parser",
+        "plugins": [
+            "@typescript-eslint",
+            "react",
+            "react-hooks",
+            "import",
+            "tss-unused-classes",
+            "jsx-a11y"
+        ],
+        "settings": {
+            "react": {
+                "version": "detect"
+            }
+        },
         "rules": {
             "@typescript-eslint/no-redeclare": "off",
+            "@typescript-eslint/no-namespace": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-empty-interface": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/ban-ts-comment": "off",
+            "@typescript-eslint/no-empty-function": "off",
+            "@typescript-eslint/ban-types": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
             "import/no-anonymous-default-export": "off",
             "react-hooks/rules-of-hooks": "off",
             "react-hooks/exhaustive-deps": "off",
+            "react/jsx-key": "off",
+            "react/prop-types": "off",
+            "react/display-name": "off",
+            "react/react-in-jsx-scope": "off",
+            "react/self-closing-comp": "off",
+            "jsx-a11y/anchor-has-content": "off",
+            "jsx-a11y/anchor-is-valid": "off",
+            "jsx-a11y/click-events-have-key-events": "off",
+            "jsx-a11y/no-static-element-interactions": "off",
+            "jsx-a11y/no-noninteractive-element-interactions": "off",
             "no-labels": "off",
             "prefer-const": "off",
             "no-lone-blocks": "off",
-            "tss-unused-classes/unused-classes": "warn",
-            "no-sequences": "off",
-            "react/self-closing-comp": [
-                "error",
-                {
-                    "component": true
-                }
-            ]
+            "no-case-declarations": "off",
+            "no-unexpected-multiline": "off",
+            "tss-unused-classes/unused-classes": "off",
+            "no-sequences": "off"
         }
     },
     "browserslist": {