Kalo ada client atau ada kebutuhan buat bikin aplikasi web yang simple kaya blog, landing page, company profile udah bisa ku pastikan aku bakal pake Astro.
Astro tu apasih?
Astro ini tuh salah satu framework front-end kaya (next.js, nuxt.js, dll) tapi lebih fokus mempermudah pembuatan aplikasi web yang “content driven” kaya blog, landing page, company profile dll. Keunggulan lainnya juga si Astro ini bisa kombinasiin berbagai front-end libraries/framework, jadi kamu bisa pake Vue, React.js, Svelte itu dalam satu repository (walaupun aku ga rekomendasiin ini sih, mungkin bakal ku bahas di blog berikutnya)
Kenapa Astro?
Aku udah ga pernah tuh kalo memulai project tu yang bikin file html, css satu-satu, sekarang udah banyak banget tools yg memudahkan ya salah satunya Astro ini, kenapa?
- Gampang banget init projectnya, tinggal coding HTML aja gausah banyak mikirin tentang post-development kaya web performance, security, dll
- Dipermudah banget kalo butuh tools apa apa kaya tailwind, css nya udah compressed, performance nya bagus bgt gilak
- Deployment ke cloud hosting yg populer juga udah gampang parah
Tanpa ba-bi-bu mari kita cobain langsung pake Astro
- Pastiin kamu udah install node.js di laptopmu
- Bikin project baru pake Astro, jalanin command ini:
npm create astro@latest - Ikutin proses instalasinya, nanti dia bakal bikinin kamu 1 project & folder baru dimana kamu jalanin command tsb
- Kalo udah selesai, kamu bakal disuruh buat jalanin cd ke-directory yang kamu buat trus jalanin
npm run dev - Nah command terakhir itu buat jalanin webmu dalam mode “development” dan kamu udah bisa mulai coding sekarang 🥳
- Buat ngerjain segala project, sekarang aku pake tailwindcss buat mempermudah proses styling webnya, pake Astro gampang banget (matiin dulu
npm run devyg tadi udah dijalanin) trus tinggal run: npx astro add tailwind trus ikutin prosesnya (yes-yes aja), then done. Bisa jalanin development mode nya lagi (npm run dev) - Di langkah ini udah cukup banget buat develop dan bikin aplikasi web yang “content driven” kaya blog, landing page, dll dan udah hampir dipastikan minimal web performance scorenya diatas 95!
Terakhir, Deploy!
Buat deploy sebenernya ngga usah tunggu development nya selesai, kita bisa langsung deploy juga kok habis setup project diatas.
Deploying ke Vercel cukup gampang, tinggal jalanin perintah ‘vercel’ trus masukin username & password kamu yg terdaftar di vercel (ada opsi pake github juga). Trus dia bakal minta kamu buat project baru ato mau continues project yg sudah ada? Kalo kamu udah milih pilihan, trus ikutin aja prosesnya sampai selesai. Detailnya kamu bisa baca disini .
Kalo proses selesai dia bakal bilang deploy successful & dia bakal masukin domain untuk web kamu yang baru successful deploy.
Kamu udah berhasil deploy, sekarang coba akses aja webmu di domain yg dia kasih tadi. Kalo kebuka bisa dipastikan webmu udah siap bisa diakses sama orang umum.
Selamat! 🥳
Penjelasan tentang Astro dalam bentuk video singkat
Kalau kamu lebih suka video, ini aku bikin video singkat tentang Astro, bisa dilihat di bawah ini: