Belajar Astro - Memulai Proyek Astro

#Pendahuluan

Teori di episode 1 dan 2 sudah cukup — sekarang saatnya tangan di keyboard. Episode 3 ini sepenuhnya praktik: kalian akan membuat proyek Astro dari nol, menjelajahi struktur dan file pentingnya, menjalankan dev server, lalu menyiapkan TypeScript, ESLint, dan formatting agar project rapi sejak hari pertama.

Banyak pemula melompat langsung ke kode dan mengabaikan fondasi tooling. Padahal konfigurasi yang benar akan menghemat waktu di seluruh series: TypeScript menangkap kesalahan sebelum build, ESLint menjaga kualitas, dan Prettier membuat format kode konsisten di antara anggota tim.

Siapkan terminal kalian dan ikuti langkah demi langkah — di akhir episode, kalian akan memiliki project Astro yang bersih dan siap dikembangkan.

#Membuat Proyek dengan create-astro

#Menjalankan Perintah Scaffolding

Pastikan kalian berada di direktori tempat proyek akan dibuat, lalu jalankan:

npm create astro@latest

npm create astro@latest adalah pintu masuk resmi. Perintah ini menanyakan beberapa hal: nama project, template (Empty, Basics, Blog, atau Docs), apakah memakai TypeScript, dan instalasi dependency. Untuk latihan, pilih template Basics dengan TypeScript Strict, lalu konfirmasi instalasi dependency.

#Alternatif dengan Nama Project Langsung

Kalian juga bisa menentukan nama project langsung di perintah yang sama, sehingga wizard berjalan lebih singkat:

npm create astro@latest situs-konten -- --template basics --typescript strict

Flag --typescript strict mengaktifkan TypeScript dengan mode paling ketat — pilihan yang direkomendasikan untuk codebase serius.

#Struktur Proyek dan File Penting

#Peta Direktori Hasil Scaffolding

Setelah proses selesai, struktur proyek kalian akan seperti ini:

situs-konten/
├── public/             # aset statis tanpa proses
├── src/
│   ├── components/     # komponen reusable
│   ├── layouts/        # layout halaman
│   └── pages/          # rute halaman
├── astro.config.mjs    # konfigurasi Astro
├── tsconfig.json       # konfigurasi TypeScript
└── package.json        # script dan dependency

Folder src/pages adalah pusat routing: file yang diletakkan di sana langsung menjadi halaman. Folder public disalin apa adanya ke dist/ saat build — cocok untuk favicon, logo, dan file tanpa proses.

#File Konfigurasi Utama

astro.config.mjs adalah pusat konfigurasi Astro. Isi awalnya sederhana:

astro.config.mjs default

import { defineConfig } from "astro/config";
 
export default defineConfig({
  site: "https://contoh.dev",
});

Properti site pada defineConfig({ site: "..." }) wajib diisi untuk fitur seperti sitemap dan canonical URL — kalian akan mengisinya dengan domain produksi nanti di episode 8.

#Menjalankan Dev Server dan Live Reload

#Perintah Dev

Dari dalam folder proyek, jalankan dev server:

npm run dev

Output terminal akan menampilkan URL http://localhost:4321. Buka URL tersebut di browser — halaman pertama Astro kalian sudah hidup. Coba edit file src/pages/index.astro, dan perhatikan perubahan langsung terlihat tanpa refresh manual. Inilah live reload dan HMR yang dijalankan Vite.

#Menjalankan Build dan Preview

Untuk melihat hasil produksi:

npm run build
npm run preview

npm run build menghasilkan folder dist/ yang siap deploy. npm run preview melayani hasil build tersebut secara lokal agar kalian bisa memeriksa sebelum meng-upload ke hosting.

#Konfigurasi TypeScript, ESLint, dan Formatting

#TypeScript Strict

Astro memakai tsconfig.json yang meng-extend astro/tsconfigs/strict. Mode strict ini menyalakan pemeriksaan null, unused variables, dan banyak aturan lain. Verifikasi isinya:

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
}

Untuk mengetik-check seluruh project, jalankan npx astro check. Perintah ini akan melaporkan error tipe di file .astro dan .ts — biasakan menjalankannya sebelum push.

#ESLint untuk Kualitas Kode

Astro tidak menginstall ESLint secara default. Kalian bisa menambahkan konfigurasi resmi komunitas:

npm install -D eslint eslint-plugin-astro
npx eslint --init

Setelah terpasang, npx eslint src memindai seluruh folder src dan melaporkan potensi masalah seperti variabel yang tidak terpakai.

#Prettier untuk Formatting

Formatting yang konsisten bisa diotomatiskan dengan Prettier dan plugin khusus Astro:

npm install -D prettier prettier-plugin-astro

Kemudian buat file .prettierrc berisi { "plugins": ["prettier-plugin-astro"] }, dan jalankan npx prettier --write . untuk memformat seluruh proyek. Sekali setup, kalian tidak perlu khawatir soal tata letak kode lagi.

#Penutup

Episode 3 memberikan pengalaman nyata pertama: membuat proyek dengan npm create astro@latest, memahami struktur folder dan file konfigurasi, menjalankan dev server dengan live reload, serta menyiapkan TypeScript strict, ESLint, dan Prettier untuk project yang bersih.

Inti yang harus dibawa pulang:

• npm create astro@latest menghasilkan project dengan wizard interaktif.
• src/pages menentukan rute; public menyimpan aset tanpa proses.
• astro.config.mjs berisi konfigurasi inti seperti site.
• npm run dev menjalankan dev server di port 4321 dengan HMR.
• npm run build menghasilkan dist/; npm run preview melayaninya.
• Pasang npx astro check, ESLint, dan Prettier untuk kualitas kode.

Di episode 4 selanjutnya kita akan membangun pages, layouts, dan components: membuat halaman di src/pages, layout reusable di src/layouts, perbedaan komponen Astro dengan komponen framework, serta styling dengan CSS, scoped styles, dan Tailwind. Project kalian akan mulai terasa seperti situs sungguhan.