Mulai menggunakan Gatsby.js di Windows

Panduan untuk membantu Anda menginstal kerangka kerja web Gatsby.js dan memulai dan menjalankan di Windows.

Gatsby.js adalah kerangka kerja generator situs statis berdasarkan React.js, dibandingkan dengan penyajian server seperti Next.js. Generator situs statis menghasilkan HTML statis pada waktu build. Ini tidak memerlukan server. Next.js menghasilkan HTML pada runtime (setiap kali permintaan baru masuk), mengharuskan server dijalankan. Gatsby juga menentukan cara menangani data di aplikasi Anda (dengan GraphQL), sedangkan Next.js meninggalkan keputusan tersebut terserah Anda.

Untuk mempelajari selengkapnya tentang React dan kerangka kerja JavaScript lainnya berdasarkan React, lihat halaman Gambaran umum React.

Prasyarat

Panduan ini mengasumsikan bahwa Anda telah menyelesaikan langkah-langkah untuk menyiapkan lingkungan pengembangan Node.js Anda, termasuk:

• Instal versi terbaru Windows 10 (Versi 1903+, Build 18362+) atau Windows 11
• Instal Subsistem Windows untuk Linux (WSL), termasuk distribusi Linux (seperti Ubuntu) dan pastikan itu berjalan dalam mode WSL 2. Anda dapat memeriksanya dengan membuka PowerShell dan memasukkan: wsl -l -v
• Instal Node.js di WSL 2: Ini termasuk manajer versi, manajer paket, Visual Studio Code, dan ekstensi Pengembangan Jarak Jauh.

Sebaiknya gunakan Subsistem Windows untuk Linux saat bekerja dengan aplikasi NodeJS untuk kecepatan performa yang lebih baik, kompatibilitas panggilan sistem, dan untuk patodi saat menjalankan server Linux atau kontainer Docker.

Penting

Menginstal distribusi Linux dengan WSL akan membuat direktori untuk menyimpan file: \\wsl\Ubuntu-20.04 (mengganti Ubuntu-20.04 dengan distribusi Linux apa pun yang Anda gunakan). Untuk membuka direktori ini di Windows File Explorer, buka baris perintah WSL Anda, pilih direktori beranda Anda menggunakan cd ~, lalu masukkan perintah explorer.exe . Hati-hati untuk tidak menginstal NodeJS atau menyimpan file yang akan Anda kerjakan pada drive C yang dipasang (/mnt/c/Users/yourname$). Melakukannya akan memperlambat waktu penginstalan dan build Anda secara signifikan.

Menginstal Gatsby.js

Untuk membuat proyek Gatsby.js:

1. Buka terminal WSL Anda (yaitu. Ubuntu).

2. Buat folder proyek baru: mkdir GatsbyProjects dan masukkan direktori tersebut: cd GatsbyProjects

3. Gunakan npm untuk menginstal Gatsby CLI: npm install -g gatsby-cli. Setelah diinstal, periksa versi dengan gatsby --version.

4. Buat proyek Gatsby.js Anda: gatsby new my-gatsby-app

5. Setelah paket diinstal, ubah direktori ke folder aplikasi baru Anda, cd my-gatsby-app, lalu gunakan code . untuk membuka proyek Gatsby Anda di VISUAL Code. Ini akan memungkinkan Anda untuk melihat kerangka kerja Gatsby.js yang telah dibuat untuk aplikasi Anda menggunakan File Explorer Visual Studio Code. Perhatikan bahwa VISUAL Code membuka aplikasi Anda di lingkungan WSL-Remote (seperti yang ditunjukkan di tab hijau di kiri bawah jendela Visual Studio Code Anda). Ini berarti bahwa saat Anda menggunakan Visual Studio Code untuk pengeditan pada OS Windows, aplikasi tersebut masih berjalan di OS Linux.

   

6. Ada 3 perintah yang perlu Anda ketahui setelah Gatsby diinstal:

   • gatsby develop untuk menjalankan instans pengembangan dengan hot-reloading.
   • gatsby build untuk membuat build produksi.
   • gatsby serve untuk memulai aplikasi Anda dalam mode produksi.

   Buka terminal WSL yang terintegrasi dalam Visual Studio Code (Lihat > Terminal). Pastikan bahwa jalur terminal diarahkan ke direktori proyek Anda (yaitu). ~/GatsbyProjects/my-gatsby-app$ Kemudian coba jalankan instans pengembangan aplikasi baru Anda menggunakan: gatsby develop

7. Setelah proyek Gatsby baru Anda selesai dikompilasi, terminal Anda akan ditampilkan.You can now view gatsby-starter-default in the browser. http://localhost:8000/. Pilih tautan localhost ini untuk melihat proyek baru Anda yang dibangun di browser web.

Catatan

Anda akan melihat bahwa output terminal Anda juga memberi tahu Anda bahwa Anda dapat "Lihat GraphiQL, IDE dalam browser, untuk menjelajahi data dan skema situs Anda: http://localhost:8000/___graphql" GraphQL mengonsolidasikan API Anda ke dalam IDE yang mendokumen sendiri (GraphiQL) yang dibangun ke dalam Gatsby. Selain menjelajahi data dan skema situs Anda, Anda dapat melakukan operasi GraphQL seperti kueri, mutasi, dan langganan. Untuk informasi selengkapnya, lihat Memperkenalkan GraphiQL.

8. src/pages/index.js Buka file di editor Visual Studio Code Anda. Temukan judul <h1>Welcome to <b>Gatsby!</b></h1> halaman dan ubah menjadi <h1>Hello <b>World!</b></h1>. Dengan browser web Anda masih terbuka untuk http://localhost:8000, simpan perubahan Anda dan perhatikan fitur hot-reloading secara otomatis mengkompilasi dan memperbarui perubahan Anda di browser.

   

Anda dapat menggunakan debugger VISUAL Code dengan aplikasi Gatsby Anda dengan memilih kunci F5, atau dengan masuk ke Lihat Debug (Ctrl+Shift+D) dan Lihat > Konsol Debug (Ctrl+Shift+Y) > di bilah menu. Jika Anda memilih ikon gerigi di jendela Debug, file konfigurasi peluncuran (launch.json) akan dibuat bagi Anda untuk menyimpan detail penyiapan penelusuran kesalahan. Untuk mempelajari selengkapnya, lihat Penelusuran Kesalahan Visual Studio Code.

Untuk mempelajari selengkapnya tentang Gatsby, lihat dokumen Gatsby.js.