Membuat aplikasi statis dengan Gatsby

  • 2 menit

Situs web statis telah ada sejak awal adanya web. Pada intinya, situs web statis terdiri dari HTML, CSS, dan JavaScript, yang disajikan kepada pengguna. Generator Situs Statis adalah alat yang dapat mengambil alat tingkat yang lebih tinggi dan menghasilkan aset statis.

Gatsby adalah salah satu alat yang dapat kita gunakan untuk membuat situs web statis. Gatsby menggunakan React sebagai lapisan UI dan GraphQL sebagai bahasa kueri untuk mengakses data yang tersedia di dalam situs.

Gatsby dibuat tepat setelah React dan React Router, yang memungkinkan Anda mencampur bagian dinamis dan statis. Jadi meskipun ini adalah alat untuk membuat situs statis, Gatsby sepenuhnya mampu menyusun proyek React. Karena itu, Gatsby dapat mengganti pengaturan normal Anda untuk memproduksi aplikasi dengan React, asalkan Anda memiliki bagian dari aplikasi React yang ingin Anda buat statis.

Gatsby memiliki sistem plugin cerdas yang dapat membantu mengimpor data dari berbagai jenis sumber data. Sumber data dapat bervariasi dari database ke JSON ke sistem file lokal Anda. Semua data yang diimpor ini kemudian dapat dipasangkan dengan aset statis seperti HTML dan CSS untuk menghasilkan halaman statis yang ingin Anda tawarkan kepada pengguna Anda. Berkat sistem plugin, semakin banyak jenis sumber data yang didukung sebagai tim Gatsby atau komunitas menulis plugin baru.

Bagaimana Gatsby melakukan ini? Dalam fase pra-kompilasi, setiap plugin memindai sumber. Sumber dapat menjadi sistem file, database, atau, misalnya, sekumpulan file JSON. Data dibaca dan ditambahkan ke Grafik data. Grafik adalah pohon node dalam memori yang dapat Anda buat kuerinya. Kemudian, Gatsby memungkinkan Anda membuat kueri node ini saat Anda melanjutkan untuk membuat halaman statis di aplikasi.

Menginstal dan menggunakan Gatsby

Gatsby tersedia melalui paket JavaScript gatsby-cli. Anda memiliki dua cara untuk menggunakannya:

  • Penginstalan global, jalankan npm install gatsby-cli -g, ini akan menginstal gatsby yang dapat dijalankan pada mesin Anda. Anda sekarang dapat menggunakan Gatsby seperti itu di terminal Anda: gatsby <command>.
  • Gunakan npx, npx adalah alat yang memungkinkan untuk menjalankan file yang dapat dieksekusi tanpa terlebih dahulu menginstalnya di mesin. Jika Anda menggunakan cara penginstalan ini, Anda perlu mengawali panggilan Anda ke Gatsby seperti itu npx gatsby <command>.

Ketiga perintah ini akan membuat Anda mulai bekerja dengan aplikasi Gatsby baru:

  • gatsby new <project name> <optional GitHub URL>: Gunakan perintah ini untuk membuat proyek baru. Dibutuhkan nama sebagai argumen wajib dan secara opsional URL GitHub sebagai argumen kedua. Menggunakan argumen terakhir akan membuat proyek Gatsby berdasarkan proyek Gatsby yang ada di GitHub.
  • gatsby develop: Mulai server pengembangan tempat proyek Anda dapat diakses. Server pengembangan adalah server HTTP yang dapat menghosting file sehingga Anda dapat mengaksesnya dari browser. Anda akan menemukan aplikasi Gatsby Anda berjalan di http://localhost:8000. Ini juga akan memulai instans GraphQL, yang merupakan alat pengembangan grafis yang dapat Anda gunakan untuk menjelajahi data yang tersedia untuk aplikasi Anda dan membuat kueri. Anda dapat menggunakan GraphQL dengan menelusuri ke http://localhost:8000/___graphql.
  • gatsby build: Buat representasi statis aplikasi Anda yang dapat disebarkan. Semua HTML, JavaScript, dan CSS yang dihasilkan akan berakhir di sub-direktori public.

Anatomi proyek

Proyek Gatsby perancah terdiri dari lima bagian berbeda yang perlu Anda pahami untuk bekerja dengan Gatsby secara efektif dan efisien.

  • /pages: Komponen React yang ditempatkan di direktori ini akan menjadi rute dan halaman.
  • gatsby-config.js: File konfigurasi. Bagian dari konfigurasi akan digunakan untuk menyiapkan dan mengonfigurasi plugin dan bagian lainnya adalah data global yang dapat Anda render di halaman.
  • gatsby-node.js: File yang digunakan untuk menerapkan metode siklus hidup API Gatsby. Di sini Anda dapat melakukan hal-hal seperti mencari file, menambahkan/memperbarui node ke grafik Gatsby, dan bahkan memasukkan data dari luar yang seharusnya menjadi bagian dari situs web.
  • /styles: Gatsby memungkinkan Anda menerapkan gaya dalam banyak cara, semuanya mulai dari CSS, SASS, dan LESS yang diimpor hingga Modul CSS.
  • /components: Direktori yang dimaksudkan untuk komponen pembantu React seperti header, tata letak, dan lainnya.