Odak modu
Statik Dosyalarla Çalışmak
Bir web uygulaması oluştururken, bu uygulamanın iskeleti statik dosyalardır. Biz oluşturmak istediğimiz uygulamanın iskelet yapısı ile ilgili css, html, js dosyalarını ve görsellerini öncelikle göndermek isteriz.
Bir express uygulamasında statik dosyaları kullanmak için, express web çatısının express.static
gömülü middleware fonksiyonu kullanılır. Bu statik dosyaları uygulamanın kök klasörü içerisindeki public
isminde bir klasör oluşturup, statik dosyaların tamamını bu klasörün içerisine koyalım. app.js dosyasının içerisinde de aşağıdaki kodu eklememiz gerekiyor.
app.use(express.static('public'));
Yukarıda söylediğimiz birşey var, diyoruz ki express.static bir middleware fonksiyonudur, peki şunu soralım o zaman middleware nedir? Daha önce söylediğimiz gibi Node.js uygulaması temelinde bir request ve response döngüsüdür. Biz bir istekte bulunuyoruz ve buna karşılık bir cevap istiyoruz. İşte bu request - response döngüsünün içerisindeki görevi olan her fonksiyona middleware
denir. Yani herşey request ve responsun 'middle'ında ortasında yapılır.
Middleware kullanarak aşağıdaki işlemleri gerçekleştirebiliriz.
Aşağıdaki görselde klasik middleware yapısını görebilirsiniz. Gördüğünüz üzere get request de bir middlewaredir. Dikkatinizi çekecek bir diğer nokta kodumuzda next
metodu kullanmıyoruz çünkü send
ile aynı döngüyü sonlandırıyoruz '/' adresine ulaşmak için.
Şimdi kendi middleware fonksiyonumuzu oluşturalım myLogger isminde.
const myLogger = (req, res, next) => {
console.log('Middleware Log 1');
next();
}
Bu middleware'i çalıştırmak için kaydetmemiz gerekiyor.
app.use(express.static('public'));
app.use(myLogger);
uygulamamızı çalıştırdığımızda myLogger middleware kodumuzunda çalıştığını göreceksiniz.
Son olarak statik dosyalarımızı çalıştırdık, peki ilgili html dosyalarına nasıl ulaşacağız. Aslında bunun daha kolay bir yöntemini göreceğiz ileride ancak burada öncelikle path modülünü çağıralım.
const path = require('path');
sonrasında ise temp klasörü içerisindeki index.html dosyasına ulaşmak için
app.get('/', (req, res) => {
res.sendFile(path.resolve(__dirname, 'temp/index.html'));
});
kodunu kullanacağız. Uygulamamızı tekrar çalıştırdığımızda index sayfamızı başarılı bir şekilde görebiliriz.
Sektörde en çok aranan yazılım becerilerini kazan
Yapay zeka desteği, birebir mentörlük saatleri, canlı dersler ve senin için özel hazırlanmış içeriklerle eksiklerini tamamla, düzenli geri bildirimler al ve öğrenme sürecini en verimli hale getir.
Yunus Emre Kabakcı
Patika+ mezunuPatika+ Fullstack Web Development Bootcamp mezunumuz Yunus Emre,
3 ay içinde Katar’dan aldığı teklif ile, global bir şirket olan Pavo Group’da işe başladı!
“İçerik zenginliği, mentor desteği, ileriye dönük bir network sağlaması ve dünyada en çok tercih edilen frameworkler üzerinden bir eğitim veriyor olması Patika+’ı tercih etmemin temel sebepleri oldu!“
Yorum yapabilmek için derse kayıt olmalısın!