feat(Vite): migrate example app to vite

awslabs · Jul 11, 2023 · d2e65be · d2e65be
1 parent 70e637d
commit d2e65be
Show file tree

Hide file tree

Showing 16 changed files with 15,481 additions and 23,117 deletions.
diff --git a/examples/react-app/.env.local.example b/examples/react-app/.env.local.example
@@ -1,3 +1,3 @@
-REACT_APP_AWS_ACCESS_KEY_ID=
-REACT_APP_AWS_SECRET_ACCESS_KEY=
-REACT_APP_AWS_SESSION_TOKEN=
+VITE_AWS_ACCESS_KEY_ID=
+VITE_AWS_SECRET_ACCESS_KEY=
+VITE_AWS_SESSION_TOKEN=
diff --git a/examples/react-app/hot-link.js b/examples/react-app/hot-link.js
diff --git a/examples/react-app/index.html b/examples/react-app/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <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="Web site created using create-react-app"
+    />
+    <title>IoT AppKit Sample Application</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+  <script type="module" src="/src/index.tsx"></script>
+</html>
diff --git a/examples/react-app/link.sh b/examples/react-app/link.sh
diff --git a/examples/react-app/package.json b/examples/react-app/package.json
@@ -19,11 +19,9 @@
     "zustand": "^3.7.2"
   },
   "scripts": {
-    "start": "GENERATE_SOURCEMAP=false react-app-rewired start",
-    "build": "react-app-rewired build",
-    "eject": "react-scripts eject",
-    "link": "./link.sh",
-    "hot-link": "node hot-link"
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
   },
   "eslintConfig": {
     "extends": [
@@ -53,13 +51,14 @@
     "@types/node": "^18.16.18",
     "@types/react": "^18.2.12",
     "@types/react-dom": "^18.2.5",
+    "@vitejs/plugin-react": "^4.0.3",
     "adjust-sourcemap-loader": "^5.0.0",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "nodemon": "^2.0.22",
     "postcss-initial": "^4.0.1",
-    "react-app-rewired": "^2.2.1",
-    "react-scripts": "5.0.1",
+    "rollup-plugin-node-polyfills": "^0.2.1",
     "sass": "^1.63.4",
-    "typescript": "^4.8.3"
+    "typescript": "^4.8.3",
+    "vite": "^4.4.3"
   }
 }
diff --git a/examples/react-app/public/index.html b/examples/react-app/public/index.html
diff --git a/examples/react-app/public/manifest.json b/examples/react-app/public/manifest.json
diff --git a/examples/react-app/public/robots.txt b/examples/react-app/public/robots.txt
diff --git a/examples/react-app/src/configs.ts b/examples/react-app/src/configs.ts
@@ -11,7 +11,7 @@ export const region = 'us-east-1';
 export const workspaceId = 'CookieFactory';
 
 // SceneViewer
-export const sceneId = 'Mixer';
+export const sceneId = 'CookieFactory';
 export const viewport: Viewport = {
   start: new Date('<your-start-time>'), // the start time to query data from your workspace
   end: new Date('<your-end-time>'), // the end time to query data from your workspace

diff --git a/examples/react-app/src/getEnvCredentials.ts b/examples/react-app/src/getEnvCredentials.ts
@@ -1,16 +1,16 @@
 export const getEnvCredentials = () => {
   if (
-    process.env.REACT_APP_AWS_ACCESS_KEY_ID == null ||
-    process.env.REACT_APP_AWS_SECRET_ACCESS_KEY == null
+    import.meta.env.VITE_AWS_ACCESS_KEY_ID == null ||
+    import.meta.env.VITE_AWS_SECRET_ACCESS_KEY == null
   ) {
     throw new Error(
-      'Missing credentials: must provide the following env variables: AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY within .env.local'
+      'Missing credentials: must provide the following env variables: VITE_AWS_ACCESS_KEY_ID, VITE_AWS_SECRET_ACCESS_KEY within .env.local'
     );
   }
   return {
     // Provided by `.env.local` environment variable file
-    accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY_ID,
-    secretAccessKey: process.env.REACT_APP_AWS_SECRET_ACCESS_KEY,
-    sessionToken: process.env.REACT_APP_AWS_SESSION_TOKEN,
+    accessKeyId: import.meta.env.VITE_AWS_ACCESS_KEY_ID,
+    secretAccessKey: import.meta.env.VITE_AWS_SECRET_ACCESS_KEY,
+    sessionToken: import.meta.env.VITE_AWS_SESSION_TOKEN,
   };
 };
diff --git a/examples/react-app/src/global.ts b/examples/react-app/src/global.ts
@@ -0,0 +1 @@
+window.global ||= window;
diff --git a/examples/react-app/src/index.tsx b/examples/react-app/src/index.tsx
@@ -1,3 +1,4 @@
+import './global';
 import { createRoot } from 'react-dom/client';
 import './index.css';
 import reportWebVitals from './reportWebVitals';

diff --git a/examples/react-app/tsconfig.json b/examples/react-app/tsconfig.json
@@ -7,6 +7,7 @@
       "dom.iterable",
       "esnext"
     ],
+    "types": ["node", "vite/client"],
     "allowJs": true,
     "module": "esnext",
     "moduleResolution": "node",

diff --git a/examples/react-app/vite.config.ts b/examples/react-app/vite.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(() => {
+  return {
+    build: {
+      outDir: 'build',
+    },
+    assetsInclude: ['**/*.hdr'],
+    plugins: [react()],
+    server: {
+      port: 3000,
+      host: true,
+    },
+    resolve: {
+      alias: {
+        path: 'rollup-plugin-node-polyfills/polyfills/path',
+      },
+    },
+    preview: {
+      port: 4000,
+    },
+  };
+});