feat: replace react-scripts with vite (aws-samples#37)

trivikr · web-flow · commit 7cbe82e52c8d · 2021-07-31T23:35:52.000-07:00
diff --git a/packages/frontend/index.html b/packages/frontend/index.html
@@ -2,15 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Notes App - modular AWS SDK for JavaScript (v3)"
     />
     <link rel="apple-touch-icon" href="logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <title>Notes App - modular AWS SDK for JavaScript (v3)</title>
     <link
       rel="stylesheet"
@@ -22,5 +22,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/packages/frontend/package.json b/packages/frontend/package.json
@@ -14,18 +14,20 @@
     "@aws-sdk/util-create-request": "3.23.0",
     "@aws-sdk/util-format-url": "3.23.0",
     "@reach/router": "1.3.4",
+    "buffer": "6.0.3",
     "microphone-stream": "6.0.1",
+    "process": "0.11.10",
     "react": "17.0.1",
     "react-bootstrap": "1.4.0",
     "react-dom": "17.0.1"
   },
   "scripts": {
     "prepare:frontend": "cd .. && yarn prepare:frontend",
-    "build": "react-scripts build",
+    "build": "tsc && vite build",
     "build:frontend": "cd .. && yarn build:frontend",
-    "start": "react-scripts start",
+    "start": "vite",
     "start:frontend": "cd .. && yarn start:frontend",
-    "serve": "ws -d build -o",
+    "serve": "vite preview",
     "serve:frontend": "cd .. && yarn serve:frontend",
     "cdk": "cd .. && yarn cdk"
   },
@@ -59,9 +61,9 @@
     "@types/reach__router": "1.3.6",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
-    "local-web-server": "^4.2.1",
+    "@vitejs/plugin-react-refresh": "1.3.6",
     "react-bootstrap-icons": "1.3.0",
-    "react-scripts": "4.0.1",
-    "typescript": "~4.1.2"
+    "typescript": "~4.1.2",
+    "vite": "2.4.4"
   }
 }
diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx
@@ -1,7 +1,20 @@
+import { Buffer } from "buffer";
+import process from "process";
 import React from "react";
 import ReactDOM from "react-dom";
 import { Routes } from "./Routes";
 
+// Polyfills required for MicrophoneStream
+if (typeof (window as any).global === "undefined") {
+  (window as any).global = window;
+}
+if (typeof (window as any).Buffer === "undefined") {
+  (window as any).Buffer = Buffer;
+}
+if (typeof (window as any).process === "undefined") {
+  (window as any).process = process;
+}
+
 ReactDOM.render(
   <div className="container" style={{ height: "100vh" }}>
     <Routes />
diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import reactRefresh from "@vitejs/plugin-react-refresh";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [reactRefresh()],
+  resolve: {
+    alias: {
+      "./runtimeConfig": "./runtimeConfig.browser",
+    },
+  },
+});
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"compilerOptions": {`
`3`		`- "target": "es5",`
	`3`	`+ "target": "ESNext",`
`4`	`4`	`"lib": ["dom", "dom.iterable", "esnext"],`
`5`	`5`	`"allowJs": true,`
`6`	`6`	`"skipLibCheck": true,`