Fatih Boy

Bir önceki makalemle girişini yaptığımız Asp.Net Core JavascriptServices’i incelemeye devam edelim. Bu makalemde Asp.Net Core JavascriptServices’in yazılım geliştiricilerin hayatını kolaylaştıran bir diğer özelliği olan otomatik güncellemelerden bahsedeceğim.

Bu makalemde de Yeoman şablonlarını kullanacağımız için giriş makalesinde paylaştığım şekilde şablonların kurulumunu yapmadıysanız şimdi tam zamanı;

npm install -g yo generator-aspnetcore-spa

Örnek projemizi koyacağımız bir klasör oluşturalım;

mkdir enterprisecoding-sample

Daha sonra bu klasör içerisinde kurulumunu az önce yaptığımız aspnetcore-spa generator’ünü çalıştıralım;

cd enterprisecoding-sample
yo aspnetcore-spa

Önceki makalemizden farklı olarak bu defa da bir React örneği üzerinden gidelim;

Framework seçimi ve proje adını verdikten sonra Yeoman generator bizim için gerekli modülleri hazırlayacaktır.

Yeoman’ın işini bitirmesi ardından aşağıdaki komutla örnek uygulamamızı çalıştırarak herşeyin yolunda gittiğini teyit edebilirsiniz;

dotnet run

Uygulamamız çalışmaya başlayacaktır. http://localhost:5000 adresinden ziyaret edebilirsiniz.

Projemizin çalıştığını da gördüğümüze göre, sıra otomatik güncellemeleri deneyimlemekte. Bunun için öncelikle uygulamamız çalışıyorsa durduralım ve geliştirme modunu ayarladıktan sonra yenin başlatalım. Geliştirme modu için yapmanız gereken ASPNETCORE_ENVIRONMENT ortam değişkenine Development değerini vermek olacak. Windows ortamında çalışıyorsanız bunu aşağıdaki komut yardımıyla komut satırından yapabilirsiniz;

set ASPNETCORE_ENVIRONMENT=Development

Eğer benim gibi Mac ya da Linux üzerinde çalışıyorsanız kullanmanız gereken komut aşağıdaki olmalı;

export ASPNETCORE_ENVIRONMENT=Development

Bu basit işlem ardından uygulamayı aşağıdaki şekilde yeniden başlatalım;

dotnet run

Uygulamamız çalışır durumda iken herhangi bir statik dosya (ts, tsx, css, html gibi) üzerinde değişiklik yapalım. Ben tercihimi ana sayfa içeriği olduğu için Home.tsx dosyasından yana kullandım;

TypeScript dosyası içerisinde yer alan string ifadeyi değiştirip saklamam ardından otomatik olarak bu kod javascript’e dönüştürüldü, javascript dosyasındaki değişiklik farkedilerek arayüz yenilendi;

Klasik süreçte bu işlem için öncelikle uygulamayı sonlandırmanız, ardından TypeScript’te javascript’e dönüşümü yapmanız, son olarak da uygulamayı yeniden başlatarak son kaldığınız duruma geri getirmeniz gerekmekteydi. Özellikle statefull bir uygulamada bu sürecin ne kadar acı vereceğini tahmin edersiniz. Dolayısıyla yukarıdaki kullanımın biz geliştiriciler için nasıl bir nimet olduğunu anlatmama gerek olmadığını düşünüyorum.

Detaylarını paylaştığım bu süreç arkaplanda giriş makalesinde de paylaştığım WebPack geliştirici orta-katmanı ve Canlı modül değişimi (Hot Module Replacement, HRM) özelliklerini kullanmakta. Şimdilik React uygulamaları için ts, tsx v.b. dosyaları desteklerken; Knockout/Angular için sadece html dosyalarını desteklemekte.