Belajar Astro - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Astro! Series ini akan membawa kalian menguasai Astro — framework web modern untuk membangun situs berbasis konten yang super cepat — dari fondasi konsep sampai production readiness. Total ada 24 episode yang tersusun dari enam fase, mulai dari pre-requisites hingga fitur-fitur terbaru yang stabil.

Tapi sebelum menulis kode Astro pertama, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena Astro bukan framework di atas segalanya — dia bekerja paling baik ketika kalian sudah paham HTML, CSS, dan JavaScript. Hampir semua template dan komponen Astro ditulis dalam bentuk yang menyerupai HTML, sehingga fondasi tiga teknologi ini akan membuat perjalanan kalian jauh lebih lancar.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar, menyiapkan Node.js dan editor, menginstall Astro CLI, lalu membuat proyek pertama. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#HTML, CSS, dan JavaScript Modern

Astro memakai ekstensi .astro yang isinya hampir seperti HTML: tag pembuka, tag penutup, atribut, dan elemen bersarang. Kalian wajib bisa menulis struktur HTML semantik tanpa melihat referensi. Di sisi gaya, CSS adalah bahasa default Astro — baik CSS biasa, CSS module, maupun framework seperti Tailwind.

JavaScript juga tidak kalah penting. Astro mendukung JavaScript modern (ES6+) di bagian frontmatter komponen dan di scripting. Minimal kalian harus memahami const dan let, arrow function, template literal, destructuring, dan async/await. Contoh kecil:

JavaScript modern yang sering dipakai

const nama = "Arman";
const sapa = (orang) => `Halo, ${orang}!`;
const [pertama, kedua] = ["blog", "docs"];
const data = await fetch("/api/statistik").then((r) => r.json());

Kode di atas memakai arrow function sapa dan destructuring — dua pola yang akan sangat sering kalian temui di seluruh series ini.

#Konsep Komponen dan Static Site Generation

Astro dibangun di atas ide komponen: potongan UI yang bisa dipakai ulang dan menerima data lewat props. Jika kalian pernah memakai komponen di framework mana pun, konsepnya sama. Yang membedakan Astro adalah filosofi static site generation (SSG): halaman dirender menjadi HTML murni saat build time, bukan saat browser memuat halaman. Hasilnya situs yang ringan dan cepat.

Pahami juga perbedaan utama tiga istilah ini: static rendering (HTML dibuat di build time), server rendering (HTML dibuat per request), dan client rendering (HTML dibuat oleh JavaScript di browser). Astro mendukung ketiganya, dan kalian akan belajar kapan memakai yang mana di episode 6 dan 21.

#Package Manager dan Command Line

Astro dikelola melalui npm. Kalian harus nyaman menjalankan perintah di terminal, memakai npm install, membaca error output, dan memahami isi package.json. Kalau terbiasa dengan pnpm atau yarn, itu juga boleh — seluruh series memakai npm agar konsisten.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js LTS

Astro membutuhkan Node.js versi LTS terbaru. Verifikasi dulu apakah Node sudah terpasang:

node --version
npm --version

node --version harus menampilkan nomor versi seperti v22.x.x atau lebih baru. Jika belum ada, install Node.js LTS dari situs resmi atau lewat package manager sistem operasi kalian. Untuk sistem operasi, Astro berjalan di Windows, macOS, dan Linux — cukup sediakan RAM minimal 8 GB agar build dan dev server terasa nyaman.

#Editor dan Extension

Rekomendasi utama adalah VS Code dengan ekstensi resmi Astro dari komunitas. Ekstensi ini memberikan syntax highlighting untuk file .astro, autocomplete komponen, dan integrasi dengan TypeScript. Setelah memasangnya, coba buka file kosong berakhiran .astro dan pastikan editor mengenali sintaksnya.

#Browser Modern

Gunakan browser terbaru seperti Chrome, Firefox, atau Edge. Karena Astro menghasilkan HTML dan CSS modern, browser yang usang akan menyulitkan saat debugging. Aktifkan juga DevTools — kalian akan menggunakannya untuk memeriksa elemen, melihat network, dan mengukur performa mulai episode 9.

#Membuat Proyek Astro Pertama

#Perintah create-astro

Dengan semua prasyarat terpenuhi, jalankan perintah berikut di terminal untuk membuat proyek baru:

npm create astro@latest

Perintah npm create astro@latest akan menanyakan nama direktori project, template awal, apakah memakai TypeScript, dan beberapa opsi lain. Pilih template minimal (Empty) untuk latihan, lalu tunggu sampai dependensi selesai diinstall.

#Menjalankan Dev Server

Masuk ke direktori proyek dan jalankan dev server:

cd nama-project
npm run dev

Dev server akan berjalan di http://localhost:4321. Setiap perubahan file akan langsung terlihat di browser lewat live reload dan Hot Module Replacement (HMR) — inilah kenapa episode 3 akan membedah struktur proyek secara mendalam.

#Ringkasan Kesiapan

Rangkuman prasyarat yang sudah kalian siapkan di episode 0:

• HTML, CSS, dan JavaScript modern (ES6+) sebagai fondasi bahasa.
• Konsep komponen, template, dan static site generation.
• Package manager npm dan kebiasaan memakai command line.
• Node.js LTS terinstall dan terverifikasi.
• VS Code dengan ekstensi Astro dan browser modern.
• Proyek Astro pertama yang berhasil berjalan di dev server.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Fondasi yang kuat akan membuat 23 episode berikutnya terasa jauh lebih ringan.

#Penutup

Di episode 0 ini kalian sudah menyiapkan pijakan untuk seluruh series: memahami skill dasar yang dibutuhkan, menyiapkan Node.js LTS, editor, dan browser, lalu berhasil membuat proyek Astro pertama yang berjalan di dev server.

Inti yang harus dibawa pulang:

• Astro memakai HTML, CSS, dan JavaScript — kuasai ketiganya dulu.
• Astro membangun situs dengan konsep komponen dan static site generation.
• Node.js LTS wajib terinstall dan terverifikasi dengan node --version.
• Gunakan VS Code dengan ekstensi Astro untuk pengalaman terbaik.
• npm create astro@latest adalah pintu masuk untuk proyek baru.
• Dev server berjalan di http://localhost:4321 dengan live reload.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan Astro — dari evolusi web development, kelahiran Astro sebagai framework untuk content-focused sites, hingga perbandingannya dengan Jamstack, Gatsby, dan Next.js. Pastikan environment kalian sudah siap, karena perjalanan Belajar Astro baru saja dimulai!