Belajar Astro JS #2: Memahami Struktur Direktori Project Astro
Setelah sebelumnya kita belajar cara install framework astro.
Kali ini kita akan mulai mempelajari sekaligus untuk memahami bagaimana mengelola proyek Astro dengan baik.
Mengapa demikian? jawabannya karena penting untuk memahami struktur direktori proyek yang digunakan dalam framework Astro.
Baiklah.
Dalam artikel ini, kita akan membahas secara rinci struktur direktori proyek Astro beserta penjelasan poin-poin utama yang perlu diketahui.
Struktur Direktori Proyek Astro
Struktur direktori proyek Astro mencerminkan organisasi file yang umumnya digunakan dalam proyek web modern.
Penting untuk diketahui! bahwa struktur direktori dibawah ini merupakan struktur folder dan file dari templat Empty Astro. Untuk templat yang lain mungkin dapat berbeda.
Berikut adalah struktur direktori proyek dari framework Astro:
.
βββ π .vscode
βββ π node_modules
βββ π public/
β βββ πfavicon.svg
βββ π src/
β βββ π pages/
β β βββ π index.astro
β βββ π env.d.ts
βββ π .gitignore
βββ π astro.config.mjs
βββ π package-lock.json
βββ π README.md
βββ π tsconfig.json
Berikut penjelasan untuk masing-masing tiap direktori pada projek astro js:
1. π .vscode
file .vscode
adalah file yang berisi konfigurasi khusus untuk Visual Studio Code, seperti pengaturan tampilan kode atau ekstensi yang disarankan.
Dimana ini memiliki kegunaan untuk membantu meningkatkan pengalaman pengembangan Astro dalam teks editor ini.
2. π node_modules
Folder node_modules
adalah tempat di mana semua dependensi proyek dari framework astro disimpan. Termasuk semua paket JavaScript atau modul yang diperlukan oleh proyek kita. Biasanya, direktori ini dihasilkan oleh manajer paket seperti npm atau Yarn saat kita menginstal dependensi dari kerangka kerja astro.
3. π public
Folder public
digunakan untuk menempatkan file-file statis yang akan disajikan langsung oleh server web kita. File-file di dalamnya dapat diakses secara langsung oleh browser tanpa perlu pemrosesan dari sisi server. Dimana ini adalah tempat yang tepat untuk meletakkan file seperti gambar, favicon, atau file CSS yang digunakan di seluruh situs web kita.
- File π
favicon.svg
dalam direktoripublic
adalah file statis yang dapat digunakan sebagai favicon oleh situs web kita.
4. π src
Folder src
adalah tempat utama untuk kode sumber proyek Astro kita. Artinya Di dalam folder src
, kita memiliki beberapa subdirektori dan file penting, diantaranya:
a. π pages
Folder pages
adalah tempat di mana kita akan menyimpan halaman web utama proyek kita. Di dalamnya, kita akan menemukan berbagai file Astro yang mewakili halaman-halaman yang akan dihasilkan dalam situs web kita.
- File π
index.astro
dalam direktoripages
merupakan halaman web default(beranda) yang ditampilkan oleh web browser saat pertama kali install framework Astro.
b. π env.d.ts
File env.d.ts
adalah file TypeScript yang digunakan untuk mendefinisikan tipe-tipe lingkungan (environment) yang mungkin digunakan dalam proyek kita. Ini membantu meningkatkan dukungan tipe dan autodeklarasi dalam kode kita.
5. π .gitignore
File .gitignore
adalah file konfigurasi untuk Git yang berisi daftar file dan direktori yang akan diabaikan oleh sistem kontrol versi Git. Ini membantu kita menghindari mengunggah file yang tidak perlu atau sensitif ke repositori Git kita.
6. π astro.config.mjs
File astro.config.mjs
adalah file konfigurasi Astro yang penting. Ini berisi pengaturan proyek seperti penggunaan plugin, penanganan rute, dan banyak pengaturan lainnya yang memengaruhi bagaimana Astro memproses proyek kita.
7. π package-lock.json
File package-lock.json
adalah file yang dihasilkan oleh npm dimana berisi informasi daripada tiap-tiap dependensi library yang telah kita install. Ini juga digunakan untuk mengunci versi dari semua dependensi proyek kita. Ini memastikan bahwa proyek kita akan menggunakan versi dependensi yang konsisten ketika kita membagikannya atau membangunnya di lingkungan lain.
8. π README.md
File README.md
adalah tempat untuk dokumentasi proyek kita. Di dalamnya, kita dapat memberikan informasi tentang cara menjalankan proyek, dependensi yang diperlukan, deskripsi umum tentang apa yang proyek kita lakukan, dan panduan penggunaan lainnya.
9. π tsconfig.json
File tsconfig.json
adalah file konfigurasi TypeScript yang digunakan untuk mengonfigurasi pengaturan TypeScript proyek kita. Ini mungkin berisi aturan tipe, path alias, dan pengaturan TypeScript lainnya.
Kesimpulan
Struktur direktori proyek Astro yang telah dijelaskan di atas berguna untuk membantu pengembang(developer) untuk tidak hanya mengatur akan tetapi juga kita dapat mengelola proyek web pada kerangka kerja astro dengan baik.
Dimana dengan memahami peran masing-masing direktori dan file dalam proyek Astro adalah langkah penting dalam pengembangan yang efisien dan efektif.
FAQ (Pertanyaan Umum)
1. Apakah saya dapat mengubah struktur direktori proyek Astro?
Ya, kita dapat menyesuaikan struktur direktori proyek Astro sesuai dengan kebutuhan proyek kita. Namun, penting untuk mempertimbangkan praktik terbaik dalam pengorganisasian proyek web kita agar dapat dengan mudah dikelola dan dipahami oleh tim pengembang kita.
2. Apa perbedaan antara public
dan src
dalam direktori proyek Astro?
public
berisi file-file statis yang disajikan langsung oleh server web, seperti gambar atau file CSS. Ini dapat diakses langsung oleh browser.src
adalah tempat untuk kode sumber proyek kita, termasuk file Astro yang digunakan untuk menghasilkan halaman web. Ini memerlukan pemrosesan sebelum dapat disajikan.
3. Apa fungsi file astro.config.mjs
?
File astro.config.mjs
adalah file konfigurasi inti yang digunakan Astro untuk memahami cara memproses proyek kita. Ini memungkinkan kita mengatur berbagai aspek pengembangan web, seperti penggunaan plugin, penanganan rute, dan banyak lagi.
Dengan pemahaman yang baik tentang struktur direktori proyek Astro, kita akan dapat mengembangkan situs web yang efisien dan cepat menggunakan framework ini. Selamat mengembangkan proyek dengan menggunakan framework Astro!
Selanjutnya belajar apa?
Di artikel selanjutnya kita akan mulai belajar menggunakan framework astro, lalu mengenal komponen dan penggunaannya serta memahami konsep routing berbasis file di astro js. Hal ini penting mengingat Astro merupakan sebuah framework SSG(Static Site Generator) berbasis komponen.
Pelajari : π Belajar Astro JS #3: Tutorial Menggunakan Framework Astro
- StayKoding migrasi dari blogger ke astro
- Sejarah Framework Astro JS: Dari Awal Hingga Sekarang
- Mengenal Astro, Framework SSG dengan Banyak Kelebihan
- Belajar Astro JS #1: Cara Install Framework Astro JS
- Belajar Astro JS #2: Memahami Struktur Direktori Project Astro
- Belajar Astro JS #3: Tutorial Menggunakan Framework Astro JS