Angular 4 – Oluşturulan Projeyi Visual Studio Code İle Açmak ve Yayına Almak

Merhaba,

Önceki Angular 4 İçin Yeni Bir Proje Oluşturmak başlıklı makalemizde Angular CLI ile bir Angular 4 projesi oluşturmuştuk. Şimdi ise oluşturduğumuz bu projeyi Visual Studio Code ortamına aktarmayı ve yapılan işlevleri canlı bir şekilde izleyebilmek için yayına almayı inceliyor olacağız.

Makale serimizde genellikle bir önceki makalede oluşturulan ya da ele alınan yapı bir sonrakinde de kullanılacağı için yapılara yapılan atıflar makaleler arasındaki bağımlılığı gerektirmektedir. O yüzden seriyi en başından seyretmeniz gerekebilir. Demek istediğim o ki, makaleler arası devam niteliğinde bir ilişki olacağından dolayı bazı yapılar önceki makalelerde oluşturulup sonraki makalelerin senaryolarında kullanılıyor olabilir. Bu bilinçle seriyi komple bir bütün olarak algılayınız.

Neyse biz konumuza dönelim.

Bir önceki makalede “OrnekProje” isminde bir Angular 4 projesi oluşturmuştuk. “Başlat” -> “Komut İstemi” kombinasyonuyla komut penceresine gelerek “OrnekProje” isimli klasöre “cd” komutu ile locate oluyoruz.

Angular 4 projemizin bulunduğu klasöre locate olmamızın sebebi, bu klasördeki proje dosyalarını Visual Studio Code editörü üzerinde açmak istememizdir. Ve bu işlemi gerçekleştirmek için öncelikli şartımız ilgili klasöre locate olmamızdır.

Locate işleminden sonra ilgili dizinde aşağıdaki komutu yazarak projeyi komple Visual Studio Code ortamına taşımış olursunuz.

code .

İlgili komutu çalıştırdıktan sonra direkt olarak Visual Studio Code editörü proje dosyalarını entegre bir şekilde karşımıza gelecektir.

Evet… Şimdi projemizi Visual Studio Code ortamına aktarmış olduk. Bu noktadan sonra proje üzerinde yapısal çalışmaları ele alıp adım adım gelişmeye başlayacağız lakin ben genede “şuana kadar ne yaptık?” sorusuna istinaden projemizin neye benzediğini görmek adına uygulamayı yayına almayıda ele alacağım.

Bir projeyi yayına almak için komut penceresinde aşağıdaki komutları çalıştırmamız gerekmektedir.

ng serve

Eğer ki bu şekilde kodu çalıştırırsak uygulama varsayılan olarak “localhost” üzerinden “4200” portunda yayına geçecektir.

Tabi yayın başladıktan sonra herhangi bir tarayıcıda site otomatik açılmayacaktır. Gidip manuel bir şekilde bir tarayıcı üzerinden “localhost:4200” adresini tetiklediğimiz zaman projemiz ilk temel/varsayılan şablonuyla aşağıdaki gibi bizi karşılayacaktır.

“Yaa! amaAa olmaz hoca! ben yayını başlattığım zaman otomatik tarayıcıda da projeyi görmek istiyorum!” diyorsanız eğer kodu aşağıdaki gibi yazmanız yeterli olacaktır.

ng serve --o
ya da
ng serve --open

Bu şekilde kodu belirttiğiniz zaman proje “localhost”un “4200” varsayılan portu üzerinde yayınlanacaktır ve otomatik olarak bir tarayıcıda projeyi açacaktır.

Yok eğer “4200” varsayılan port numarasını değiştirmek istiyorsanız aşağıdaki gibi müdahalede bulunabilirsiniz.

ng server --port 1453

Eğer ki yukarıdaki kodu çalıştırırsanız projemiz “localhost” üzerinde “1453” portunda çalıştırılacaktır.

ng server --port 1453 --open

Bu kodumuz ise benzer mantıkla projeyi “localhost” üzerinde “1453” portunda çalıştıracak ve projeyi otomatik tarayıcıda açacaktır.

Evet…

Angular 4 projemizi yayına nasıl alındığını görmüş olduk. Yayına alınan proje üzerinde yapılan tüm çalışmalar manuel yenileme yapmadan tarayıcı üzerinde anlık olarak güncellenmektedir. Bu sayede yapılan tüm işlemleri net bir şekilde takip edebileceğiz. Tabi bu nimetlerden ileride faydalandığımızı net bir şekilde göreceksiniz.

Bir sonraki makalemizde oluşturmuş olduğumuz Angular 4 proje dosyalarını tek tek ele alıp neyin ne işe yaradığından bahsedeceğiz.

O halde görüşmek üzere diyelim 🙂
İyi çalışmalar…