Merhaba,

Firebase Hosting ücretsiz planı kullanarak Angular projenizi canlıda test edebilirsiniz, yayınlayabilirsiniz. Şimdi bunu adım adım anlatacağım. Ancak bu adımlar içerisinde Angular projesi oluşturma, component, servis oluşturma vb. işlemlere yer vermeyeceğim. Sadece Firebase Hosting'e deploy etme işlemini göstereceğim;


Adım 1;

https://console.firebase.google.com adresine girin ve gmail hesabınız ile giriş yapın.


Adım 2;

Firebase projeleriniz bölümünden "Proje ekle" butonuna tıklayın ve gelen ekrandan Proje Adını yazarak Devam butonuna tıklayın.


Adım 3;

Gelen ekranda, eğer projeniz için Google Analytics'i kullanacaksanız etkinleştirebilirsiniz. Eğer etkinleştirecekseniz bir sonraki adımda Google Analytics hesabını seçeceksiniz.


Adım 4;

Proje Oluştur butonuna tıklayın ve işlemlerin tamamlanmasını bekleyin. İşlemler tamamlandıktan sonra Devam butonuna tıklayın. Şimdi oluşturduğunuz projenin paneline yönlendirileceksiniz.


Adım 5;

Sol menüden Geliştirme'nin altındaki Hosting bağlantısına tıklayın. Gelen ekrandan Başla butonuna tıklayın. Burada, projemizi Firebase Hosting'e nasıl deploy edebiliriz bununla ilgili bilgi veriyor.


Kalan işlerimiz terminal üzerinden yapılacak.


Adım 6;

Terminal'i açın ve şu komutu çalıştırın;

npm install -g firebase-tools

Eğer macOs işletim sistemi kullanıyorsanız ve permission denied şeklinde bir hata alıyorsanız komutun başına sudo yazın. Yani şu şekilde çalıştırın;

sudo npm install -g firebase-tools


Kurulum tamamlandıysa diğer adıma geçelim.


Adım 7;

Şimdi terminalde proje dizinine gelin ve aşağıdaki komutu çalıştırın;

firebase login


Allow Firebase to collect CLI usage and error reporting information? (Y/n) şeklinde gelen mesajda hata raporlama bilgilerini toplamasına izin verilsin mi? diyor. İsterseniz Y isterseniz n yazarak enter'a basabilirsiniz.


Şimdi tarayıcınızda firebase projesini oluşturduğunuz google hesabında oturum açmanız gerekecek beya mevcut açık oturumlardan firebase projesini oluşturduğunuz google hesabınızı seçin. Sonrasında Firebase CLI'ın hesabınıza erişimine izin verin.


Bu işlemden sonra Firebase CLI Login Successful mesajını gördüyseniz bu sekmeyi kapatabilir ve terminale geri dönebilirsiniz. Aynı mesajı orada da göreceksiniz.


Adım 8;

Yine proje dizininizde şu komutu çalıştırın;

firebase init


  • Which Firebase CLI features do you want to set up for this folder?
  • Hosting'in üzerine gelip space (boşluk) tuşuna basarak işaretleyin ve Enter'a basın.
  • Please select an option?
  • Use an existing project'in üzerine gelin ve Enter'a basın. (Burada Create a new project diyerekte ilk adımlarda Firebase console içerisinde yaptığımız işlemleri yapabilirdik.)
  • Firebase'te tanımlı projeleriniz burada listelenecek. Listeden oluşturduğumuz projenin üzerine gelip Enter'a basın.
  • What do you want to use as your public directory?
  • Burada, angular.json dosyası içinde outputPath'i bulun ve bunun değerini yazacağız. Yüksek ihtimalle dist/projeAdi şeklindedir yazın ve Enter'a basın.
  • Configure as a single-page app (rewrite all urls to /index.html)?
  • y yazıp Enter'a basıyoruz.


Evet işlemlerimiz bu kadar. Şimdi projemizi build edip Firebase Hosting'e deploy edelim.


Adım 9;

Projemizi build edelim;

ng build --prod


Adım 10;

Projemizi Firebase Hosting'e deploy edelim;

firebase deploy


Deploy complete! mesajını gördüysek projemiz başarıyla Firebase Hosting üzerinde yayına geçmiş demektir.


Hosting URL kısmında yazan url projemizin yayında olduğu url oluyor. Onu kopyalayın ve tarayıcınızda açın.


Bu kadar.


Eğer kendi domaininizde yayınlamak isterseniz Firebase Console'da Hosting sayfasında alanlar bölümünde Özel alan ekle butonuna tıklayarak gerekli doğrulamaları yaparak kendi domaininizde de yayınlayabilirsiniz.


Burada bitirelim yazıyı, umarım faydalı olur.