Cara Deploy Flutter Web

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
2. jalankan projectnya dan akan nampak seperti dibawah ini

Upload ke Github

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

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

5. lakukan configurasi serpti gambar dibawah ini

6. Deploy dan Jika berhasil akan terlihat seperti gambar

firebase deploy

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"
      }
    ]
  }
}

8. Jalankan perintah

flutter build web  

9. deploy kembali dengan perintah

firebase deploy

11. Web kamu sudah bisa diakses seperti digambar

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

3. Pilih Deploy with Github

4. Cari repository yang sudah kamu buat

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

6. 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

7. 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

• 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
  

5. Deploy selesai akan tampil seperti ini

Hasil Dari tutorial ini

• FIREBASE BISA DI KLIK LINK INI https://flutter-web-12be9.web.app/
• NETLIFY BISA DI KLIK LINK INI https://wondrous-crisp-371cbf.netlify.app/
• VARCEL BISA DI KLIK LINK INI https://sample-grhvysvx5-cong-fandis-projects.vercel.app/

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

Video