Back

Create a Simple Desktop App Using Vite, React, and Tauri.js

19 April 2022  •  --------

Tersedia dalam .

Update 2024: Artikel ini ditulis pada April 2022. Meskipun konsep dasarnya mungkin masih relevan, beberapa detail mungkin sudah outdated. Silakan kunjungi dokumentasi Tauri terbaru untuk informasi yang lebih update dan akurat.

Hai semuanya! Di post ini saya akan membagikan bagaimana cara untuk membuat aplikasi desktop sederhana menggunakan React, Vite, dan Tauri.js. Aplikasi sederhana nya adalah sebuah penghitung (bawaan dari Vite React boilerplate) yang akan kita build menjadi aplikasi desktop yang bisa diinstall di macOS, Windows dan Linux. Tapi sebelum kita memulai, saya ada beberapa catatan penting yang Anda harus perhatikan:

  1. Tauri ini masih baru.

    Mereka baru saja merilis versi release candidate nya ke publik (v1.0 RC) di Q1 2022. Jadi jika Anda menemukan permasalahan saat pengembangan, tempat terbaik untuk mencari atau bahkan melaporkan permasalahan anda adalah GitHub repository mereka.

  2. Tauri menggunakan Rust sebagai server-side runtime mereka

    Jika Anda membutuhkan Node.js sebagai server-side runtime Anda (seperti Electron), Tauri bukan untuk Anda.

Oke, mari kita mulai!

Persyaratan

Node.js LTS (> v14.0) dan npm / yarn harus sudah terinstall dan berjalan dengan baik pada perangkat Anda. Untuk post kali ini, saya akan menggunakan yarn untuk menginstall berbagai dependencies yang kita perlukan.

Langkah-Langkah

Pertama, kita perlu membuat sebuah aplikasi Vite React. Anda bisa mengikuti langkah-langkah bagaimana cara membuatnya dari dokumentasi mereka, atau bisa dengan menuliskan perintah ini pada terminal Anda:

$ yarn create vite

Isi bagian nama project **dengan nama yang Anda inginkan. Lalu pada saat opsi pemilihan framework muncul, pilih react. Untuk bagian varian, pilih opsi varian yang Anda biasanya gunakan (JavaScript/TypeScript). Saya akan memilih JavaScript untuk post ini. Berikutnya, ikuti langkah-langkah yang sudah disediakan untuk menginstall dan menjalankan aplikasi tersebut.

Persiapan menginstall Tauri

Selanjutnya, kita perlu mempersiapkan perangkat kita untuk dapat menginstall Tauri. Anda dapat melihat langkah-langkahnya dari dokumentasi resmi mereka:

Menginstall Tauri ke dalam Aplikasi Vite React

Jika persiapan sudah selesai, kita dapat menginstall Tauri ke dalam aplikasi kita. Ikuti langkah-langkahnya berikut ini:

# pertama, install paket Tauri CLI sebagai devDependencies
$ yarn add -D @tauri-apps/cli

# kedua, install paket Tauri API sebagai dependencies
$ yarn add @tauri-apps/api

# terakhir, jalankan perintah init Tauri
$ yarn tauri init

Tauri akan menanyakan beberapa hal untuk mengkonfigurasi aplikasi Anda:

  • What is your app name? (Apa nama aplikasi Anda?)

    Isi dengan nama yang Anda inginkan. Atau gunakan nama yang sama seperti saat Anda membuat aplikasi Vite React app sebelumnya.

  • What should the window title be? (Apa judul jendelanya?)

    Beri judul ke jendela aplikasi supaya pengguna dapat melihatnya saat mereka membuka aplikasi tersebut.

  • Where are your web assets ... ? (Dimana web asset nya?)

    Isi dengan: ../dist

  • What is the URL of your dev server? (URL dev server nya apa?)

    Isi dengan: http://localhost:3000

Kemudian, Tauri akan otomatis membuat sebuah folder baru bernama src-tauri. Didalamnya, akan ada banyak konfigurasi, namun yang perlu kita perhatikan adalah file tauri.conf.json. Buka file tersebut dan lihat dua key konfigurasi ini:

  • build.beforeDevCommand

    Isinya harus sesuai dengan perintah untuk menjalankan (dev command) aplikasi Vite React app kita.

  • build.beforeBuildCommand

    Isinya harus sesuai dengan perintah untuk membangun (build command) aplikasi Vite React app kita.

Contoh yang benar adalah seperti kode dibawah ini. Jika konfigurasi di sisi Anda belum seperti ini, maka sesuaikanlah seperti contoh kode yang ada dibawah ini:

{
  "build": {
    "beforeDevCommand": "yarn dev",
    "beforeBuildCommand": "yarn build"
  }
}

Selanjutnya jika sudah sesuai, kita dapat menjalankan aplikasi Vite React app dalam mode pengembangan (development mode) menggunakan perintah dari Tauri:

$ yarn tauri dev

Tunggu hingga proses build nya selesai. Setelah selesai maka aplikasi desktop yang sudah di-bundle oleh Tauri akan muncul seperti ini:

Tara! Jika ini yang Anda lihat juga, selamat Anda sudah berhasil membuat sebuah aplikasi desktop sederhana dengan menggunakan Vite, React, dan Tauri.

Oiya satu hal lagi, jika Anda ingin melakukan debug di mode production build, Anda dapat melakukannya dengan menggunakan perintah ini:

$ yarn tauri build

Setelah proses *build-*nya selesai, maka akan muncul perintah untuk menginstall aplikasi tersebut ke dalam perangkat Anda.

Melakukan Cross-Platform Builds

Saat post ini ditulis, Tauri belum support untuk melakukan cross-platform build di local atau di perangkat kita masing. Untungnya, Tauri menawarkan solusi dengan membuat sebuah GitHub action yang dapat kita gunakan untuk melakukan cross-platform build.

Pertama, kita harus menaruh kode kita ke sebuah repositori GitHub. Selanjutnya, dari folder root project Anda, buatlah folder baru dengan nama .github dan isilah folder tersebut dengan folder lagi bernama workflows, lalu yang terakhir buatlah sebuah file dengan nama apapun namun harus berformat .yml. Contohnya release.yml. Selanjunya, silakan salin kode ini ke dalam file tersebut:

name: 'build-and-publish' # nama workflow nya
on:
  push:
    branches:
      - main # workflow ini hanya akan berjalan saat ada perubahan di branch `main`
concurrency:
  group: ${{ github.ref }}
  cancel-in-progress: true

jobs:
  publish-tauri:
    strategy:
      fail-fast: false
      matrix:
        platform: [macos-latest, ubuntu-latest, windows-latest] # platform yang ingin Anda build

    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@v2
      - name: setup node
        uses: actions/setup-node@v1
        with:
          node-version: 16
      - name: install Rust stable
        uses: actions-rs/toolchain@v1
        with:
          toolchain: stable
      - name: install dependencies (ubuntu only)
        if: matrix.platform == 'ubuntu-latest'
        run: |
          sudo apt-get update
          sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf
      - name: install app dependencies
        run: yarn
      - uses: tauri-apps/tauri-action@v0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tagName: app-v__VERSION__
          releaseName: 'app v__VERSION__'
          releaseBody: 'See the assets to download this version and install.'
          releaseDraft: true
          prerelease: false

Jika nama branch utama Anda bukanlah main, silakan ubah pada opsi branches dengan nama branch utama Anda.

Anda juga dapat melakukan build spesifik untuk sebuah atau beberapa platform saja. Anda dapat melakukannya dengan mengubah isi dari opsi platform yang ada pada file tersebut. Contohnya, jika Anda hanya ingin melakukan build untuk macOS Anda bisa isi dengan macos-latest saja. Perlu dicatat bahwa hingga saat ini, Tauri hanya support 3 platform saja: macos-latest, windows-latest, dan ubuntu-latest.

Selanjutnya, lakukan commit pada file tersebut dan push ke repositori Anda. Akan muncul sebuah titik kecil berwarna kuning pada bagian header repositori Anda yang menandakan ada proses GitHub workflow yang sedang berjalan. Klik titik tersebut untuk melihat prosesnya.

Setelah semua proses build nya rampung, statusnya akan berubah menjadi sukses dengan ikon centang berwarna hijau.

Lalu GitHub workflow akan otomatis membuat sebuah rilisan draft yang isinya adalah image dan file aplikasi yang sudah selesai di-build. Untuk melihatnya Anda bisa membuka halaman “Releases” pada repositori Anda, dan akan terlihat kurang lebih seperti ini:

Selamat! Anda sudah dapat membuat aplikasi desktop sederhana, yang dapat Anda unduh dan jalankan di perangkat Anda. Sekarang Anda dapat mengubah-ubah kode Anda seperti yang Anda inginkan, lalu tinggal commit & push saja ke branch utama Anda, dan aplikasi desktop akan secara otomatis di-build dan dalam beberapa menit akan tersedia untuk Anda. Anda juga dapat melihat contoh repositori nya, disini.

“Selamat mencoba!” - Sisca Kohl