chore(deps): replace react scripts with Vitejs

9c631e9a · Bastien DUMONT · c5fae7b2 · 9c631e9a · 9c631e9a · 9c631e9a
Commit 9c631e9a authored 1 year ago by Bastien DUMONT
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
-<!DOCTYPE html>
+<!doctype html>
 <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" />
-    <meta name="description" content="Le backoffice de l'application Ecolyo">
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta name="description" content="Le backoffice de l'application Ecolyo" />
+    <link rel="apple-touch-icon" href="public/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 rel="manifest" href="/manifest.json" />
    <link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/ag-grid-community@30.1.0/styles/ag-grid.css" />
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/ag-grid-community@30.1.0/styles/ag-grid.css"
+    />
    <link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/ag-grid-community@30.1.0/styles/ag-theme-alpine.css" />
-    <!--
-      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`.
-    -->
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/ag-grid-community@30.1.0/styles/ag-theme-alpine.css"
+    />
    <title>Ecolyo - Agent</title>
-    <meta property="og:url" content="%PUBLIC_URL%">
-    <meta property="og:type" content="website">
-    <meta property="og:title" content="Ecolyo - Agent">
-    <meta property="og:description" content="Le backoffice de l'application Ecolyo.">
-    <meta property="og:image:secure_url" content="https://ecolyo-agent.apps.grandlyon.com/og-icon.png">
-    <meta property="og:image" content="https://ecolyo-agent.apps.grandlyon.com/og-icon.png">
+    <meta property="og:url" content="public" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Ecolyo - Agent" />
+    <meta
+      property="og:description"
+      content="Le backoffice de l'application Ecolyo."
+    />
+    <meta
+      property="og:image:secure_url"
+      content="https://ecolyo-agent.apps.grandlyon.com/og-icon.png"
+    />
+    <meta
+      property="og:image"
+      content="https://ecolyo-agent.apps.grandlyon.com/og-icon.png"
+    />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="627" />
    <meta property="og:image:alt" content="Ecolyo Logo" />
-
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -53,5 +54,9 @@
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
+    <script>
+      var global = global || window
+    </script>
+    <script type="module" src="/src/index.tsx"></script>
  </body>
 </html>
--- a/public/manifest.json
+++ b/public/manifest.json
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
  "version": "1.0.0",
  "private": true,
  "scripts": {
-    "start": "HTTPS=true react-scripts start",
-    "build": "CI=false && react-scripts build",
+    "start": "vite",
+    "build": "tsc && vite build",
    "local-up": "docker-compose -f docker-compose.local.yml up -d && yarn start",
    "local-down": "docker-compose -f docker-compose.local.yml down",
    "docker": "docker run -it --rm -p 3000:3000 front-backoffice",
@@ -12,7 +12,8 @@
    "lint:fix": "eslint --fix .",
    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,md}\"",
    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "serve": "vite preview"
  },
  "browserslist": {
    "production": [
@@ -37,6 +38,7 @@
    "@types/html-to-draftjs": "^1.4.0",
    "@types/luxon": "^3.0.0",
    "@types/react-draft-wysiwyg": "^1.13.4",
+    "@vitejs/plugin-react-swc": "^3.4.0",
    "ag-grid-community": "^30.0.0",
    "ag-grid-react": "^30.0.0",
    "axios": "^1.0.0",
@@ -51,10 +53,12 @@
    "react-draft-wysiwyg": "^1.15.0",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.0.0",
-    "react-scripts": "^5.0.1",
    "react-toastify": "^9.0.0",
    "sass": "^1.35.2",
    "typescript": "^4.1.2",
+    "vite": "^4.4.9",
+    "vite-plugin-svgr": "^4.0.0",
+    "vite-tsconfig-paths": "^4.2.1",
    "web-vitals": "^3.0.0"
  },
  "devDependencies": {
@@ -63,6 +67,7 @@
    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^6.1.0",
    "@typescript-eslint/parser": "^6.1.0",
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
    "eslint": "^8.49.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",

--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
 import { Button } from '@mui/material'
 import React from 'react'
-import { useMutation, useQueryClient } from 'react-query'
-import { NavLink, useNavigate } from 'react-router-dom'
+import { useMutation } from 'react-query'
+import { NavLink } from 'react-router-dom'
 import { fetchLogout, useWhoAmI } from '../../API'
 import logo from '../../assets/icons/ecolyo-logo.svg'
 import { routes } from '../Routes/Router'
 import './sidebar.scss'

 const SideBar: React.FC = () => {
-  const queryClient = useQueryClient()
-  const navigate = useNavigate()
  const { data: user } = useWhoAmI()

  const { mutate: logout } = useMutation({
    mutationFn: fetchLogout,
-    onSuccess: () => {
-      queryClient.clear()
-      navigate('/login')
+    onMutate: () => {
+      location.reload()
    },
  })


--- a/src/vite-end.d.ts
+++ b/src/vite-end.d.ts
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,14 +8,15 @@
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
    "jsx": "react-jsx",
-    "useUnknownInCatchVariables": false
+    "useUnknownInCatchVariables": false,
+    "types": ["vite/client", "vite-plugin-svgr/client"]
  },
  "include": ["**/*.ts", "**/*.tsx"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
+import basicSsl from '@vitejs/plugin-basic-ssl'
+import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './',
+  plugins: [react(), basicSsl()],
+  preview: {
+    // port: 3000,
+    // https: true,
+    // strictPort: true,
+  },
+  server: {
+    port: 3000,
+    https: true,
+    strictPort: true,
+    host: true,
+    open: 'https://localhost/', // directly opens site through nginx
+  },
+  build: {
+    outDir: './build',
+  },
+})
--- a/yarn.lock
+++ b/yarn.lock