Feature/replace webpack with vite

generators/__tests__/app.spec.js

@@ -70,7 +70,7 @@ describe('generator-webapp-rocket:app', function () {
   })
 
   it('create component with given name', function () {
-    const resPath = `./${projectName}/src/index.js`
+    const resPath = `./${projectName}/src/index.jsx`
     result.assertFile(resPath)
   })
 
@@ -79,7 +79,7 @@ describe('generator-webapp-rocket:app', function () {
   })
 
   it('gql address is configured', function () {
-    result.assertFileContent(`./${projectName}/.env`, `REACT_APP_GQL=${gqlAddress}`)
+    result.assertFileContent(`./${projectName}/.env`, `VITE_APP_GQL=${gqlAddress}`)
   })
 
   it('helm files are added when addHelm option is true', function () {

generators/app/templates/infrastructure/.dockerignore

@@ -9,6 +9,6 @@ node_modules
 .prettierrc
 .yo-rc.json
 Dockerfile
-.eslintrc.json
+eslint.config.js
 jsconfig.json
 README.MD

generators/app/templates/infrastructure/.env

@@ -1,10 +1,10 @@
-REACT_APP_THEME=<%= theme %>
-REACT_APP_VERSION=0.0.0
+VITE_APP_THEME=<%= theme %>
+VITE_APP_VERSION=0.0.0
 
-REACT_APP_IDENTITY_CLIENT_ID=
-REACT_APP_IDENTITY_SCOPE=
-REACT_APP_IDENTITY_AUTHORITY=
+VITE_APP_IDENTITY_CLIENT_ID=
+VITE_APP_IDENTITY_SCOPE=
+VITE_APP_IDENTITY_AUTHORITY=
 
-REACT_APP_GQL=<%= gqlAddress %>
-REACT_APP_GQL_HTTP_PROTOCOL=http
-REACT_APP_GQL_WS_PROTOCOL=ws
+VITE_APP_GQL=<%= gqlAddress %>
+VITE_APP_GQL_HTTP_PROTOCOL=http
+VITE_APP_GQL_WS_PROTOCOL=ws

generators/app/templates/infrastructure/.vscode/launch.json

@@ -1,23 +1,16 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-          {
-            "type": "node",
-            "request": "launch",
-            "name": "Jest Current File",
-            "program": "${workspaceFolder}/node_modules/.bin/jest",
-            "args": [
-              "${fileBasenameNoExtension}"
-            ],
-            "console": "integratedTerminal",
-            "internalConsoleOptions": "neverOpen",
-            "disableOptimisticBPs": true,
-            "windows": {
-              "program": "${workspaceFolder}/node_modules/jest/bin/jest",
-            }
-          }
-    ]
-}
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Current Test File",
+      "autoAttachChildProcesses": true,
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
+      "args": ["run", "${relativeFile}"],
+      "smartStep": true,
+      "console": "integratedTerminal"
+    }
+  ]
+}

generators/app/templates/infrastructure/Dockerfile

@@ -1,19 +1,19 @@
 # build environment
-FROM node:18-slim as builder
+FROM node:22-slim AS builder
 WORKDIR /app
 
 COPY package*.json ./
 
 RUN npm install
 
-ARG REACT_APP_VERSION=0.0.0.0
-ENV REACT_APP_VERSION=${REACT_APP_VERSION}
+ARG VITE_APP_VERSION=0.0.0.0
+ENV VITE_APP_VERSION=${VITE_APP_VERSION}
 
 COPY . ./
 RUN npm run build
 
 # production environment
-FROM node:18-slim
+FROM node:22-slim
 
 ARG imageUser=appuser
 ARG imageUserGroup=appgroup
@@ -32,4 +32,4 @@ USER $imageUser
 
 EXPOSE 8080
 
-CMD ["sh","-c","node setenv.js && serve -s build -p 8080"]
+CMD ["sh","-c","node --experimental-default-type=module setenv.js && serve -s build -p 8080"]

generators/app/templates/infrastructure/eslint.config.js

@@ -0,0 +1,39 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import vitest from '@vitest/eslint-plugin'
+
+export default [
+  { ignores: ['**/public', 'dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module'
+      }
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      vitest
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      ...vitest.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      'no-unused-vars': [1, { args: 'after-used', argsIgnorePattern: '^_' }],
+      'no-debugger': 'warn'
+    }
+  }
+]

generators/app/templates/infrastructure/public/index.html → generators/app/templates/infrastructure/index.html

@@ -1,20 +1,18 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="shortcut icon" href="%PUBLIC_URL%/faviconTS.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="<%= projectDescriptionName %> - The best software for your organization." />
-  <link rel="apple-touch-icon" href="logo192.png" />
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="faviconTS.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="New Project - The best software for your organization." />
+    <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" />
-  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap&subset=latin-ext" rel="stylesheet">
-  <!--
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap&subset=latin-ext" rel="stylesheet" />
+    <!--
       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.
@@ -23,13 +21,13 @@
       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`.
     -->
-  <title><%= projectDescriptionName %></title>
-</head>
+    <title>New Project</title>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,7 +37,7 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
-    <script src="%PUBLIC_URL%/env.js"></script>
-</body>
-
+    <script type="module" src="/src/index.jsx"></script>
+    <script src="/env.js" type="module" async></script>
+  </body>
 </html>

generators/app/templates/infrastructure/package.json

@@ -2,6 +2,7 @@
   "name": "<%= projectName %>",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "engines": {
     "node": ">=16.x",
     "npm": ">= 9.x"
@@ -11,15 +12,16 @@
   "license": "ISC",
   "scripts": {
     "prestart": "node setOidcDomains.js",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "test:ci": "cross-env CI=true npm test -- --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura --coverageReporters=lcov --coverageReporters=html",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 3000",
     "lint": "eslint .",
     "eslint:report": "eslint --fix --ext .js .",
     "prettier": "prettier --write **/*.{js,jsx,ts,tsx,css,md,json}",
     "prepack": "husky install",
-    "postinstall": "node ./node_modules/@axa-fr/oidc-client/bin/copy-service-worker-files.mjs public && npx sort-package-json"
+    "postinstall": "node ./node_modules/@axa-fr/oidc-client/bin/copy-service-worker-files.mjs public && npx sort-package-json",
+    "test": "vitest --coverage",
+    "test:ci": "vitest run --coverage"
   },
   "dependencies": {
     "@apollo/client": "^3.11.10",
@@ -35,6 +37,7 @@
     "@totalsoft/validations": "^1.0.5",
     "apollo-link-mock": "^1.0.1",
     "date-fns": "^4.1.0",
+    "dotenv": "^16.4.5",
     "file-saver": "^2.0.5",
     "graphql": "^16.9.0",
 <%_ if (withSubscription) { _%>
@@ -52,25 +55,26 @@
     "react-i18next": "^15.1.1",
     "react-responsive": "^10.0.0",
     "react-router": "^7.0.1",
-    "react-scripts": "^5.0.1",
     "react-super-responsive-table": "^6.0.0",
     "simplebar-react": "^3.2.6",
     "url-search-params-polyfill": "^8.2.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/eslint-parser": "^7.25.9",
-    "@babel/preset-react": "^7.25.9",
+    "@eslint/js": "^9.13.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitest/coverage-v8": "^3.0.4",
+    "@vitest/eslint-plugin": "^1.1.25",
     "cross-env": "^7.0.3",
-    "customize-cra": "^1.0.0",
-    "eslint-plugin-jest": "27.9.0",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "husky": "^9.1.6",
-    "jest-junit": "^16.0.0",
-    "mini-css-extract-plugin": "2.9.2",
+    "eslint-plugin-react-refresh": "^0.4.13",
+    "globals": "^15.11.0",
+    "husky": "^9.1.4",
     "prettier": "^3.3.3",
-    "react-error-overlay": "6.0.11"
+    "vite": "^6.0.11",
+    "vitest": "^3.0.4"
   },
   "lint-staged": {
     "**/*.+(js|md|css|graphql|json)": "prettier --write"
@@ -86,21 +90,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "jest": {
-    "moduleDirectories": [
-      "node_modules",
-      "src"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
-      "\\.(css|less)$": "identity-obj-proxy"
-    }
-  },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react"
-    ]
   }
 }