Cara Mudah Hosting Aplikasi Flutter Web Menggunakan Github Pages

Server Push by Undraw.co

Sejak dirilis flutter versi 2, yang memungkinkan developer untuk membuat aplikasi multi-platform dengan single code-base. Salah satunya adalah menjalankan flutter di web, hal ini sangat membantu dalam pengembangan aplikasi juga bisa memotong biaya pengembangan, sehingga tidak perlu membuat ulang aplikasi.

Flutter Web Architecture by Flutter.dev

Flutter menerapkan Flutter Code Drawing Layer diatas API browser standar, yang bertujuan untuk mengkompilasi kode Dart menjadi kode Javascript, jadi tidak menggunakan mesin ARM yang digunakan untuk Aplikasi Mobile. menggunakan kombinasi dari DOM, Canvas dan WebAssembly, flutter memberikan portabilitas, performa UX yang tinggi dari berbagai web browser. Flutter juga mengoptimasi javascript kompiler untuk mengubah flutter core dan frameworknya menjadi satu bagian dan memperkecil ukuran source code yang nantinya akan dideploy di web server.

Beberapa Fitur Yang Didukung Flutter Web

Ada beberapa fitur unggulan yang bisa didukung oleh flutter web seperti :

PWA (Progressive Web Application)
Flutter mendukung PWA yang terintegrasi dengan browser, termasuk Add To Home Screen (ADTH) dan offline mode.

SPA (Single Page Application)

Flutter Web mendukung standalone web app yang memiliki berbagai UI interaktif untuk user pada berbagai devices.

Flutter Web Render

Ketika menjalankan dan membangun aplikasi flutter web, kita bisa memilih mesin render sesuai dengan kebutuhan kita. Ada 2 tipe render flutter web seperti :

• HTML Renderer : Menggunakan kombinasi elemen HTML, CSS, Canvas Element, dan SVG. render tipe ini mempunyai download size yang kecil.
• CanvasKit renderer : Render tipe ini akan menghasilkan aplikasi yang sama seperti mobile dan desktop, mempunyai kecepatan dan performa yang baik tapi menambah download size sekitar 2MB.

Langkah Build App dan Deploy Web ke Hosting

Build Flutter Web App

Jika belum memiliki project yang akan dibuild, kita bisa membuat project baru dengan perintah

flutter create nama_project
cd nama_project

Sebagai contoh disini saya menggunakan sample mini project yang saya dapatkan dari link berikut :
https://devcode.gethired.id/challenge/mobile-starter-1

lalu build aplikasi dan deploy bisa menggunakan perintah

# auto select render type
flutter build web --release

Kita bisa memilih opsi tipe render sesuai kebutuhan kita dengan menambahkan perintah “ — web-render canvaskit”, hasil dari build app akan muncul di direktori project “/build/web”.

# select canvaskit render type
flutter build web --web-renderer canvaskit --release

# select html render type 
flutter build web --web-renderer html --release

Hasil build web app akan menghasilkan struktur kode berikut :

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
    packages
      cupertino_icons
        assets
          CupertinoIcons.ttf
    shaders
      ink_sparkle.frag
  canvaskit
    canvaskit.js
    canvaskit.wasm
    profiling
      canvaskit.js
      canvaskit.wasm
  favicon.png
  flutter.js
  flutter_service_worker.js
  index.html
  main.dart.js
  manifest.json
  version.json

canvaskit direktori dan file didalamnya hanya akan muncul ketika CanvasKit renderer dipilih, bukan ketika HTML renderer dipilih.

Deploy Flutter Wep App

Ketika kita sudah melakukan test dan siap untuk deploy app, upload release bundle ke cloud hosting yang ingin kita gunakan. Kali ini kita akan melakukan deploy app ke Github Page. Karena github pages merupakan sebuah layanan gratis dari Github untuk hosting sebuah web statis.

1. Buat Repository Github Baru

Create New Repository for Github Pages

2. Initialisasi Git Project

Pindah ke direktori “build/web” dengan perintah

cd /build/web

Lakukan inititalisasi git project dengan perintah berikut

git init
git remote add origin https://github.com/username/nama-project.github.io.git

3. Push ke Repository Github

Lakukan commit untuk menambahkan perubahan file dengan perintah :

git add --all && git commit -m "first commit"

Push ke Repository dengan perintah

git push -u origin main

4. Flutter Web Berhasil Diploy ke Github Pages

Sample Flutter Web App on Github Pages

Yeay, akhirnya kita selesai melakukan deploy flutter web ke github hosting.

Cukup mudah bukan untuk melakukan deploy aplikasi Flutter Web secara gratis di Github pages?

Kita bisa manfaatkan Github pages ini untuk publikasikan portofolio aplikasi Flutter Web kita. Berikutnya case apa yang ingin teman teman ketahui tentang Flutter bisa tuliskan di kolom komentar, mari kita saling berdiskusi tentang Flutter.

Sumber Referensi :

Web renderers

https://docs.github.com/en/pages

https://docs.flutter.dev/development/platform-integration/web