Alıştırma - Kullanmaya başlama

Tamamlandı

Azure Statik Web Uygulamaları, uygulamaları bir GitHub deposundan derleyerek web sitelerini bir üretim ortamında yayımlar. Bu alıştırmada, bir GitHub deposunda bulunan tercih ettiğiniz ön uç çerçevesini kullanarak bir web uygulaması derlemeyi öğreneceksiniz.

Depo oluşturma

Bu modül, GitHub şablon deposunu kullanarak yeni bir depo oluşturmanızı kolaylaştırır. Her biri farklı bir ön uç çerçevesiyle oluşturulmuş bir başlangıç uygulaması içeren bir şablon dizisi sunulur.

1. Şablon deposunun şablondan oluştur sayfasına gidin. 404: Sayfa Bulunamadı hatası alırsanız GitHub'da oturum açın ve yeniden deneyin.

2. GitHub hesaplarınızdan birini Sahip açılır listesinden seçin.

3. Deponuza my-static-web-app adını verin.

4. Depo oluştur düğmesini seçin.

Uygulamanızı çalıştırma

GitHub hesabınızda my-static-web-app adlı bir GitHub deposu oluşturdunuz. Sonraki adımda depoyu klonlayıp kodu bilgisayarınızda yerel olarak çalıştırmayı öğreneceksiniz.

1. Bilgisayarınızda bir terminali açın.

2. Başlangıç olarak GitHub deposunu bilgisayarınızdaki istenen dizine kopyalayın.

   git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app
   

3. Kaynak kodunuzun klasörüne gidin.

   cd my-static-web-app
   

4. Ardından, aşağıda gösterildiği gibi tercih ettiğiniz ön uç çerçevesinin klasörüne gidin.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

5. Uygulama bağımlılıklarını yükleyin.

   npm install
   

   Not

   PATH bulunamıyor hatası alırsanız, Node.js'ı https://nodejs.org yüklediğinizden emin olun. PATH'e Ekle seçeneğini içeren özelleştirilmiş bir kurulum yapmanız gerekebilir.

   

6. Son olarak, ön uç istemci uygulamasını çalıştırın.

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

Uygulamanıza gitme

Artık uygulamanızın yerel olarak çalıştığını görebilirsiniz. Her ön uç uygulaması farklı bir bağlantı noktasında çalışır.

Uygulamanıza gitmek için bağlantıyı seçin.

http://localhost:4200 adresine göz atın.

http://localhost:3000 adresine göz atın.

http://localhost:5000 adresine göz atın.

http://localhost:8080 adresine göz atın.

Not

Bu modülün alıştırmalarında API olmadan bir uygulama dağıtacaksınız. Uygulamanızın yanı sıra bir API dağıtabileceğiniz sonraki modül hakkında bilgi için bu modülün sonundaki Sonraki adımlar bölümüne bakın.

Şimdi terminalde Ctrl-C tuşlarına basarak çalışan uygulamanızı durdurun.

Sonraki adımlar

Uygulamanızı oluşturdunuz ve şimdi tarayıcınızda yerel olarak çalışıyor.

Sonraki bölümde uygulamanızı Azure App Service’te yayımlamayı öğreneceksiniz.