✨ to vite js

oat9002 · Apr 15, 2023 · c91413e · c91413e
1 parent b0bf681
commit c91413e
Show file tree

Hide file tree

Showing 11 changed files with 2,777 additions and 9,029 deletions.
diff --git a/web/.sample.env b/web/.sample.env
@@ -1,12 +1,12 @@
-REACT_APP_SERVER_URL=""
-REACT_APP_FIREBASE_ENABLE=false
+VITE_SERVER_URL=""
+VITE_FIREBASE_ENABLE=false
 
-# if REACT_APP_FIREBASE_ENABLE is set to false, don't have to set other firebase configs
-REACT_APP_FIREBASE_API_KEY=""
-REACT_APP_FIREBASE_AUTH_DOMAIN=""
-REACT_APP_FIREBASE_DATABASE_URL=""
-REACT_APP_FIREBASE_PROJECT_ID=""
-REACT_APP_FIREBASE_STORAGE_BUCKET=""
-REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
-REACT_APP_FIREBASE_APP_ID=""
-REACT_APP_FIREBASE_MEASUREMENT_ID=""
+# if VITE_FIREBASE_ENABLE is set to false, don't have to set other firebase configs
+VITE_FIREBASE_API_KEY=""
+VITE_FIREBASE_AUTH_DOMAIN=""
+VITE_FIREBASE_DATABASE_URL=""
+VITE_FIREBASE_PROJECT_ID=""
+VITE_FIREBASE_STORAGE_BUCKET=""
+VITE_FIREBASE_MESSAGING_SENDER_ID=""
+VITE_FIREBASE_APP_ID=""
+VITE_FIREBASE_MEASUREMENT_ID=""
diff --git a/web/public/index.html → web/index.html b/web/public/index.html → web/index.html
@@ -1,18 +1,21 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="theme-color" content="#000000">
-  <!--
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <meta name="theme-color" content="#000000" />
+        <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-  <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+        <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> -->
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-  <!--
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+        />
+        <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -21,15 +24,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>GoldPriceTracking</title>
-</head>
+        <title>GoldPriceTracking</title>
+    </head>
 
-<body>
-  <noscript>
-    You need to enable JavaScript to run this app.
-  </noscript>
-  <div id="root"></div>
-  <!--
+    <body>
+        <noscript> You need to enable JavaScript to run this app. </noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/index.tsx"></script>
+        <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -38,7 +40,5 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-</body>
-
-</html>
+    --></body>
+</html>
diff --git a/web/package.json b/web/package.json
@@ -14,14 +14,17 @@
         "@types/styled-components": "^5.1.25",
         "@typescript-eslint/eslint-plugin": "^5.31.0",
         "@typescript-eslint/parser": "^5.31.0",
+        "@vitejs/plugin-react": "^3.1.0",
         "babel-preset-react": "^6.24.1",
         "eslint": "^8.7.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
         "prettier": "^2.5.1",
-        "react-scripts": "^5.0.0"
+        "vite": "^4.2.1",
+        "vite-plugin-svgr": "^2.4.0",
+        "vite-tsconfig-paths": "^4.2.0"
     },
     "dependencies": {
         "@emotion/react": "^11.9.3",
@@ -41,10 +44,8 @@
         "typescript": "^4.7.4"
     },
     "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test --env=jsdom",
-        "eject": "react-scripts eject",
+        "start": "vite",
+        "build": "tsc && vite build",
         "lint": "eslint .",
         "lint:fix": "eslint --fix",
         "format": "prettier --write './**/*.{js,jsx,css,scss}' --config ./.prettierrc"

diff --git a/web/src/env.d.ts b/web/src/env.d.ts
@@ -0,0 +1,16 @@
+interface ImportMetaEnv {
+    readonly VITE_SERVER_URL: string;
+    readonly VITE_FIREBASE_ENABLE: boolean;
+    readonly VITE_FIREBASE_API_KEY: string;
+    readonly VITE_FIREBASE_AUTH_DOMAIN: string;
+    readonly VITE_FIREBASE_DATABASE_URL: string;
+    readonly VITE_FIREBASE_PROJECT_ID: string;
+    readonly VITE_FIREBASE_STORAGE_BUCKET: string;
+    readonly VITE_FIREBASE_MESSAGING_SENDER_ID: string;
+    readonly VITE_FIREBASE_APP_ID: string;
+    readonly VITE_FIREBASE_MEASUREMENT_ID: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}
diff --git a/web/src/libs/firebase.ts b/web/src/libs/firebase.ts
@@ -9,7 +9,7 @@ export const eventName = {
 };
 
 export function isFirebaseEnable() {
-    return process.env.REACT_APP_FIREBASE_ENABLE === "true";
+    return import.meta.env.VITE_FIREBASE_ENABLE;
 }
 
 export function initializeFirebase() {
@@ -18,14 +18,14 @@ export function initializeFirebase() {
     }
 
     const firebaseConfig = {
-        apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
-        authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
-        databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
-        projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
-        storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
-        messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
-        appId: process.env.REACT_APP_FIREBASE_APP_ID,
-        measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
+        apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+        authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+        databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
+        projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+        storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+        messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+        appId: import.meta.env.VITE_FIREBASE_APP_ID,
+        measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
     };
 
     firebaseApp = initializeApp(firebaseConfig);

diff --git a/web/src/util/Axios.ts b/web/src/util/Axios.ts
@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const instance = axios.create({
-    baseURL: process.env.REACT_APP_SERVER_URL,
+    baseURL: import.meta.env.VITE_SERVER_URL,
 });
 
 export default instance;
diff --git a/web/src/util/Util.ts b/web/src/util/Util.ts
@@ -22,7 +22,7 @@ export function formatNumber(number: number, lang = "th-TH") {
 }
 
 export function isMock() {
-    return !process.env.REACT_APP_SERVER_URL || process.env.REACT_APP_SERVER_URL === "";
+    return !import.meta.env.VITE_SERVER_URL || import.meta.env.VITE_SERVER_URL === "";
 }
 
 export const httpStatus = {

diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -1,14 +1,15 @@
 {
     "compilerOptions": {
-        "target": "es5",
+        "target": "ESNext",
         "lib": [
             "dom",
             "dom.iterable",
             "esnext"
         ],
-        "allowJs": true,
-        "skipLibCheck": true,
-        "esModuleInterop": true,
+        "types": ["vite/client", "vite-plugin-svgr/client"],
+        "allowJs": false,
+        "skipLibCheck": false,
+        "esModuleInterop": false,
         "allowSyntheticDefaultImports": true,
         "strict": true,
         "module": "esnext",

diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -0,0 +1,12 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import svgrPlugin from "vite-plugin-svgr";
+import viteTsconfigPaths from "vite-tsconfig-paths";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
+    build: {
+        outDir: "build",
+    },
+});