Use Vite for dev builds - now with HMR!

--- This PR introduces Vite as our solution for running dev builds. It provides an "out-of-the-box" hot module replacing, which should help us build those new UI features much quicker. There is quite a few changes in this PR, but the gist is that they're quite relevant for making us faster. There is also a number of "fixes", that align the codebase with the latest syntax, and some improvements like the ability to alias imports, which might be easier to reconcile than relative paths.
open-chat-labs · Feb 5, 2025 · b54733d · b54733d
1 parent e55f4f0
commit b54733d
Show file tree

Hide file tree

Showing 49 changed files with 3,004 additions and 853 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,6 @@ temp.did
 website_release.md
 frontend/app/src/stores/timeline.ts
 /Makefile
+
+**/public/worker.js
+**/public/service_worker.js
diff --git a/frontend/app/build_dev.sh b/frontend/app/build_dev.sh
@@ -1,17 +1,27 @@
-WATCH=$1
 
-export BUILD_ENV=development
-export INTERNET_IDENTITY_CANISTER_ID=qhbym-qaaaa-aaaaa-aaafq-cai
-export INTERNET_IDENTITY_URL=http://127.0.0.1:8080?canisterId=qhbym-qaaaa-aaaaa-aaafq-cai
-export NFID_URL=http://localhost:8080?canisterId=qhbym-qaaaa-aaaaa-aaafq-cai
-export VIDEO_BRIDGE_URL=http://localhost:5050
-export PREVIEW_PROXY_URL=https://dy7sqxe9if6te.cloudfront.net
-
-export DFX_NETWORK=local
-export DEV_PORT=5001
-export BLOB_URL_PATTERN=http://{canisterId}.localhost:8080/{blobType}
-export ACHIEVEMENT_URL_PATH=http://{canisterId}.localhost:8080
-export WALLET_CONNECT_PROJECT_ID=b9aafebed2abfaf8341afd9428c947d5
+# Non OC env variables
 export NODE_OPTIONS="--max-old-space-size=8192"
+export NODE_ENV=development
+
+# OC specific env variables
+export OC_ACHIEVEMENT_URL_PATH=http://{canisterId}.localhost:8080
+export OC_BLOB_URL_PATTERN=http://{canisterId}.localhost:8080/{blobType}
+export OC_BUILD_ENV=$NODE_ENV
+export OC_DEV_PORT=5001
+export OC_DFX_NETWORK=local
+export OC_INTERNET_IDENTITY_CANISTER_ID=qhbym-qaaaa-aaaaa-aaafq-cai
+export OC_INTERNET_IDENTITY_URL=http://127.0.0.1:8080?canisterId=qhbym-qaaaa-aaaaa-aaafq-cai
+export OC_NFID_URL=http://localhost:8080?canisterId=qhbym-qaaaa-aaaaa-aaafq-cai
+export OC_NODE_ENV=$NODE_ENV
+export OC_PREVIEW_PROXY_URL=https://dy7sqxe9if6te.cloudfront.net
+export OC_VIDEO_BRIDGE_URL=http://localhost:5050
+export OC_WALLET_CONNECT_PROJECT_ID=b9aafebed2abfaf8341afd9428c947d5
+export OC_WEBSITE_VERSION=
+
+# Check if worker files are available, build them if not
+if [ ! -f ./public/worker.js ] || [ ! -f ./public/service_worker.js ]; then
+    npm run dev:workers || exit 1
+fi
 
-npx rollup -c $WATCH
+# Run dev app
+npx vite --strictPort --port $OC_DEV_PORT
diff --git a/frontend/app/build_dev_workers.sh b/frontend/app/build_dev_workers.sh
@@ -0,0 +1,24 @@
+RED='\033[0;31m'
+NC='\033[0m'
+
+# Build worker files and copy the required ones to public for Vite to be able
+# to serve them! (Not the nicest solution, but should work; or we get the Vite
+# custom server to work.)
+npm --prefix ../openchat-worker run build || exit 1
+npm --prefix ../openchat-service-worker run build || exit 1
+
+files=( \
+    "../openchat-worker/lib/worker.js" \
+    "../openchat-service-worker/lib/service_worker.js" \
+)
+
+for file in ${files[@]};
+do
+    echo "Copying file ${file}..."
+    if [ -f $file ]; then
+        cp $file ./public
+    else
+        echo -e "${RED}ERROR: ${file} does not exist!${NC}\n"
+        exit 1
+    fi;
+done
diff --git a/frontend/app/build_prod.sh b/frontend/app/build_prod.sh
@@ -1,15 +1,16 @@
-export BUILD_ENV=production
-export INTERNET_IDENTITY_CANISTER_ID=rdmx6-jaaaa-aaaaa-aaadq-cai
-export INTERNET_IDENTITY_URL=https://identity.ic0.app
-export NFID_URL=https://nfid.one/authenticate/?applicationName=OpenChat
-export DFX_NETWORK=ic
-export VIDEO_BRIDGE_URL=https://d7ufu5rwdb6eb.cloudfront.net
-export IC_URL=https://icp-api.io
-export II_DERIVATION_ORIGIN=https://6hsbt-vqaaa-aaaaf-aaafq-cai.ic0.app
-export CUSTOM_DOMAINS=oc.app,webtest.oc.app
-export BLOB_URL_PATTERN=https://{canisterId}.raw.icp0.io/{blobType}
-export ACHIEVEMENT_URL_PATH=https://{canisterId}.raw.icp0.io
-export WALLET_CONNECT_PROJECT_ID=adf8b4a7c5514a8229981aabdee2e246
-export PREVIEW_PROXY_URL=https://dy7sqxe9if6te.cloudfront.net
+export OC_BUILD_ENV=production
+export OC_NODE_ENV=$NODE_ENV
+export OC_INTERNET_IDENTITY_CANISTER_ID=rdmx6-jaaaa-aaaaa-aaadq-cai
+export OC_INTERNET_IDENTITY_URL=https://identity.ic0.app
+export OC_NFID_URL=https://nfid.one/authenticate/?applicationName=OpenChat
+export OC_DFX_NETWORK=ic
+export OC_VIDEO_BRIDGE_URL=https://d7ufu5rwdb6eb.cloudfront.net
+export OC_IC_URL=https://icp-api.io
+export OC_II_DERIVATION_ORIGIN=https://6hsbt-vqaaa-aaaaf-aaafq-cai.ic0.app
+export OC_CUSTOM_DOMAINS=oc.app,webtest.oc.app
+export OC_BLOB_URL_PATTERN=https://{canisterId}.raw.icp0.io/{blobType}
+export OC_ACHIEVEMENT_URL_PATH=https://{canisterId}.raw.icp0.io
+export OC_WALLET_CONNECT_PROJECT_ID=adf8b4a7c5514a8229981aabdee2e246
+export OC_PREVIEW_PROXY_URL=https://dy7sqxe9if6te.cloudfront.net
 
 npx rollup -c
diff --git a/frontend/app/build_prod_test.sh b/frontend/app/build_prod_test.sh
@@ -1,15 +1,16 @@
-export BUILD_ENV=prod_test
-export INTERNET_IDENTITY_CANISTER_ID=rdmx6-jaaaa-aaaaa-aaadq-cai
-export INTERNET_IDENTITY_URL=https://identity.ic0.app
-export NFID_URL=https://nfid.one/authenticate/?applicationName=OpenChatTest
-export VIDEO_BRIDGE_URL=https://d37cwaycp9g5li.cloudfront.net
-export DFX_NETWORK=ic_test
-export IC_URL=https://icp-api.io
-export II_DERIVATION_ORIGIN=https://pfs7b-iqaaa-aaaaf-abs7q-cai.ic0.app
-export CUSTOM_DOMAINS=test.oc.app
-export BLOB_URL_PATTERN=https://{canisterId}.raw.icp0.io/{blobType}
-export ACHIEVEMENT_URL_PATH=https://{canisterId}.raw.icp0.io
-export WALLET_CONNECT_PROJECT_ID=b9aafebed2abfaf8341afd9428c947d5
-export PREVIEW_PROXY_URL=https://dy7sqxe9if6te.cloudfront.net
+export OC_BUILD_ENV=prod_test
+export OC_NODE_ENV=$NODE_ENV
+export OC_INTERNET_IDENTITY_CANISTER_ID=rdmx6-jaaaa-aaaaa-aaadq-cai
+export OC_INTERNET_IDENTITY_URL=https://identity.ic0.app
+export OC_NFID_URL=https://nfid.one/authenticate/?applicationName=OpenChatTest
+export OC_VIDEO_BRIDGE_URL=https://d37cwaycp9g5li.cloudfront.net
+export OC_DFX_NETWORK=ic_test
+export OC_IC_URL=https://icp-api.io
+export OC_II_DERIVATION_ORIGIN=https://pfs7b-iqaaa-aaaaf-abs7q-cai.ic0.app
+export OC_CUSTOM_DOMAINS=test.oc.app
+export OC_BLOB_URL_PATTERN=https://{canisterId}.raw.icp0.io/{blobType}
+export OC_ACHIEVEMENT_URL_PATH=https://{canisterId}.raw.icp0.io
+export OC_WALLET_CONNECT_PROJECT_ID=b9aafebed2abfaf8341afd9428c947d5
+export OC_PREVIEW_PROXY_URL=https://dy7sqxe9if6te.cloudfront.net
 
 npx rollup -c
diff --git a/frontend/app/build_testnet.sh b/frontend/app/build_testnet.sh
@@ -4,15 +4,17 @@ then
   exit 1
 fi
 
-export BUILD_ENV=testnet
-export INTERNET_IDENTITY_CANISTER_ID=rdmx6-jaaaa-aaaaa-aaadq-cai
-export INTERNET_IDENTITY_URL=https://qhbym-qaaaa-aaaaa-aaafq-cai.$DFX_NETWORK.testnet.dfinity.network/
-export NFID_URL=https://qhbym-qaaaa-aaaaa-aaafq-cai.$DFX_NETWORK.testnet.dfinity.network/
-export IC_URL=https://$DFX_NETWORK.testnet.dfinity.network/
-export BLOB_URL_PATTERN=https://{canisterId}.raw.$DFX_NETWORK.testnet.dfinity.network/{blobType}
-export ACHIEVEMENT_URL_PATH=https://{canisterId}.raw.icp0.io
-export VIDEO_BRIDGE_URL=https://d37cwaycp9g5li.cloudfront.net
-export WALLET_CONNECT_PROJECT_ID=b9aafebed2abfaf8341afd9428c947d5
-export PREVIEW_PROXY_URL=https://dy7sqxe9if6te.cloudfront.net
+export OC_DFX_NETWORK=$DFX_NETWORK
+export OC_BUILD_ENV=testnet
+export OC_NODE_ENV=$NODE_ENV
+export OC_INTERNET_IDENTITY_CANISTER_ID=rdmx6-jaaaa-aaaaa-aaadq-cai
+export OC_INTERNET_IDENTITY_URL=https://qhbym-qaaaa-aaaaa-aaafq-cai.$DFX_NETWORK.testnet.dfinity.network/
+export OC_NFID_URL=https://qhbym-qaaaa-aaaaa-aaafq-cai.$DFX_NETWORK.testnet.dfinity.network/
+export OC_IC_URL=https://$DFX_NETWORK.testnet.dfinity.network/
+export OC_BLOB_URL_PATTERN=https://{canisterId}.raw.$DFX_NETWORK.testnet.dfinity.network/{blobType}
+export OC_ACHIEVEMENT_URL_PATH=https://{canisterId}.raw.icp0.io
+export OC_VIDEO_BRIDGE_URL=https://d37cwaycp9g5li.cloudfront.net
+export OC_WALLET_CONNECT_PROJECT_ID=b9aafebed2abfaf8341afd9428c947d5
+export OC_PREVIEW_PROXY_URL=https://dy7sqxe9if6te.cloudfront.net
 
 npx rollup -c
diff --git a/frontend/app/index.html b/frontend/app/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    <!-- Google tag (gtag.js) -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=G-7P9R6CJLNR"></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', 'G-7P9R6CJLNR');
+        </script>
+        <!-- CLS Tracking Code -->
+        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+        })(window,document,'script','dataLayer','GTM-WQD48GK2');</script>
+        <!-- End CLS Tracking Code -->
+        <meta name="theme-color" media="(prefers-color-scheme: light)" content="#22A7F2" />
+        <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1B1C21" />
+        <meta name="description" content="OpenChat is a fully featured chat application running end-to-end on the Internet Computer blockchain." />
+        <meta property="og:title" content="OpenChat">
+        <meta property="og:type" content="website" />
+        <meta property="og:description" content="OpenChat is a fully featured chat application running end-to-end on the Internet Computer blockchain.">
+        <meta property="og:image" content="https://oc.app/assets/share-oc-light.png">
+        <meta name="twitter:image" content="https://oc.app/assets/share-oc-light.png">
+        <meta property="og:url" content="https://oc.app">
+        <meta name="twitter:card" content="summarlarge_image">
+        <meta property="og:site_name" content="OpenChat">
+        <meta name="twitter:image:alt" content="OpenChat is a fully featured chat application running end-to-end on the Internet Computer blockchain.">
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="apple-mobile-web-app-title" content="OpenChat" />
+        <meta name="twitter:widgets:autoload" content="off">
+        <meta name="twitter:dnt" content="on">
+        <meta name="twitter:widgets:csp" content="on">
+        <link rel="canonical" href="/">
+        <title>OpenChat</title>
+        <link rel="manifest" href="/openchat.webmanifest" />
+        <link rel="apple-touch-startup-image" href="/_/raw/apple-touch-icon.png" />
+        <link rel="apple-touch-icon" href="/_/raw/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" href="/icon.png" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+        href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Bebas+Neue&family=Manrope:wght@400;500;700&family=Roboto:wght@200;300;400;700&display=swap"
+        rel="stylesheet"
+        />
+        <script type="module" src="https://platform.twitter.com/widgets.js"></script>
+        <%- csp %>
+        <%- injectScript %>
+    </head>
+    <template id="profile-link-template" style="cursor: pointer; font-weight: 700; text-decoration: underline;"></template>
+    <body>
+        <!-- CLS Tracking (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WQD48GK2" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+        <!-- End CLS Tracking (noscript) -->
+    </body>
+</html>
diff --git a/frontend/app/package.json b/frontend/app/package.json
@@ -2,12 +2,14 @@
     "name": "openchat_app",
     "version": "2.0.0",
     "private": true,
+    "type": "module",
     "scripts": {
-        "build": "sh ./build_dev.sh",
+        "build": "sh ./build_prod.sh",
         "build:prod": "sh ./build_prod.sh",
         "build:prod_test": "sh ./build_prod_test.sh",
         "build:testnet": "sh ./build_testnet.sh",
-        "dev": "sh ./build_dev.sh -w",
+        "dev": "sh ./build_dev.sh",
+        "dev:workers": "sh ./build_dev_workers.sh",
         "start": "sirv public --no-clear",
         "validate": "svelte-check --threshold error",
         "lint": "eslint ./src --fix",
@@ -19,6 +21,7 @@
     },
     "devDependencies": {
         "@google-cloud/translate": "^8.0.1",
+        "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@tsconfig/svelte": "^5.0.0",
         "@types/dom-mediacapture-record": "^1.0.16",
         "@types/dompurify": "^3.0.2",
@@ -50,9 +53,12 @@
         "stream-browserify": "3.0.0",
         "svelte-preprocess": "^6.0.3",
         "tslib": "^2.6.1",
+        "tsx": "^4.19.2",
         "typescript": "=5.4.2",
         "url": "^0.11.1",
-        "util": "0.12.5"
+        "util": "0.12.5",
+        "vite": "^6.0.11",
+        "vite-plugin-html": "^3.2.2"
     },
     "dependencies": {
         "@daily-co/daily-js": "^0.72.0",