Cara Deploy Flutter Web

The Ngoding

Yo Guys, ini postingan pertama saya setelah hampir 1,5 tahun off belum ada postingan karena kesibukan.

Semoga kedepan bisa lebih aktif lagi postingannya. Kali ini saya akan bahas tentang bagaimana cara deploy flutter web hingga bisa dia akses secara global di internet yaak. Oh iya, semua yang saya tulis disini adalah gratis dan langsung terdeploy otomatis ya guys kalau kalian ada perubahan, jadi ga perlu kalian update manual web kalian cukup push ke repository kalian dan web kalian otomatis terupdate.

Buat Project

  1. Buat project dengan perintah seperti ini Buat Project
  2. jalankan projectnya dan akan nampak seperti dibawah ini Buat Project

Upload ke Github

  1. Buat dulu projectnya di github Buat Project 2.push project kamu ke repo yang sudah kamu buat Buat Project Buat Project

Deploy Project

Deploy ke Firebase Hosting

Untuk refrensi yang lebih lengkap, kamu bisa merujuk langsung ke website firebase

  1. Buat Project firebase kamu terlebih dahulu

  2. Kembali ke project anda komputer kamu

  3. buka terminal pada project kamu

  4. jalankan perintah

firebase login
firebase init hosting
  1. lakukan configurasi serpti gambar dibawah ini Buat Project

  2. Deploy dan Jika berhasil akan terlihat seperti gambar

firebase deploy

Buat Project

7.buka project anda dan edit pada bagian firebase.json yang semula

{
  "hosting": {
    "public": "y",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

menjadi

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
  1. Jalankan perintah
flutter build web  
  1. deploy kembali dengan perintah
firebase deploy

Buat Project

  1. Web kamu sudah bisa diakses seperti digambar Buat Project

Deploy ke Netlify

  1. Buat akun di Netlify dengan menggunakan GITHUB

  2. Pada bagian tab Site, buat site baru dengan memilih menu Import an existing project

Buat Project

  1. Pilih Deploy with Github

  2. Cari repository yang sudah kamu buat

  3. Setelah sukses, kalian akan mendapatkan configuration seperti dibawah ini

Buat Project

  1. Atur configurationnya seperti ini
  • Pada bagian Build command
if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release
  • Pada bagian Publish directory
build/web
  1. Kemudian deploy dan ilhat hasilnya pada URL yang diberikan di hasil build

Deploy ke varcel

  1. Buat akun dengan menggunakan github
  2. Buat project baru
  3. import dari github
  4. Pada Configure Project menu, lakukan seperti ini

Buat Project

  • Build command:
      flutter/bin/flutter build web --release
    
  • Output directory:
      build/web
    
  • Install command:
      if cd flutter; then git pull && cd .. ; else git clone https://github.com/flutter/flutter.git; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web
    
  1. Deploy selesai akan tampil seperti ini

Buat Project

Hasil Dari tutorial ini


✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi’i

Previous Post Next Post

13 Alasan Jetpack Compose Lebih Baik untuk Pengembangan Aplikasi Android

Cong Fandi

Jetpack Compose - Surface

Cong Fandi

Jetpack Compose - CutCornerShape

Cong Fandi

Jetpack Compose - RoundedCornerShape

Cong Fandi

Jetpack Compose - CircleShape

Cong Fandi

Video

The Ngoding