Add native apps (#318)

Author: davidmyersdev

.eslintignore

@@ -1,5 +1,7 @@
 .nuxt
 .output
+/src-tauri/gen/schemas
+/src-tauri/target
 dev-dist
 dist
 node_modules

.github/actions/deploy-tauri/action.yml

@@ -0,0 +1,19 @@
+name: Deploy Tauri
+description: Build and deploy native Tauri applications
+runs:
+  using: composite
+  steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        run_install: false
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 18
+        cache: pnpm
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install

.github/workflows/ci.yml

@@ -59,7 +59,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
       - name: Setup pnpm cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           path: |
@@ -87,7 +87,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
       - name: Setup pnpm cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           path: |
@@ -117,7 +117,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
       - name: Setup pnpm cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           path: |
@@ -127,7 +127,7 @@ jobs:
         run: pnpm install --shamefully-hoist
       - run: pnpm playwright install --with-deps
       - run: pnpm playwright test ./test/e2e
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
@@ -153,7 +153,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
       - name: Setup pnpm cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           path: |
@@ -183,7 +183,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
       - name: Setup pnpm cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           path: |

.github/workflows/deploy-tauri.yml

@@ -0,0 +1,60 @@
+name: deploy_tauri
+
+on:
+  push:
+    branches:
+      - release
+
+# This workflow will trigger on each push to the `release` branch to create or update a GitHub release, build your app, and upload the artifacts to the release.
+
+jobs:
+  publish-tauri:
+    permissions:
+      contents: write
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: macos-latest # for Arm based macs (M1 and above).
+            args: --target aarch64-apple-darwin
+          - platform: macos-latest # for Intel based macs.
+            args: --target x86_64-apple-darwin
+          - platform: ubuntu-22.04 # for Tauri v1 you could replace this with ubuntu-20.04.
+            args: ''
+          - platform: windows-latest
+            args: ''
+
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          # Those targets are only used on macos runners so it's in an `if` to slightly speed up windows and linux builds.
+          targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
+
+      - name: install dependencies (ubuntu only)
+        if: matrix.platform == 'ubuntu-22.04' # This must match the platform value defined above.
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+
+      - name: install frontend dependencies
+        run: pnpm install
+
+      - uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tagName: app-v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version.
+          releaseName: App v__VERSION__
+          releaseBody: See the assets to download this version and install.
+          releaseDraft: true
+          prerelease: false
+          args: ${{ matrix.args }}

app.vue

@@ -42,6 +42,12 @@ export default defineComponent({
       document.body.dataset.isMounted = 'true'
 
       logEvent(appEventTypes.appMounted)
+
+      if (import.meta.env.TAURI_DESKTOP) {
+        const { init } = await import('/src/native')
+
+        await init()
+      }
     })
 
     const sizes = computed(() => {

composables/useDevice.ts

@@ -1,5 +1,3 @@
-import { navigator } from '#helpers/globals'
-
 export const useDevice = () => {
   const mq = useMq()
 

helpers/globals.ts

@@ -93,6 +93,18 @@ export default defineNuxtConfig({
         file: '~/pages/index.vue',
       })
     },
+    'vite:extend': ({ config }) => {
+      // https://github.com/nuxt/nuxt/issues/27558#issuecomment-2254471601
+      if (config.server && config.server.hmr) {
+        if (typeof config.server.hmr === 'boolean') {
+          config.server.hmr = {}
+        }
+
+        // This port must match the main dev server in order for Tauri to work.
+        config.server.hmr.port = 8888
+        config.server.hmr.protocol = 'ws'
+      }
+    },
   },
 
   imports: {
@@ -159,6 +171,8 @@ export default defineNuxtConfig({
       navigateFallbackDenylist: [
         // Necessary for Firebase auth requests.
         /^\/__/,
+        // Necessary for Firebase emulator requests.
+        /^\/emulator/,
         // Keep this around for backward compatibility.
         /^\/manifest\.json$/,
         // Keep this around for backward compatibility.
@@ -318,6 +332,9 @@ export default defineNuxtConfig({
       linkFeedback: '',
       openaiApiKey: '',
       stripeMonthlyPrice: '',
+      tauri: {
+        desktop: '',
+      },
     },
   },
 
@@ -329,6 +346,8 @@ export default defineNuxtConfig({
   },
 
   vite: {
+    clearScreen: false,
+    envPrefix: ['VITE_', 'TAURI_'],
     plugins: [
       nodePolyfills({
         globals: {
@@ -340,5 +359,14 @@ export default defineNuxtConfig({
       }),
       svgPlugin(),
     ],
+    server: {
+      // This is currently ignored due to a Nuxt bug.
+      // https://github.com/nuxt/nuxt/issues/27558#issuecomment-2254471601
+      hmr: {
+        port: 8888,
+        protocol: 'ws',
+      },
+      strictPort: true,
+    },
   },
 })

nuxt.config.ts

@@ -7,11 +7,16 @@
   "funding": "https://github.com/sponsors/davidmyersdev",
   "scripts": {
     "build": "nuxt prepare && nuxt typecheck && nuxt generate",
+    "build:desktop": "TAURI_SIGNING_PRIVATE_KEY=~/.tauri/octo.key TAURI_SIGNING_PRIVATE_KEY_PASSWORD= tauri build",
+    "build:desktop:debug": "TAURI_SIGNING_PRIVATE_KEY=~/.tauri/octo.key TAURI_SIGNING_PRIVATE_KEY_PASSWORD= tauri build --debug -c ./src-tauri/tauri.dev.conf.json",
     "clean": "rimraf .output dev-dist dist",
     "dev": "nuxt dev --port 8888",
     "dev:full": "run-p dev firebase:start",
     "dev:minimal": "DISABLE_SSR=1 DISABLE_PWA=1 NUXT_PUBLIC_FIREBASE_DISABLED=1 run-s dev",
     "dev:screenshots": "DISABLE_DEVTOOLS=1 run-s dev:minimal",
+    "dev:tauri": "tauri dev -c ./src-tauri/tauri.dev.conf.json",
+    "dev:tauri:android": "tauri android dev -c ./src-tauri/tauri.dev.conf.json",
+    "dev:tauri:ios": "tauri ios dev --verbose -c ./src-tauri/tauri.dev.conf.json",
     "firebase:login": "firebase login",
     "firebase:start": "firebase -c ./firebase/firebase.json --project \"${FIREBASE_PROJECT_ID:-demo-octo}\" emulators:start --import ./firebase/data --export-on-exit ./firebase/data",
     "lint": "eslint .",
@@ -30,6 +35,7 @@
     "@headlessui/vue": "^1.7.22",
     "@mermaid-js/mermaid-mindmap": "^9.3.0",
     "@tabler/icons-vue": "^3.11.0",
+    "@tauri-apps/plugin-opener": "^2.2.4",
     "codemirror-lang-mermaid": "^0.2.2",
     "culori": "^3.3.0",
     "deepmerge": "^4.3.1",
@@ -59,9 +65,13 @@
     "@csstools/postcss-oklab-function": "^3.0.9",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@pinia/nuxt": "^0.4.11",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.49.1",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.15",
+    "@tauri-apps/cli": "^2.1.0",
+    "@tauri-apps/plugin-dialog": "^2.2.0",
+    "@tauri-apps/plugin-process": "^2.2.0",
+    "@tauri-apps/plugin-updater": "~2",
     "@types/culori": "^2.0.4",
     "@types/file-saver": "^2.0.7",
     "@types/lodash-es": "^4.17.12",