﻿ Angular 4 - Oluşturulan Projeyi Visual Studio Code İle Açmak ve Yayına Almak - Yazılım Mimarileri ve Tasarım Desenleri Üzerine
Ö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.
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.
İ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.
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.
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.
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 🙂
Etiketler: Angular 4Angular 4 Visual Studio CodeAngular 4 Yayına Almak
[…] Angular 4 – Oluşturulan Projeyi Visual Studio Code İle Açmak ve Yayına Almak […]
Angular 4 – Proje Dosyalarını Tanıyalım | Yazılım Mimarileri ve Tasarım Desenleri Üzerine
[…] Önceki makalemizde Angular 4 projesi oluşturmuş ve bu projeyi Visual Studio Code ortamına taşımış ve hatta yayına almıştık. Şimdi ise Angular 4 nimetlerine giriş yapmadan önce oluşturmuş olduğumuz bu projenin dosya ve klasörüleri üzerine ne nedir? ne değildir? maksadıyla genel bir bakış sergileyeceğiz. En nihayetinde bu şekilde Angular 4’ün çalıştığı fiziksel yapıları tanıyarak dolaylı yoldan Angular 4 yapısını zihnimizde oturtmaya başlayacağız. […]
Sonraki yazı Angular 4 – Proje Dosyalarını Tanıyalım
Önceki yazı Angular 4 İçin Yeni Bir Proje Oluşturmak