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.

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 direktori public 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 direktori pages 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