feat: replace CRA with vite (#1278)

MartinWitt · Nov 23, 2023 · a4adea9 · a4adea9
1 parent 010678e
commit a4adea9
Show file tree

Hide file tree

Showing 13 changed files with 3,468 additions and 36,486 deletions.
diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/logo512.jpg" />
+    <link rel="icon" href="/logo512.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content=""
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <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 rel="manifest" href="/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.
@@ -29,6 +29,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -20,24 +20,25 @@
     "@types/react-dom": "18.2.17",
     "@types/react-router": "5.1.20",
     "@types/react-syntax-highlighter": "15.5.10",
+    "@vitejs/plugin-react": "^4.2.0",
     "graphql": "16.8.1",
     "react": "18.2.0",
     "react-avatar": "5.0.3",
     "react-dom": "18.2.0",
     "react-icons": "4.12.0",
     "react-markdown": "9.0.1",
     "react-router-dom": "6.20.0",
-    "react-scripts": "5.0.1",
     "react-syntax-highlighter": "15.5.0",
-    "typescript": "4.9.5",
+    "typescript": "5.3.2",
     "typography": "0.16.24",
+    "vite": "^5.0.2",
+    "vite-tsconfig-paths": "^4.2.1",
     "web-vitals": "3.5.0"
   },
   "scripts": {
-    "start": "react-scripts --openssl-legacy-provider start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "dev": "vite preview",
     "prettier": "prettier --write \"src/**/*.tsx\""
   },
   "eslintConfig": {

diff --git a/frontend/src/component/ProjectList.tsx b/frontend/src/component/ProjectList.tsx
@@ -3,7 +3,7 @@ import { fetchProjectQuery } from '../ProjectData';
 import { Project } from '../data/Project';
 import React, { useMemo } from 'react';
 import ProjectTable from './ProjectTable';
-import {LinearProgress} from "@mui/material";
+import { LinearProgress } from '@mui/material';
 
 export function ProjectList({ filter }: { filter: string }) {
   const { data, loading, error } = useQuery(fetchProjectQuery);
@@ -21,7 +21,11 @@ export function ProjectList({ filter }: { filter: string }) {
     console.error(error);
   }
   if (loading) {
-    return <div><LinearProgress /></div>;
+    return (
+      <div>
+        <LinearProgress />
+      </div>
+    );
   }
   return <ProjectTable projects={filteredProjects} />;
 }
diff --git a/frontend/src/component/ProjectTable.tsx b/frontend/src/component/ProjectTable.tsx
@@ -87,7 +87,7 @@ function ProjectTable(props: ProjectTableProps) {
   return (
     <TableContainer sx={{ overflow: 'hidden' }}>
       <Table>
-        <TableHead sx={{fontSize:"Medium"}}>
+        <TableHead sx={{ fontSize: 'Medium' }}>
           <TableRow>
             <SortableTableCell
               label="Project"
@@ -148,7 +148,15 @@ function SortableTableCell(props: SortableTableCellProps) {
   const theme = useTheme();
 
   return (
-    <TableCell onClick={() => requestSort(sortKey)} style={{ fontWeight: 'bold', fontSize: '16px', color: 'white', backgroundColor: theme.palette.secondary.main }}>
+    <TableCell
+      onClick={() => requestSort(sortKey)}
+      style={{
+        fontWeight: 'bold',
+        fontSize: '16px',
+        color: 'white',
+        backgroundColor: theme.palette.secondary.main,
+      }}
+    >
       {label}
       {isSorted && <span>{direction === 'ascending' ? ' ▲' : ' ▼'}</span>}
     </TableCell>

diff --git a/frontend/src/pages/PageLayout.tsx b/frontend/src/pages/PageLayout.tsx
@@ -12,8 +12,6 @@ import {
 import { LoginButton } from '../component/LoginButton';
 import { useNavigate } from 'react-router';
 
-
-
 interface NameProps {
   name: string;
 }
@@ -58,7 +56,7 @@ interface NavigationProps {
 
 export default function PageLayout({ children }: PageLayoutProps) {
   const navigationItems: Link[] = [
-    { name: 'Home', href: '/'},
+    { name: 'Home', href: '/' },
     { name: 'Statistics', href: '/statistics' },
   ];
   return (
@@ -68,10 +66,7 @@ export default function PageLayout({ children }: PageLayoutProps) {
         spacing={2}
         style={{ height: 'calc(100%) ', flexWrap: 'nowrap' }}
       >
-        <Grid
-          item
-          sx={{ width: '200px'}}
-        >
+        <Grid item sx={{ width: '200px' }}>
           <Box
             sx={{
               height: '100%',
@@ -80,7 +75,11 @@ export default function PageLayout({ children }: PageLayoutProps) {
               position: 'fixed',
             }}
           >
-            <AppBar position="static" elevation={0} sx={{ bgcolor: '#272727', marginTop:"10px", marginLeft:"10px"}}>
+            <AppBar
+              position="static"
+              elevation={0}
+              sx={{ bgcolor: '#272727', marginTop: '10px', marginLeft: '10px' }}
+            >
               <Name name="Laughing-Train" />
               <Toolbar>
                 <Navigation links={navigationItems} />

diff --git a/frontend/src/pages/ProjectConfigView.tsx b/frontend/src/pages/ProjectConfigView.tsx
@@ -1,5 +1,12 @@
 import { useQuery } from '@apollo/client';
-import {Alert, Box, Button, LinearProgress, TextField, Typography} from '@mui/material';
+import {
+  Alert,
+  Box,
+  Button,
+  LinearProgress,
+  TextField,
+  Typography,
+} from '@mui/material';
 import React, { useState } from 'react';
 import { useParams } from 'react-router';
 import Headline from '../component/Headline';
@@ -22,7 +29,11 @@ export function ProjectConfigview() {
         <br />
         <Typography variant="h4">Project Config </Typography>
         <br />
-        {loading && <p><LinearProgress /></p>}
+        {loading && (
+          <p>
+            <LinearProgress />
+          </p>
+        )}
         {error && (
           <Alert severity="error">Can not fetch data. Are you logged in?</Alert>
         )}

diff --git a/frontend/src/pages/ResultView.tsx b/frontend/src/pages/ResultView.tsx
@@ -24,7 +24,7 @@ function ResultView() {
   }
   console.log(params);
   if (loading) {
-    return <LinearProgress  sx={{margin:5}}/>;
+    return <LinearProgress sx={{ margin: 5 }} />;
   }
   const project: Project | undefined = data.getProjects.find(
     (project: Project) => {

diff --git a/frontend/src/pages/StatisticsPage.tsx b/frontend/src/pages/StatisticsPage.tsx
@@ -6,7 +6,8 @@ import {
   Card,
   CardContent,
   CardHeader,
-  Divider, LinearProgress,
+  Divider,
+  LinearProgress,
 } from '@mui/material';
 import { Project } from '../data/Project';
 import Avatar from 'react-avatar';

diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -1,11 +1,8 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+        "lib": ["dom", "dom.iterable", "esnext"],    
+        "target": "ESNext",    
+        "types": ["vite/client"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import viteTsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+    // depending on your application, base can also be "/"
+    base: '',
+    plugins: [react(), viteTsconfigPaths()],
+    server: {    
+        // this ensures that the browser opens upon server start
+        open: true,
+        // this sets a default port to 3000  
+        port: 3000, 
+  },
+      optimizeDeps: {
+    include: ['@mui/material/Tooltip', '@emotion/styled', '@mui/material/Unstable_Grid2'],
+  },
+})