chore: web build size optimization (#5071)

* chore: deploy test web

fix: update nginx.conf

fix: support https

* fix: support wasm gzip

* chore: optimize web build size

* fix: code review

.github/workflows/deploy_test_web.yaml

@@ -0,0 +1,73 @@
+name: Deploy Web (Test)
+
+on:
+  push:
+    branches:
+      - build/test
+      - main
+env:
+  NODE_VERSION: "18.16.0"
+  PNPM_VERSION: "8.5.0"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    env:
+      SSH_PRIVATE_KEY: ${{ secrets.WEB_TEST_SSH_PRIVATE_KEY }}
+      REMOTE_HOST: ${{ secrets.WEB_TEST_REMOTE_HOST }}
+      REMOTE_USER: ${{ secrets.WEB_TEST_REMOTE_USER }}
+      SSL_CERTIFICATE: ${{ secrets.WEB_TEST_SSL_CERTIFICATE }}
+      SSL_CERTIFICATE_KEY: ${{ secrets.WEB_TEST_SSL_CERTIFICATE_KEY }}
+      ENV_FILE: test.env
+    steps:
+      - uses: actions/checkout@v4
+      - name: setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - name: setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: ${{ env.PNPM_VERSION }}
+      - name: Node_modules cache
+        uses: actions/cache@v2
+        with:
+          path: frontend/appflowy_web_app/node_modules
+          key: node-modules-${{ runner.os }}
+      - name: install frontend dependencies
+        working-directory: frontend/appflowy_web_app
+        run: |
+          pnpm install
+      - name: copy env file
+        working-directory: frontend/appflowy_web_app
+        run: |
+          cp ${{ env.ENV_FILE }} .env
+      - name: test and lint
+        working-directory: frontend/appflowy_web_app
+        run: |
+          pnpm run lint
+      - name: build
+        working-directory: frontend/appflowy_web_app
+        run: |
+          pnpm run build
+      - name: generate SSL certificate
+        run: |
+          echo "${{ env.SSL_CERTIFICATE }}" > nginx-signed.crt
+          echo "${{ env.SSL_CERTIFICATE_KEY }}" > nginx-signed.key
+      - name: Deploy to EC2
+        uses: easingthemes/ssh-deploy@main
+        with:
+          SSH_PRIVATE_KEY: ${{ env.SSH_PRIVATE_KEY }}
+          ARGS: "-rlgoDzvc -i"
+          SOURCE: "frontend/appflowy_web_app/dist frontend/appflowy_web_app/Dockerfile frontend/appflowy_web_app/nginx.conf frontend/appflowy_web_app/.env nginx-signed.crt nginx-signed.key"
+          REMOTE_HOST: ${{ env.REMOTE_HOST }}
+          REMOTE_USER: ${{ env.REMOTE_USER }}
+          EXCLUDE: "frontend/appflowy_web_app/dist/, frontend/appflowy_web_app/node_modules/"
+          SCRIPT_AFTER: |
+            docker build -t appflowy-web-app .
+            docker rm -f appflowy-web-app || true
+            docker run -d -p 80:80 -p 443:443 --name appflowy-web-app appflowy-web-app

.github/workflows/web2_ci.yaml

@@ -47,6 +47,7 @@ jobs:
         with:
           path: frontend/appflowy_web_app/node_modules
           key: node-modules-${{ runner.os }}
+
       - name: install frontend dependencies
         working-directory: frontend/appflowy_web_app
         run: |
@@ -55,7 +56,19 @@ jobs:
         working-directory: frontend/appflowy_web_app
         run: |
           pnpm run lint
-      - name: build
+      - name: build and analyze
         working-directory: frontend/appflowy_web_app
         run: |
-          pnpm run build
+          pnpm run analyze >> analyze-size.txt
+      - name: Upload analyze-size.txt
+        uses: actions/upload-artifact@v4
+        with:
+          name: analyze-size.txt
+          path: frontend/appflowy_web_app/analyze-size.txt
+          retention-days: 30
+      - name: Upload stats.html
+        uses: actions/upload-artifact@v4
+        with:
+          name: stats.html
+          path: frontend/appflowy_web_app/dist/stats.html
+          retention-days: 30

frontend/appflowy_web_app/.eslintignore

@@ -3,4 +3,5 @@ dist/
 src-tauri/
 .eslintrc.cjs
 tsconfig.json
-**/backend/**
+**/backend/**
+vite.config.ts

frontend/appflowy_web_app/.eslintignore.web

@@ -3,4 +3,5 @@ dist/
 src-tauri/
 .eslintrc.cjs
 tsconfig.json
-src/application/services/tauri-services/
+src/application/services/tauri-services/
+vite.config.ts

frontend/appflowy_web_app/Dockerfile

@@ -0,0 +1,23 @@
+FROM node:latest
+
+RUN apt-get update && \
+    apt-get install -y nginx
+
+RUN addgroup --system nginx && \
+    adduser --system --no-create-home --disabled-login --ingroup nginx nginx
+
+RUN apt-get clean && rm -rf /var/lib/apt/lists/*
+
+
+COPY dist/ /usr/share/nginx/html/
+
+COPY nginx.conf /etc/nginx/nginx.conf
+
+COPY nginx-signed.crt /etc/ssl/certs/nginx-signed.crt
+COPY nginx-signed.key /etc/ssl/private/nginx-signed.key
+
+RUN chown -R nginx:nginx /etc/ssl/certs/nginx-signed.crt /etc/ssl/private/nginx-signed.key
+
+EXPOSE 80 443
+
+CMD ["nginx", "-g", "daemon off;"]

frontend/appflowy_web_app/README.md

@@ -194,6 +194,77 @@ Don't modify the theme file in `frontend/appflowy_web_app/src/styles/variables`
     }
   ```
 
+### 📦 Deployment
+
+Use the AppFlowy CI/CD pipeline to deploy the application to the test and production environments.
+
+- Push the changes to the main branch
+- Deploy Test Environment
+    - Automatically, the test environment will be deployed if merged to the main branch or build/test branch
+- Deploy Production Environment
+    - Navigate to the Actions tab
+    - Click on the workflow and select the Run workflow
+    - Enter the options
+    - Click on the Run workflow button
+
+#### 📦 Deployment (Self-Hosted)
+
+##### Pre-requisites
+
+Please ensure you have learned about:
+
+- [Deploy Web application on AWS Cloud using EC2 Instance](https://www.youtube.com/watch?v=gWVIIU1ev0Y)
+- [How to Install and Use Rsync Command](https://operavps.com/docs/install-rsync-command-in-linux/)
+- [How to Use ssh-keygen to Generate a New SSH Key?](https://www.ssh.com/academy/ssh/keygen)
+- [Linux post-installation steps for Docker Engine](https://docs.docker.com/engine/install/linux-postinstall/)
+- [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
+
+And then follow the steps below:
+
+1. Ensure you have the following installed on your server:
+    - Docker: [Install Docker](https://docs.docker.com/engine/install/)
+    - Rsync: [Install Rsync](https://operavps.com/docs/install-rsync-command-in-linux/)
+
+2. Create a new user for deploy, and generate an SSH key for the user
+
+   ```bash
+   sudo adduser appflowy(or any name)
+   sudo su - appflowy
+   mkdir ~/.ssh
+   chmod 700 ~/.ssh
+   ssh-keygen -t rsa
+   chmod 600 ~/.ssh/authorized_keys
+   # add the user to the docker group, to run docker commands without sudo
+   sudo usermod -aG docker ${USER}
+   ```
+    - visit the `~/.ssh/id_rsa` and `~/.ssh/id_rsa.pub` to get the private and public key respectively
+    - add the public key to the `~/.ssh/authorized_keys` file
+    - ensure the private key is kept safe
+    - exit and login back to the server with the new
+      user: `ssh -i your-existing-key.pem ec2-user@your-instance-public-dns`
+
+3. Clone the AppFlowy repository
+
+4. Set the following secrets in your
+   repository, have to
+   know [Using secrets in GitHub Actions](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions)
+
+> Note: Test Environment: prefix the secret with `WEB_TEST_` and Production Environment: prefix the secret with `WEB_`
+
+> for example, `WEB_TEST_SSH_PRIVATE_KEY` and `WEB_SSH_PRIVATE_KEY`
+
+- `SSH_PRIVATE_KEY`: The private key generated in step 2: cat ~/.ssh/id_rsa
+- `REMOTE_HOST`: The host of the server: `your-instance-public-dns` or `your-instance-ip`
+- `REMOTE_USER`: The user created in step 2: `appflowy`
+- `SSL_CERTIFICATE`: The SSL certificate for the
+  server - [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
+- `SSL_CERTIFICATE_KEY`: The SSL certificate key for the
+  server - [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
+
+5. Run the deployment workflow to deploy the application(production or test environment)
+
+> Note: the test server will **automatically** deploy if merged to the main branch or build/test branch
+
 ### 🧪 Testing
 
 > To be Continued...

frontend/appflowy_web_app/beta.env

@@ -0,0 +1,3 @@
+AF_WS_URL=wss://beta.appflowy.cloud/ws/v1
+AF_BASE_URL=https://beta.appflowy.cloud
+AF_GOTRUE_URL=https://beta.appflowy.cloud/gotrue

frontend/appflowy_web_app/nginx.conf

@@ -0,0 +1,78 @@
+# nginx.conf
+user  nginx;
+worker_processes  auto;
+
+error_log  /var/log/nginx/error.log notice;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    #tcp_nopush     on;
+
+    keepalive_timeout  65;
+
+    gzip  on;
+
+    gzip_static on;
+
+    gzip_http_version 1.0;
+
+    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript application/wasm;
+
+    # Existing server block for HTTP
+    server {
+        listen       80;
+        server_name  localhost;
+        #server_name appflowy.com *.appflowy.com;
+
+        location / {
+            return 301 https://$host$request_uri;
+        }
+
+    }
+
+    # Additional server block for HTTPS
+    server {
+        listen 443 ssl http2;
+        listen [::]:443 ssl http2;
+        server_name  localhost;
+        #server_name appflowy.com *.appflowy.com;
+
+        ssl_certificate      /etc/ssl/certs/nginx-signed.crt;
+        ssl_certificate_key  /etc/ssl/private/nginx-signed.key;
+
+        ssl_session_cache    shared:SSL:1m;
+        ssl_session_timeout  5m;
+
+        ssl_ciphers  HIGH:!aNULL:!MD5;
+        ssl_prefer_server_ciphers  on;
+
+        location / {
+            root   /usr/share/nginx/html;
+            index  index.html index.htm;
+        }
+
+        error_page  404 /404.html;
+        location = /404.html {
+            root   /usr/share/nginx/html;
+        }
+
+        error_page  500 502 503 504 /50x.html;
+        location = /50x.html {
+            root   /usr/share/nginx/html;
+        }
+    }
+}

frontend/appflowy_web_app/package.json

@@ -14,7 +14,8 @@
     "tauri:dev": "tauri dev",
     "css:variables": "node style-dictionary/config.cjs",
     "sync:i18n": "node scripts/i18n.cjs",
-    "link:client-api": "rm -rf node_modules/.vite && node scripts/create-symlink.cjs"
+    "link:client-api": "rm -rf node_modules/.vite && node scripts/create-symlink.cjs",
+    "analyze": "ANALYZE_MODE=true vite build"
   },
   "dependencies": {
     "@appflowyinc/client-api-wasm": "^0.0.2",
@@ -117,6 +118,7 @@
     "postcss": "^8.4.21",
     "prettier": "2.8.4",
     "prettier-plugin-tailwindcss": "^0.2.2",
+    "rollup-plugin-visualizer": "^5.12.0",
     "style-dictionary": "^3.9.2",
     "tailwindcss": "^3.2.7",
     "ts-jest": "^29.1.1",
@@ -125,7 +127,10 @@
     "typescript": "4.9.5",
     "uuid": "^9.0.0",
     "vite": "^5.2.0",
+    "vite-plugin-compression2": "^1.0.0",
+    "vite-plugin-importer": "^0.2.5",
     "vite-plugin-svgr": "^3.2.0",
-    "vite-plugin-terminal": "^1.2.0"
+    "vite-plugin-terminal": "^1.2.0",
+    "vite-plugin-total-bundle-size": "^1.0.7"
   }
 }

frontend/appflowy_web_app/pnpm-lock.yaml

@@ -297,6 +297,9 @@ devDependencies:
   prettier-plugin-tailwindcss:
     specifier: ^0.2.2
     version: 0.2.2(prettier@2.8.4)
+  rollup-plugin-visualizer:
+    specifier: ^5.12.0
+    version: 5.12.0
   style-dictionary:
     specifier: ^3.9.2
     version: 3.9.2
@@ -321,12 +324,21 @@ devDependencies:
   vite:
     specifier: ^5.2.0
     version: 5.2.0(@types/node@20.11.30)(sass@1.70.0)
+  vite-plugin-compression2:
+    specifier: ^1.0.0
+    version: 1.0.0
+  vite-plugin-importer:
+    specifier: ^0.2.5
+    version: 0.2.5
   vite-plugin-svgr:
     specifier: ^3.2.0
     version: 3.2.0(typescript@4.9.5)(vite@5.2.0)
   vite-plugin-terminal:
     specifier: ^1.2.0
     version: 1.2.0(vite@5.2.0)
+  vite-plugin-total-bundle-size:
+    specifier: ^1.0.7
+    version: 1.0.7(vite@5.2.0)
 
 packages:
 
@@ -2916,6 +2928,10 @@ packages:
       - debug
     dev: false
 
+  /b4a@1.6.6:
+    resolution: {integrity: sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==}
+    dev: true
+
   /babel-jest@29.6.2(@babel/core@7.24.3):
     resolution: {integrity: sha512-BYCzImLos6J3BH/+HvUCHG1dTf2MzmAB4jaVxHV+29RZLjR29XuYTmsf2sdDwkrb+FczkGo3kOhE7ga6sI0P4A==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -2951,6 +2967,12 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /babel-plugin-import@1.13.8:
+    resolution: {integrity: sha512-36babpjra5m3gca44V6tSTomeBlPA7cHUynrE2WiQIm3rEGD9xy28MKsx5IdO45EbnpJY7Jrgd00C6Dwt/l/2Q==}
+    dependencies:
+      '@babel/helper-module-imports': 7.24.3
+    dev: true
+
   /babel-plugin-istanbul@6.1.1:
     resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
     engines: {node: '>=8'}
@@ -3013,6 +3035,12 @@ packages:
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  /bare-events@2.2.2:
+    resolution: {integrity: sha512-h7z00dWdG0PYOQEvChhOSWvOfkIKsdZGkWr083FgN/HyoQuebSew/cgirYqh9SCuy/hRvxc5Vy6Fw8xAmYHLkQ==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -3039,6 +3067,12 @@ packages:
     dependencies:
       fill-range: 7.0.1
 
+  /browserify-zlib@0.1.4:
+    resolution: {integrity: sha512-19OEpq7vWgsH6WkvkBJQDFvJS1uPcbFOQ4v9CU839dO+ZZXUZO6XpE6hNCqvlIIj+4fZvRiJ6DsAQ382GwiyTQ==}
+    dependencies:
+      pako: 0.2.9
+    dev: true
+
   /browserslist@4.23.0:
     resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -3124,6 +3158,11 @@ packages:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  /chalk@5.3.0:
+    resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+    dev: true
+
   /change-case@4.1.2:
     resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
     dependencies:
@@ -3254,6 +3293,10 @@ packages:
   /convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  /core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    dev: true
+
   /cosmiconfig@7.1.0:
     resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
     engines: {node: '>=10'}
@@ -3480,6 +3523,11 @@ packages:
       es-errors: 1.3.0
       gopd: 1.0.1
 
+  /define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+    dev: true
+
   /define-properties@1.2.1:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
@@ -3623,6 +3671,15 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /duplexify@3.7.1:
+    resolution: {integrity: sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==}
+    dependencies:
+      end-of-stream: 1.4.4
+      inherits: 2.0.4
+      readable-stream: 2.3.8
+      stream-shift: 1.0.3
+    dev: true
+
   /dynamic-dedupe@0.3.0:
     resolution: {integrity: sha512-ssuANeD+z97meYOqd50e04Ze5qp4bPqo8cCkI4TRjZkzAUgIDTrXV1R8QCdINpiI+hw14+rYazvTRdQrz0/rFQ==}
     dependencies:
@@ -3655,6 +3712,12 @@ packages:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
     dev: true
 
+  /end-of-stream@1.4.4:
+    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
+    dependencies:
+      once: 1.4.0
+    dev: true
+
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -4016,6 +4079,10 @@ packages:
     resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
     dev: false
 
+  /fast-fifo@1.3.2:
+    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
+    dev: true
+
   /fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -4289,6 +4356,18 @@ packages:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
     dev: true
 
+  /gunzip-maybe@1.4.2:
+    resolution: {integrity: sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==}
+    hasBin: true
+    dependencies:
+      browserify-zlib: 0.1.4
+      is-deflate: 1.0.0
+      is-gzip: 1.0.0
+      peek-stream: 1.1.3
+      pumpify: 1.5.1
+      through2: 2.0.5
+    dev: true
+
   /has-bigints@1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
     dev: true
@@ -4522,6 +4601,16 @@ packages:
     dependencies:
       has-tostringtag: 1.0.2
 
+  /is-deflate@1.0.0:
+    resolution: {integrity: sha512-YDoFpuZWu1VRXlsnlYMzKyVRITXj7Ej/V9gXQ2/pAe7X1J7M/RNOqaIYi6qUn+B7nGyB9pDXrv02dsB58d2ZAQ==}
+    dev: true
+
+  /is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dev: true
+
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -4540,6 +4629,11 @@ packages:
     dependencies:
       is-extglob: 2.1.1
 
+  /is-gzip@1.0.0:
+    resolution: {integrity: sha512-rcfALRIb1YewtnksfRIHGcIY93QnK8BIQ/2c9yDYcG/Y6+vRoJuTWBmmSEbyLLYtXm7q35pHOHbZFQBaLrhlWQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /is-hotkey@0.2.0:
     resolution: {integrity: sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==}
     dev: false
@@ -4619,6 +4713,17 @@ packages:
       call-bind: 1.0.7
     dev: true
 
+  /is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+    dependencies:
+      is-docker: 2.2.1
+    dev: true
+
+  /isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+    dev: true
+
   /isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
     dev: true
@@ -5586,6 +5691,15 @@ packages:
     dependencies:
       mimic-fn: 2.1.0
 
+  /open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+    dev: true
+
   /optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
@@ -5627,6 +5741,10 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
+  /pako@0.2.9:
+    resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
+    dev: true
+
   /param-case@3.0.4:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
     dependencies:
@@ -5699,6 +5817,14 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  /peek-stream@1.1.3:
+    resolution: {integrity: sha512-FhJ+YbOSBb9/rIl2ZeE/QHEsWn7PqNYt8ARAY3kIgNGOk13g9FGyIY6JIl/xB/3TFRVoTv5as0l11weORrTekA==}
+    dependencies:
+      buffer-from: 1.1.2
+      duplexify: 3.7.1
+      through2: 2.0.5
+    dev: true
+
   /performance-now@2.1.0:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
     dev: false
@@ -5888,6 +6014,10 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+    dev: true
+
   /prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -5919,6 +6049,21 @@ packages:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
     dev: true
 
+  /pump@2.0.1:
+    resolution: {integrity: sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==}
+    dependencies:
+      end-of-stream: 1.4.4
+      once: 1.4.0
+    dev: true
+
+  /pumpify@1.5.1:
+    resolution: {integrity: sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==}
+    dependencies:
+      duplexify: 3.7.1
+      inherits: 2.0.4
+      pump: 2.0.1
+    dev: true
+
   /punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -5935,6 +6080,10 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
 
+  /queue-tick@1.0.1:
+    resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}
+    dev: true
+
   /quick-lru@5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
@@ -6411,6 +6560,18 @@ packages:
       pify: 2.3.0
     dev: true
 
+  /readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+    dev: true
+
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -6517,6 +6678,22 @@ packages:
       glob: 7.2.3
     dev: true
 
+  /rollup-plugin-visualizer@5.12.0:
+    resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    peerDependencies:
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      open: 8.4.2
+      picomatch: 2.3.1
+      source-map: 0.7.4
+      yargs: 17.7.2
+    dev: true
+
   /rollup@4.13.2:
     resolution: {integrity: sha512-MIlLgsdMprDBXC+4hsPgzWUasLO9CE4zOkj/u6j+Z6j5A4zRY+CtiXAdJyPtgCsc42g658Aeh1DlrdVEJhsL2g==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -6563,6 +6740,10 @@ packages:
       isarray: 2.0.5
     dev: true
 
+  /safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+    dev: true
+
   /safe-regex-test@1.0.3:
     resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
     engines: {node: '>= 0.4'}
@@ -6761,6 +6942,11 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  /source-map@0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
@@ -6770,6 +6956,19 @@ packages:
     dependencies:
       escape-string-regexp: 2.0.0
 
+  /stream-shift@1.0.3:
+    resolution: {integrity: sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==}
+    dev: true
+
+  /streamx@2.16.1:
+    resolution: {integrity: sha512-m9QYj6WygWyWa3H1YY69amr4nVgy61xfjys7xO7kviL5rfIEc2naf+ewFiOA+aEJD7y0JO3h2GoiUv4TDwEGzQ==}
+    dependencies:
+      fast-fifo: 1.3.2
+      queue-tick: 1.0.1
+    optionalDependencies:
+      bare-events: 2.2.2
+    dev: true
+
   /string-length@4.0.2:
     resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
     engines: {node: '>=10'}
@@ -6839,6 +7038,12 @@ packages:
       es-object-atoms: 1.0.0
     dev: true
 
+  /string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: true
+
   /strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -6972,6 +7177,14 @@ packages:
       - ts-node
     dev: true
 
+  /tar-stream@3.1.7:
+    resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
+    dependencies:
+      b4a: 1.6.6
+      fast-fifo: 1.3.2
+      streamx: 2.16.1
+    dev: true
+
   /test-exclude@6.0.0:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
@@ -6984,6 +7197,13 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+  /through2@2.0.5:
+    resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
+    dependencies:
+      readable-stream: 2.3.8
+      xtend: 4.0.2
+    dev: true
+
   /tiny-invariant@1.3.1:
     resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
     dev: false
@@ -7386,6 +7606,26 @@ packages:
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
+  /vite-plugin-compression2@1.0.0:
+    resolution: {integrity: sha512-42XNp6FjxE0JIecxj1fdi770pLhYm3MJhBUAod9EszTgDg9C4LDOgBzWcj/0K52KfJrpRXwUsWV6kqTDuoCfLA==}
+    dependencies:
+      '@rollup/pluginutils': 5.1.0
+      gunzip-maybe: 1.4.2
+      tar-stream: 3.1.7
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
+  /vite-plugin-importer@0.2.5:
+    resolution: {integrity: sha512-6OtqJmVwnfw8+B4OIh7pIdXs+jLkN7g5PIqmZdpgrMYjIFMiZrcMB1zlyUQSTokKGC90KwXviO/lq1hcUBUG3Q==}
+    dependencies:
+      '@babel/core': 7.24.3
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.3)
+      babel-plugin-import: 1.13.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /vite-plugin-svgr@3.2.0(typescript@4.9.5)(vite@5.2.0):
     resolution: {integrity: sha512-Uvq6niTvhqJU6ga78qLKBFJSDvxWhOnyfQSoKpDPMAGxJPo5S3+9hyjExE5YDj6Lpa4uaLkGc1cBgxXov+LjSw==}
     peerDependencies:
@@ -7418,6 +7658,15 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-total-bundle-size@1.0.7(vite@5.2.0):
+    resolution: {integrity: sha512-ritAi5hRcuNonHP1wquvzqkZHGpOqRpWiMoEQQDJ3DLYuuVAS3THKyIGv7QSGig5nT+xuMYTLUamBu3Legaipg==}
+    peerDependencies:
+      vite: '>=5.0.0'
+    dependencies:
+      chalk: 5.3.0
+      vite: 5.2.0(@types/node@20.11.30)(sass@1.70.0)
+    dev: true
+
   /vite-plugin-wasm@3.3.0(vite@5.2.0):
     resolution: {integrity: sha512-tVhz6w+W9MVsOCHzxo6SSMSswCeIw4HTrXEi6qL3IRzATl83jl09JVO1djBqPSwfjgnpVHNLYcaMbaDX5WB/pg==}
     peerDependencies:

frontend/appflowy_web_app/src/AppTheme.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
-import { createTheme, ThemeProvider } from '@mui/material';
+import createTheme from '@mui/material/styles/createTheme';
+import ThemeProvider from '@mui/material/styles/ThemeProvider';
 
-function AppTheme({ children }: {
+function AppTheme ({ children }: {
   children: React.ReactNode;
 }) {
   const isDark = false;

frontend/appflowy_web_app/src/application/services/js-services/auth.service.ts

@@ -4,7 +4,6 @@ import { HttpClient } from '@/application/services/js-services/http/client';
 import { ACCESS_TOKEN_NAME, REFRESH_TOKEN_NAME, TOKEN_TYPE_NAME } from '@/application/services/js-services/http/const';
 import { AFWasmService } from '@/application/services/wasm-services';
 
-
 export class JSAuthService implements AuthService {
 
   constructor (private httpClient: HttpClient, private wasmService: AFWasmService) {
@@ -35,9 +34,9 @@ export class JSAuthService implements AuthService {
   };
 
   signinWithEmailPassword = async (email: string, password: string): Promise<UserProfile> => {
-    await this.wasmService.cloudService.signIn(email, password);
+    // await this.wasmService.cloudService.signIn(email, password);
-    return Promise.reject('Not implemented');
+    // return Promise.reject('Not implemented');
-    // return this.httpClient.signInWithEmailPassword(email, password);
+    return this.httpClient.signInWithEmailPassword(email, password);
   };
 
   signOut = async (): Promise<void> => {

frontend/appflowy_web_app/src/application/services/wasm-services/cloud.service.ts

@@ -1,35 +1,36 @@
 import { CloudServiceConfig } from '@/application/services/wasm-services/cloud.type';
-import { ClientAPI } from '@appflowyinc/client-api-wasm';
+
+// import { ClientAPI } from '@appflowyinc/client-api-wasm';
 
 export class CloudService {
-  private client?: ClientAPI;
+  // private client?: ClientAPI;
 
   constructor (private config: CloudServiceConfig) {
     // Do nothing
   }
 
   async init () {
-    this.client = ClientAPI.new({
+    // this.client = ClientAPI.new({
-      base_url: this.config.baseURL,
+    //   base_url: this.config.baseURL,
-      ws_addr: this.config.wsURL,
+    //   ws_addr: this.config.wsURL,
-      gotrue_url: this.config.gotrueURL,
+    //   gotrue_url: this.config.gotrueURL,
-      device_id: this.config.deviceId,
+    //   device_id: this.config.deviceId,
-      client_id: this.config.clientId,
+    //   client_id: this.config.clientId,
-      configuration: {
+    //   configuration: {
-        compression_quality: 8,
+    //     compression_quality: 8,
-        compression_buffer_size: 10240,
+    //     compression_buffer_size: 10240,
-      },
+    //   },
-    });
+    // });
 
   }
 
-  async signIn (email: string, password: string) {
+  // async signIn (email: string, password: string) {
-    try {
+  //   try {
-      const res = await this.client?.sign_in_password(email, password);
+  //     const res = await this.client?.sign_in_password(email, password);
-
+  //
-      console.log(res);
+  //     console.log(res);
-    } catch (error) {
+  //   } catch (error) {
-      console.error(error);
+  //     console.error(error);
-    }
+  //   }
-  }
+  // }
 }

frontend/appflowy_web_app/src/components/auth/LoginButtonGroup.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useAuth } from './auth.hooks';
 import { ProviderType } from '@/application/services/user.type';
 import { useState } from 'react';
-import { EmailOutlined } from '@mui/icons-material';
+import EmailOutlined from '@mui/icons-material/EmailOutlined';
 import SignInWithEmail from './SignInWithEmail';
 
 export const LoginButtonGroup = () => {
@@ -24,7 +24,7 @@ export const LoginButtonGroup = () => {
         color={'inherit'}
         variant={'outlined'}
       >
-        <EmailOutlined className={'mr-2 h-6 w-6'} />
+        <EmailOutlined className={'mr-2 h-6 w-6'}/>
         {t('signIn.signInWithEmail')}
       </Button>
       <Button
@@ -35,7 +35,7 @@ export const LoginButtonGroup = () => {
         color={'inherit'}
         variant={'outlined'}
       >
-        <img src={GoogleIcon} alt={'Google'} className={'mr-2 h-6 w-6'} />
+        <img src={GoogleIcon} alt={'Google'} className={'mr-2 h-6 w-6'}/>
         {t('button.signInGoogle')}
       </Button>
       <Button
@@ -46,7 +46,7 @@ export const LoginButtonGroup = () => {
         color={'inherit'}
         variant={'outlined'}
       >
-        <img src={GithubIcon} alt={'Github'} className={'mr-2 h-6 w-6'} />
+        <img src={GithubIcon} alt={'Github'} className={'mr-2 h-6 w-6'}/>
         {t('button.signInGithub')}
       </Button>
       <Button
@@ -57,10 +57,10 @@ export const LoginButtonGroup = () => {
         color={'inherit'}
         variant={'outlined'}
       >
-        <img src={DiscordIcon} alt={'Discord'} className={'mr-2 h-6 w-6'} />
+        <img src={DiscordIcon} alt={'Discord'} className={'mr-2 h-6 w-6'}/>
         {t('button.signInDiscord')}
       </Button>
-      <SignInWithEmail open={openSignInWithEmail} onClose={() => setOpenSignInWithEmail(false)} />
+      <SignInWithEmail open={openSignInWithEmail} onClose={() => setOpenSignInWithEmail(false)}/>
     </div>
   );
 };

frontend/appflowy_web_app/src/components/auth/ProtectedRoutes.tsx

@@ -4,12 +4,13 @@ import { currentUserActions, LoginState } from '@/stores/currentUser/slice';
 import { useAppDispatch } from '@/stores/store';
 import { getPlatform } from '@/utils/platform';
 import SplashScreen from '@/components/auth/SplashScreen';
-import { CircularProgress, Portal } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
+import Portal from '@mui/material/Portal';
 import { ReactComponent as Logo } from '@/assets/logo.svg';
 
 const TauriAuth = lazy(() => import('@/components/tauri/TauriAuth'));
 
-function ProtectedRoutes() {
+function ProtectedRoutes () {
   const { currentUser, checkUser } = useAuth();
 
   const isLoading = currentUser?.loginState === LoginState.LOADING;
@@ -32,15 +33,15 @@ function ProtectedRoutes() {
   return (
     <div className={'relative h-screen w-screen'}>
       {checked ? (
-        <SplashScreen isAuthenticated={currentUser.isAuthenticated} />
+        <SplashScreen isAuthenticated={currentUser.isAuthenticated}/>
       ) : (
         <div className={'flex h-screen w-screen items-center justify-center'}>
-          <Logo className={'h-20 w-20'} />
+          <Logo className={'h-20 w-20'}/>
         </div>
       )}
 
-      {isLoading && <StartLoading />}
+      {isLoading && <StartLoading/>}
-      <Suspense>{platform.isTauri && <TauriAuth />}</Suspense>
+      <Suspense>{platform.isTauri && <TauriAuth/>}</Suspense>
     </div>
   );
 }
@@ -67,7 +68,7 @@ const StartLoading = () => {
   return (
     <Portal>
       <div className={'fixed inset-0 z-[1400] flex h-full w-full items-center justify-center bg-bg-mask bg-opacity-50'}>
-        <CircularProgress />
+        <CircularProgress/>
       </div>
     </Portal>
   );

frontend/appflowy_web_app/src/stores/app/slice.ts

@@ -1,36 +1,42 @@
-import { AFServiceConfig } from '@/application/services/services.type';
+import { AFServiceConfig } from '@/application/services/services.type';
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-
+
-const defaultConfig: AFServiceConfig = {
+const defaultConfig: AFServiceConfig = {
-  cloudConfig: {
+  cloudConfig: {
-    baseURL: import.meta.env.DEV
+    baseURL: import.meta.env.AF_BASE_URL
-      ? import.meta.env.AF_BASE_URL || 'https://test.appflowy.cloud'
+      ? import.meta.env.AF_BASE_URL
-      : 'https://beta.appflowy.cloud',
+      : import.meta.env.DEV
-    gotrueURL: import.meta.env.DEV
+      ? 'https://test.appflowy.cloud'
-      ? import.meta.env.AF_GOTRUE_URL || 'https://test.appflowy.cloud/gotrue'
+      : 'https://beta.appflowy.cloud',
-      : 'https://beta.appflowy.cloud/gotrue',
+    gotrueURL: import.meta.env.AF_GOTRUE_URL
-    wsURL: import.meta.env.DEV
+      ? import.meta.env.AF_GOTRUE_URL
-      ? import.meta.env.AF_WS_URL || 'wss://test.appflowy.cloud/ws/v1'
+      : import.meta.env.DEV
-      : 'wss://beta.appflowy.cloud/ws/v1',
+      ? 'https://test.appflowy.cloud/gotrue'
-  },
+      : 'https://beta.appflowy.cloud/gotrue',
-};
+    wsURL: import.meta.env.AF_WS_URL
-
+      ? import.meta.env.AF_WS_URL
-export interface AppState {
+      : import.meta.env.DEV
-  appConfig: AFServiceConfig;
+      ? 'wss://test.appflowy.cloud/ws/v1'
-}
+      : 'wss://beta.appflowy.cloud/ws/v1',
-
+  },
-const initialState: AppState = {
+};
-  appConfig: defaultConfig,
+
-};
+export interface AppState {
-
+  appConfig: AFServiceConfig;
-export const slice = createSlice({
+}
-  name: 'app',
+
-  initialState,
+const initialState: AppState = {
-  reducers: {
+  appConfig: defaultConfig,
-    setAppConfig: (state, action: PayloadAction<AFServiceConfig>) => {
+};
-      state.appConfig = action.payload;
+
-    },
+export const slice = createSlice({
-  },
+  name: 'app',
-});
+  initialState,
-
+  reducers: {
-export const { setAppConfig } = slice.actions;
+    setAppConfig: (state, action: PayloadAction<AFServiceConfig>) => {
+      state.appConfig = action.payload;
+    },
+  },
+});
+
+export const { setAppConfig } = slice.actions;

frontend/appflowy_web_app/test.env

@@ -0,0 +1,3 @@
+AF_WS_URL=wss://test.appflowy.cloud/ws/v1
+AF_BASE_URL=https://test.appflowy.cloud
+AF_GOTRUE_URL=https://test.appflowy.cloud/gotrue

frontend/appflowy_web_app/vite.config.ts

@@ -2,7 +2,12 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import wasm from 'vite-plugin-wasm';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { compression } from 'vite-plugin-compression2';
+import usePluginImport from 'vite-plugin-importer';
+import { totalBundleSize } from 'vite-plugin-total-bundle-size';
 
+const isDev = process.env.NODE_ENV === 'development';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -34,6 +39,32 @@ export default defineConfig({
         },
       },
     }),
+    usePluginImport({
+      libraryName: '@mui/material',
+      libraryDirectory: '',
+      camel2DashComponentName: false,
+      style: false,
+    }),
+    usePluginImport({
+      libraryName: '@mui/icons-material',
+      libraryDirectory: '',
+      camel2DashComponentName: false,
+      style: false,
+    }),
+    process.env.ANALYZE_MODE ?
+      visualizer({
+        emitFile: true,
+      }) : undefined,
+    process.env.ANALYZE_MODE ? totalBundleSize({
+      fileNameRegex: /\.(js|css)$/,
+      calculateGzip: false,
+    }) : undefined,
+    !process.env.ANALYZE_MODE ?
+      compression({
+        threshold: 1024,
+        deleteOriginalAssets: true,
+      }) : undefined,
+
   ],
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   // prevent vite from obscuring rust errors
@@ -45,27 +76,53 @@ export default defineConfig({
     watch: {
       ignored: ['**/__tests__/**'],
     },
-    // proxy: {
+    cors: false,
-    //   '/api': {
-    //     target: 'https://test.appflowy.cloud',
-    //     changeOrigin: true,
-    //     secure: false,
-    //   },
-    // },
   },
   envPrefix: ['AF', 'TAURI_'],
   build: process.env.TAURI_MODE
     ? {
-        // Tauri supports es2021
+      // Tauri supports es2021
-        target: process.env.TAURI_PLATFORM === 'windows' ? 'chrome105' : 'safari13',
+      target: process.env.TAURI_PLATFORM === 'windows' ? 'chrome105' : 'safari13',
-        // don't minify for debug builds
+      // don't minify for debug builds
-        minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
+      minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
-        // produce sourcemaps for debug builds
+      // produce sourcemaps for debug builds
-        sourcemap: !!process.env.TAURI_DEBUG,
+      sourcemap: !!process.env.TAURI_DEBUG,
-      }
+    }
     : {
-        target: `esnext`,
+      target: `esnext`,
-      },
+      terserOptions: !isDev ? {
+        compress: {
+          keep_infinity: true,
+          drop_console: true,
+          drop_debugger: true,
+        },
+      } : {},
+      reportCompressedSize: false,
+      sourcemap: isDev,
+      rollupOptions: !isDev ? {
+        output: {
+          chunkFileNames: 'js/[name]-[hash].js',
+          entryFileNames: 'js/[name]-[hash].js',
+          assetFileNames: '[ext]/[name]-[hash].[ext]',
+          manualChunks (id) {
+            if (id.includes(('@mui'))) {
+              return 'mui';
+            }
+            if (id.includes('react-dom') || id.includes('react-is') || id.includes('react')) {
+              return 'react-framework';
+            }
+            if (id.includes('@tauri-apps')) {
+              return 'tauri-api';
+            }
+
+            if (id.includes('node_modules')) {
+              return id.toString().split('node_modules/')[1].split('/')[0].toString();
+            }
+
+          },
+        },
+      } : {},
+    },
   resolve: {
     alias: [
       { find: 'src/', replacement: `${__dirname}/src/` },