Builder Toolkit · 09 / 11

Deployment QA

Semak build anda sebelum dan selepas ship supaya link yang anda share betul-betul berfungsi untuk orang lain.

Deployment QA

Apa ini

Deployment QA ialah semakan pendek yang anda jalankan sebelum share link, dan sekali lagi sejurus selepas deploy.

Ia bukan debugging. Ia semakan yang jumpa masalah sebelum orang lain jumpa.

Satu idea utama

Build anda berfungsi pada mesin anda, dalam browser anda, pada saiz skrin anda, dengan file anda yang sudah di-cache. Tiada satu pun daripada itu benar untuk orang yang buka link anda.

Kenapa penting

Cara paling biasa build pertama memalukan pembinanya bukan crash. Ia link yang di-share dalam group chat, terbuka rosak pada telefon, sebab semua semakan dibuat pada laptop.

Sepuluh minit semakan berstruktur menghalang hampir kesemuanya.

Apa nak buat

Sebelum anda push

npm run build berjaya di local, bukan npm run dev sahaja.
git status tidak tunjuk file .env atau secret menunggu untuk di-commit.
Aksi utama project anda berfungsi dari mula hingga habis.
Tiada teks placeholder seperti lorem ipsum atau TODO yang kelihatan.

npm run dev dan npm run build berbeza. Dev lebih bertoleransi. Build ialah apa yang host anda jalankan, dan ia tangkap error yang dev sembunyikan.

Selepas anda deploy

Buka URL live, bukan localhost, dan ikut semakan ini:

Semakan	Caranya	Cari apa
Boleh buka	Buka URL production	Versi terkini, bukan versi lama
Lebar telefon	Telefon sebenar, atau browser pada 390px	Skrol ke tepi, teks terpotong
Aksi utama	Buat benda yang project ini untuknya	Ia selesai tanpa error
Link	Klik setiap satu	Tiada 404, tiada butang mati
Console	Buka developer tools, tab Console	Error merah
Mata baharu	Window private atau incognito	Apa-apa yang berfungsi hanya sebab anda sudah login atau ada cache

Buat sekarang

Buka URL live anda dalam window private browsing pada telefon. Satu semakan itu tangkap masalah cache, masalah layout, dan andaian login serentak.

Check sendiri

Saya uji URL live, bukan localhost.
Saya uji pada telefon atau pada lebar telefon.
Saya uji dalam window private.
Saya klik setiap link dan jalankan aksi utama.
Console browser tiada error merah.

Skrol ke tepi

Skrol ke tepi pada telefon ialah kecacatan visual paling biasa dalam build beginner. Ia biasanya datang daripada lebar tetap, table yang lebar, atau teks panjang tanpa ruang.

Kecilkan browser anda ke 390 piksel. Kalau scrollbar mendatar muncul, ada sesuatu di dalam yang lebih lebar daripada skrin.

Kalau ada semakan yang gagal

Halaman ini jumpa masalah. Ia tidak baiki. Bawa apa yang anda jumpa ke Troubleshooting deployment atau Baca error.

Common mistakes

Uji localhost dan anggap sudah ship.
Semak hanya pada laptop tempat project dibina.
Share link sebelum buka sendiri sekali pun.
Abaikan error console sebab halaman nampak okay.
Uji sambil login, jadi pelawat yang belum login nampak benda lain sama sekali.
Langkau npm run build sebab dev sudah berjaya.

Next step

Build anda betul-betul boleh di-ship. Kalau ia perlu simpan data, teruskan ke Asas Supabase.