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
2024-09-17 14:07:22 +03:00 · 2024-04-08 20:09:15 +08:00 · 2024-04-08 20:09:15 +08:00 · 5479d3ec6e
commit 5479d3ec6e
parent 5777830730
18 changed files with 684 additions and 99 deletions
--- a/.github/workflows/deploy_test_web.yaml
+++ b/.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
--- a/.github/workflows/web2_ci.yaml
+++ b/.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
--- a/frontend/appflowy_web_app/.eslintignore
+++ b/frontend/appflowy_web_app/.eslintignore
@ -3,4 +3,5 @@ dist/
 src-tauri/
 .eslintrc.cjs
 tsconfig.json
-**/backend/**
+**/backend/**
+vite.config.ts
--- a/frontend/appflowy_web_app/.eslintignore.web
+++ b/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
--- a/frontend/appflowy_web_app/Dockerfile
+++ b/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;"]
--- a/frontend/appflowy_web_app/README.md
+++ b/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...
--- a/frontend/appflowy_web_app/beta.env
+++ b/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
--- a/frontend/appflowy_web_app/nginx.conf
+++ b/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;
+        }
+    }
+}
--- a/frontend/appflowy_web_app/package.json
+++ b/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"
  }
 }
--- a/frontend/appflowy_web_app/pnpm-lock.yaml
+++ b/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:
--- a/frontend/appflowy_web_app/src/AppTheme.tsx
+++ b/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;
--- a/frontend/appflowy_web_app/src/application/services/js-services/auth.service.ts
+++ b/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);
-    return Promise.reject('Not implemented');
-    // return this.httpClient.signInWithEmailPassword(email, password);
+    // await this.wasmService.cloudService.signIn(email, password);
+    // return Promise.reject('Not implemented');
+    return this.httpClient.signInWithEmailPassword(email, password);
  };

  signOut = async (): Promise<void> => {
--- a/frontend/appflowy_web_app/src/application/services/wasm-services/cloud.service.ts
+++ b/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({
-      base_url: this.config.baseURL,
-      ws_addr: this.config.wsURL,
-      gotrue_url: this.config.gotrueURL,
-      device_id: this.config.deviceId,
-      client_id: this.config.clientId,
-      configuration: {
-        compression_quality: 8,
-        compression_buffer_size: 10240,
-      },
-    });
+    // this.client = ClientAPI.new({
+    //   base_url: this.config.baseURL,
+    //   ws_addr: this.config.wsURL,
+    //   gotrue_url: this.config.gotrueURL,
+    //   device_id: this.config.deviceId,
+    //   client_id: this.config.clientId,
+    //   configuration: {
+    //     compression_quality: 8,
+    //     compression_buffer_size: 10240,
+    //   },
+    // });

  }

-  async signIn (email: string, password: string) {
-    try {
-      const res = await this.client?.sign_in_password(email, password);
-
-      console.log(res);
-    } catch (error) {
-      console.error(error);
-    }
-  }
+  // async signIn (email: string, password: string) {
+  //   try {
+  //     const res = await this.client?.sign_in_password(email, password);
+  //
+  //     console.log(res);
+  //   } catch (error) {
+  //     console.error(error);
+  //   }
+  // }
 }
--- a/frontend/appflowy_web_app/src/components/auth/LoginButtonGroup.tsx
+++ b/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>
  );
 };
--- a/frontend/appflowy_web_app/src/components/auth/ProtectedRoutes.tsx
+++ b/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 />}
-      <Suspense>{platform.isTauri && <TauriAuth />}</Suspense>
+      {isLoading && <StartLoading/>}
+      <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>
  );
--- a/frontend/appflowy_web_app/src/stores/app/slice.ts
+++ b/frontend/appflowy_web_app/src/stores/app/slice.ts
@ -1,36 +1,42 @@
-import { AFServiceConfig } from '@/application/services/services.type';
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-
-const defaultConfig: AFServiceConfig = {
-  cloudConfig: {
-    baseURL: import.meta.env.DEV
-      ? import.meta.env.AF_BASE_URL || 'https://test.appflowy.cloud'
-      : 'https://beta.appflowy.cloud',
-    gotrueURL: import.meta.env.DEV
-      ? import.meta.env.AF_GOTRUE_URL || 'https://test.appflowy.cloud/gotrue'
-      : 'https://beta.appflowy.cloud/gotrue',
-    wsURL: import.meta.env.DEV
-      ? import.meta.env.AF_WS_URL || 'wss://test.appflowy.cloud/ws/v1'
-      : 'wss://beta.appflowy.cloud/ws/v1',
-  },
-};
-
-export interface AppState {
-  appConfig: AFServiceConfig;
-}
-
-const initialState: AppState = {
-  appConfig: defaultConfig,
-};
-
-export const slice = createSlice({
-  name: 'app',
-  initialState,
-  reducers: {
-    setAppConfig: (state, action: PayloadAction<AFServiceConfig>) => {
-      state.appConfig = action.payload;
-    },
-  },
-});
-
-export const { setAppConfig } = slice.actions;
+import { AFServiceConfig } from '@/application/services/services.type';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+const defaultConfig: AFServiceConfig = {
+  cloudConfig: {
+    baseURL: import.meta.env.AF_BASE_URL
+      ? import.meta.env.AF_BASE_URL
+      : import.meta.env.DEV
+      ? 'https://test.appflowy.cloud'
+      : 'https://beta.appflowy.cloud',
+    gotrueURL: import.meta.env.AF_GOTRUE_URL
+      ? import.meta.env.AF_GOTRUE_URL
+      : import.meta.env.DEV
+      ? 'https://test.appflowy.cloud/gotrue'
+      : 'https://beta.appflowy.cloud/gotrue',
+    wsURL: import.meta.env.AF_WS_URL
+      ? import.meta.env.AF_WS_URL
+      : import.meta.env.DEV
+      ? 'wss://test.appflowy.cloud/ws/v1'
+      : 'wss://beta.appflowy.cloud/ws/v1',
+  },
+};
+
+export interface AppState {
+  appConfig: AFServiceConfig;
+}
+
+const initialState: AppState = {
+  appConfig: defaultConfig,
+};
+
+export const slice = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    setAppConfig: (state, action: PayloadAction<AFServiceConfig>) => {
+      state.appConfig = action.payload;
+    },
+  },
+});
+
+export const { setAppConfig } = slice.actions;
--- a/frontend/appflowy_web_app/test.env
+++ b/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
--- a/frontend/appflowy_web_app/vite.config.ts
+++ b/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: {
-    //   '/api': {
-    //     target: 'https://test.appflowy.cloud',
-    //     changeOrigin: true,
-    //     secure: false,
-    //   },
-    // },
+    cors: false,
  },
  envPrefix: ['AF', 'TAURI_'],
  build: process.env.TAURI_MODE
    ? {
-        // Tauri supports es2021
-        target: process.env.TAURI_PLATFORM === 'windows' ? 'chrome105' : 'safari13',
-        // don't minify for debug builds
-        minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
-        // produce sourcemaps for debug builds
-        sourcemap: !!process.env.TAURI_DEBUG,
-      }
+      // Tauri supports es2021
+      target: process.env.TAURI_PLATFORM === 'windows' ? 'chrome105' : 'safari13',
+      // don't minify for debug builds
+      minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
+      // produce sourcemaps for debug builds
+      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/` },