build: Use Vite instead of Create React App (#179)

liftedinit · Mar 9, 2023 · b3d1172 · b3d1172
1 parent 8cbf6ee
commit b3d1172
Show file tree

Hide file tree

Showing 20 changed files with 3,275 additions and 7,699 deletions.
diff --git a/client/.env b/client/.env
@@ -1 +1 @@
-REACT_APP_API_PATH=/api/v1
+VITE_API_PATH=/api/v1
diff --git a/client/.gitignore b/client/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/client/config-overrides.js b/client/config-overrides.js
diff --git a/client/public/index.html → client/index.html b/client/public/index.html → client/index.html
@@ -2,18 +2,19 @@
 <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, maximum-scale=1"
     />
     <meta name="theme-color" content="#000000" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
     <title>Talib</title>
   </head>
   <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/client/package.json b/client/package.json
@@ -4,17 +4,12 @@
   "private": true,
   "dependencies": {
     "@liftedinit/ui": "github:liftedinit/lifted-ui",
-    "crypto-browserify": "^3.12.0",
-    "react-app-rewired": "^2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-query": "^4.0.0-alpha.20",
+    "@tanstack/react-query": "^4.3.4",
     "react-router": "^6.8.1",
     "react-router-dom": "^6.8.1",
-    "react-scripts": "^5.0.1",
-    "stream-browserify": "^3.0.0",
-    "typescript": "^4.9.3",
-    "web-vitals": "^3.1.0"
+    "typescript": "^4.9.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
@@ -24,12 +19,15 @@
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
-    "eslint-config-react-app": "^7.0.1"
+    "@vitejs/plugin-react": "^3.1.0",
+    "eslint-config-react-app": "^7.0.1",
+    "vite": "^4.1.4",
+    "vite-plugin-node-polyfills": "^0.7.0"
   },
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test"
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   },
   "eslintConfig": {
     "extends": [

diff --git a/client/src/features/neighborhoods/components/status.tsx b/client/src/features/neighborhoods/components/status.tsx
@@ -1,5 +1,5 @@
 import { Spinner, Stack } from "@liftedinit/ui";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Stat } from "../../../shared";
 import { getNeighborhood } from "../queries";
 

diff --git a/client/src/react-app-env.d.ts b/client/src/react-app-env.d.ts
diff --git a/client/src/reportWebVitals.ts b/client/src/reportWebVitals.ts
diff --git a/client/src/shared/utils.ts b/client/src/shared/utils.ts
@@ -33,7 +33,7 @@ export function by<T>(attr: keyof T) {
 export function get(path: string, params = {}) {
   return async function () {
     const query = new URLSearchParams(params).toString();
-    const url = `${process.env.REACT_APP_API_PATH}/${path}?${query}`;
+    const url = `${import.meta.env.VITE_API_PATH}/${path}?${query}`;
     const res = await fetch(url);
     if (res.ok) {
       return await res.json();

diff --git a/client/src/views/app.provider.tsx b/client/src/views/app.provider.tsx
@@ -1,12 +1,10 @@
-import {
-  queryClient,
-  QueryClientProvider,
-  theme,
-  ThemeProvider,
-} from "@liftedinit/ui";
+import { theme, ThemeProvider } from "@liftedinit/ui";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React from "react";
 import { HashRouter } from "react-router-dom";
 
+const queryClient = new QueryClient();
+
 export function AppProvider({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider theme={theme}>

diff --git a/client/src/views/block.tsx b/client/src/views/block.tsx
@@ -1,5 +1,5 @@
 import { Box, Divider, Stack } from "@liftedinit/ui";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useParams } from "react-router-dom";
 import { getNeighborhoodBlock } from "../features/neighborhoods";
 import { Stat, TransactionList } from "../shared";

diff --git a/client/src/views/blocks.tsx b/client/src/views/blocks.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@liftedinit/ui";
 import { useState } from "react";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { getNeighborhoodBlocks } from "../features/neighborhoods";
 import { BlockList, Pager } from "../shared";
 

diff --git a/client/src/views/home.tsx b/client/src/views/home.tsx
@@ -1,5 +1,5 @@
 import { Box, Button, Divider, SimpleGrid } from "@liftedinit/ui";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Link } from "react-router-dom";
 import {
   getNeighborhoodBlocks,

diff --git a/client/src/views/transactions.tsx b/client/src/views/transactions.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@liftedinit/ui";
 import { useState } from "react";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { getNeighborhoodTransactions } from "../features/neighborhoods";
 import { Pager, TransactionList } from "../shared";
 

diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -14,7 +14,9 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "es2015"
+    "target": "esnext",
+    "types": ["vite/client"]
   },
-  "include": ["src"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/client/tsconfig.node.json b/client/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/client/vite.config.ts b/client/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), nodePolyfills({ protocolImports: true })],
+});