refactor: switch to vite (#140)

ExpediaGroup · Apr 3, 2023 · c1f1be6 · c1f1be6
1 parent 59744d9
commit c1f1be6
Show file tree

Hide file tree

Showing 20 changed files with 15,047 additions and 30,438 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -46,6 +46,9 @@ module.exports = {
   settings: {
     'import/resolver': {
       typescript: {}
+    },
+    react: {
+      version: 'detect'
     }
   }
 };
diff --git a/.gitignore b/.gitignore
@@ -10,7 +10,7 @@ node_modules
 /coverage
 
 # production
-build
+dist
 
 # misc
 .DS_Store

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -4,7 +4,7 @@
 2. Run `npm install`
 3. Login to the AWS account containing the visual regression S3 bucket
 4. Run `npm run dev`
-5. Application will be running at `http://localhost:3000`, and it will hot reload when you make changes.
+5. Application will be running at `http://localhost:5173`, and it will hot reload when you make changes.
 
 You can also run the app using docker-compose using `npm run build:docker`!
 

diff --git a/Dockerfile b/Dockerfile
@@ -6,7 +6,6 @@ RUN chown -R admin .
 COPY --chown=admin . .
 USER admin
 
-ENV NODE_ENV "production"
 ENV PORT 8080
 
 RUN npm ci

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -11,8 +11,8 @@ export default defineConfig({
 
   component: {
     devServer: {
-      framework: 'create-react-app',
-      bundler: 'webpack'
+      framework: 'react',
+      bundler: 'vite'
     },
     viewportWidth: 1440,
     viewportHeight: 990

diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/resources/Island.svg" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Comparadise</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,54 +1,57 @@
 {
   "name": "comparadise",
-  "proxy": "http://localhost:8080",
   "dependencies": {
-    "@aws-sdk/client-s3": "3.178.0",
+    "@aws-sdk/client-s3": "3.304.0",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
-    "@mui/icons-material": "5.10.9",
-    "@mui/material": "5.10.11",
+    "@mui/icons-material": "5.11.11",
+    "@mui/material": "5.11.15",
     "@octokit/rest": "19.0.7",
-    "@trpc/client": "10.3.0",
-    "@trpc/react-query": "10.3.0",
-    "@trpc/server": "10.3.0",
+    "@trpc/client": "10.18.0",
+    "@trpc/react-query": "10.18.0",
+    "@trpc/server": "10.18.0",
     "@types/cors": "2.8.12",
     "@types/express": "4.17.17",
     "@types/lodash.groupby": "4.6.7",
-    "@types/node": "18.7.21",
+    "@types/node": "18.15.11",
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.8",
+    "@vitejs/plugin-react-swc": "3.2.0",
     "cors": "2.8.5",
-    "express-rate-limit": "6.6.0",
+    "express-rate-limit": "6.7.0",
     "lodash.groupby": "4.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-scripts": "5.0.1",
     "ts-node": "10.9.1",
-    "typescript": "4.9.5",
+    "typescript": "5.0.3",
     "use-query-params": "2.2.1",
+    "vite": "4.2.1",
     "zod": "3.21.4"
   },
   "devDependencies": {
     "@testing-library/cypress": "9.0.0",
-    "@types/jest": "28.1.7",
+    "@types/jest": "29.5.0",
     "@types/testing-library__cypress": "5.0.9",
-    "cypress": "12.8.1",
-    "jest": "28.1.3",
+    "@typescript-eslint/eslint-plugin": "5.57.0",
+    "cypress": "12.9.0",
+    "eslint": "8.37.0",
+    "eslint-plugin-react": "7.32.2",
+    "jest": "29.5.0",
     "npm-watch": "0.11.0",
-    "prettier": "2.8.0",
+    "prettier": "2.8.7",
     "start-server-and-test": "2.0.0",
-    "ts-jest": "28.0.8"
+    "ts-jest": "29.1.0"
   },
   "scripts": {
-    "build": "react-scripts build",
+    "build": "tsc && vite build",
     "build:docker": "docker build . --tag comparadise && docker-compose up",
     "cypress:e2e": "cypress run --e2e",
-    "cypress:open": "CYPRESS_BASE_URL=http://localhost:3000 cypress open",
-    "dev": "DISABLE_ESLINT_PLUGIN=true npm run start:client & npm-watch",
+    "cypress:open": "CYPRESS_BASE_URL=http://localhost:5173 cypress open",
+    "dev": "npm run start:client & npm-watch",
     "format": "prettier --write .",
     "format-check": "prettier --check .",
     "lint": "eslint .",
-    "start:client": "react-scripts start",
+    "start:client": "vite",
     "start:server": "ts-node server/index.ts",
     "test:client": "cypress run --component",
     "test:integration": "start-server-and-test build:docker http://localhost:8080 cypress:e2e",

diff --git a/public/index.html b/public/index.html
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/server/index.ts b/server/index.ts
@@ -54,9 +54,9 @@ app.use(rateLimit({ windowMs: oneMinute, max: 1000 }));
 app.use(cors());
 app.use('/trpc', trpcExpress.createExpressMiddleware({ router }));
 
-app.use(express.static(path.resolve(__dirname, '../build')));
+app.use(express.static(path.resolve(__dirname, '../dist')));
 app.get('*', (req, res) => {
-  res.sendFile(path.resolve(__dirname, '../build', 'index.html'));
+  res.sendFile(path.resolve(__dirname, '../dist', 'index.html'));
 });
 
 const PORT = 8080;

diff --git a/src/index.tsx b/src/index.tsx
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/src/providers/ClientProvider.tsx b/src/providers/ClientProvider.tsx
@@ -9,7 +9,7 @@ export const ClientProvider = ({ children }: React.PropsWithChildren) => {
     trpc.createClient({
       links: [
         httpBatchLink({
-          url: '/trpc'
+          url: 'http://localhost:8080/trpc'
         })
       ]
     })

diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -18,5 +18,6 @@
     "noEmit": true
   },
   "include": ["server", "src"],
-  "exclude": ["./**/*.test.ts", "cypress"]
+  "exclude": ["./**/*.test.ts", "cypress"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,7 @@ node_modules @@
     /coverage
     # production
-    build
+    dist
     # misc
     .DS_Store
@@ Expand Down @@