Windows'da Gatsby.js kullanmaya başlama

Gatsby.js web çerçevesini yüklemenize ve Windows'da çalışmaya başlamanıza yardımcı olacak bir kılavuz.

Gatsby.js, Next.jsgibi sunucu tarafından işlenmek yerine React.jstabanlı statik bir site oluşturucu çerçevesidir. Statik site oluşturucu, derleme zamanında statik HTML oluşturur. Sunucu gerektirmez. Next.js çalışma zamanında (her yeni istek geldiğinde) HTML oluşturur ve sunucunun çalıştırılmasını ister. Gatsby ayrıca uygulamanızdaki verilerin (GraphQL ile) nasıl işleneceğini de belirlerken, Next.js bu kararı size bırakır.

React ve React tabanlı diğer JavaScript çerçeveleri hakkında daha fazla bilgi edinmek için React'e genel bakış sayfasına bakın.

Önkoşullar

Bu kılavuzda, aşağıdakiler dahil olmak üzere Node.js geliştirme ortamınızı ayarlama adımlarını tamamladığınız varsayılır:

• Windows 10'un en son sürümünü (Sürüm 1903+, Derleme 18362+) veya Windows 11'i yükleyin
• Linux dağıtımı (Ubuntu gibi) dahil olmak üzere Linux için Windows Alt Sistemi (WSL)yükleyin ve WSL 2 modunda çalıştığından emin olun. PowerShell'i açıp şunu girerek bunu deleyebilirsiniz: wsl -l -v
• WSL 2'ye Node.js yükleme: Bu sürüm yöneticisi, paket yöneticisi, Visual Studio Code ve Uzaktan Geliştirme uzantısını içerir.

Daha iyi performans hızı, sistem çağrısı uyumluluğu ve Linux sunucuları veya Docker kapsayıcıları çalıştırırken parodi için NodeJS uygulamalarıyla çalışırken Linux için Windows Alt Sistemi'ni kullanmanızı öneririz.

Önemli

WSL ile Linux dağıtımı yüklemek, dosyaları depolamak için bir dizin oluşturur: \\wsl\Ubuntu-20.04 (kullandığınız Linux dağıtımıyla Ubuntu-20.04'ü kullanın). Bu dizini Windows Dosya Gezgini'nde açmak için WSL komut satırınızı açın, cd ~kullanarak giriş dizininizi seçin, ardından komutunu girin explorer.exe . NodeJS'yi yüklememeye veya bağlı C sürücüsünde (/mnt/c/Users/yourname$) üzerinde çalışacağınız dosyaları depolamamaya dikkat edin. Bunun yapılması yükleme ve derleme sürelerinizi önemli ölçüde yavaşlatır.

Gatsby.js yükleme

Gatsby.js projesi oluşturmak için:

1. WSL terminalinizi açın (örn. Ubuntu).

2. Yeni bir proje klasörü oluşturun: mkdir GatsbyProjects ve şu dizini girin: cd GatsbyProjects

3. Gatsby CLI'sini yüklemek için npm kullanın: npm install -g gatsby-cli. Yüklendikten sonra gatsby --versionile sürümü denetleyin.

4. Gatsby.js projenizi oluşturma: gatsby new my-gatsby-app

5. Paket yüklendikten sonra, dizinleri yeni uygulama klasörünüzde (cd my-gatsby-app) değiştirin ve gatsby projenizi VS Code'da açmak için code . kullanın. Bu, VS Code'un Dosya Gezgini kullanılarak uygulamanız için oluşturulan Gatsby.js çerçevesine bakmanıza olanak tanır. VS Code'un uygulamanızı WSL-Remote bir ortamda açtığına dikkat edin (VS Code pencerenizin sol alt kısmındaki yeşil sekmede belirtildiği gibi). Bu, Windows işletim sisteminde düzenlemek için VS Code kullanırken uygulamanızın Linux işletim sisteminde çalışmaya devam ettiğini gösterir.

   

6. Gatsby yüklendikten sonra bilmeniz gereken 3 komut vardır:

   • Geliştirme ortamını anlık yenileme ile çalıştırmak için gatsby develop.
   • Üretim yapısı oluşturmak için gatsby build.
   • Uygulamanızı üretim modunda başlatmak için gatsby serve.

   VS Code'da tümleşik WSL terminalini açın (View > Terminal). Terminal yolunun proje dizininize (~/GatsbyProjects/my-gatsby-app$) işaretlendiğinden emin olun. Ardından şunu kullanarak yeni uygulamanızın geliştirme örneğini çalıştırmayı deneyin: gatsby develop

7. Yeni Gatsby projenizin derlenmesi tamamlandıktan sonra terminaliniz görüntülenir..You can now view gatsby-starter-default in the browser. http://localhost:8000/. Web tarayıcısında oluşturulan yeni projenizi görüntülemek için bu localhost bağlantısını seçin.

Uyarı

Terminal çıktınızın ayrıca size, "Sitenizin verilerini ve şemasını keşfetmek için tarayıcıda çalışan bir IDE olan GraphiQL'i görüntüleyin: http://localhost:8000/___graphql" seçeneğini de bildirdiğini fark edeceksiniz. GraphQL, API'lerinizi Gatsby içinde yerleşik olarak kendi kendini belgeleyen bir IDE (GraphiQL) içinde konsolide eder. Sitenizin verilerini ve şemasını keşfetmeye ek olarak sorgular, mutasyonlar ve abonelikler gibi GraphQL işlemleri gerçekleştirebilirsiniz. Daha fazla bilgi için bkz. GraphiQL tanıtımı.

8. src/pages/index.js dosyasını VS Code düzenleyicinizde açın. <h1>Welcome to <b>Gatsby!</b></h1> sayfa başlığını bulun ve <h1>Hello <b>World!</b></h1>olarak değiştirin. Web tarayıcınızda http://localhost:8000 hala açıkken, değişikliğinizi kaydedin ve hot-reloading özelliğinin tarayıcınızda otomatik olarak değişikliğinizi derleyip güncelleştirdiğini fark edin.

   üzerinde çalışıyor Gatsby.js

F5 tuşunu seçerek veya menü çubuğunda Hata Ayıklamayı Görüntüle (Ctrl+Shift+D) ve Hata Ayıklama Konsolunu Görüntüle >> (Ctrl+Shift+Y) seçeneğine giderek VS Code'un hata ayıklayıcısını Gatsby uygulamanızla kullanabilirsiniz. Hata ayıklama penceresinde dişli simgesini seçerseniz, hata ayıklama kurulum ayrıntılarını kaydetmeniz için bir başlatma yapılandırması (launch.json) dosyası oluşturulur. Daha fazla bilgi edinmek için bkz. VS Code Debug Etme.

Gatsby hakkında daha fazla bilgi edinmek için bkz. Gatsby.js belgeleri.