Express.js'de Statik Klasör Belirleme - Yazılım Mimarileri ve Tasarım Desenleri Üzerine

Express.js’de Statik Klasör Belirleme

Merhaba,

Express.js modülü üzerinden çalışma gerçekleştirilen projelerde harici dosyalara yapılan entegrasyon işlemlerinde dosyaların yolunu static belirtebilmekteyiz. Bu şekilde ilgili harici dosyaların dizinleriyle ilişkimiz kesilecek ve dosyalar otomatik olarak belirtilen dizinlerde aranacaktır.

Şimdi bu işlemi bir örnek çalışma ile temellendirelim;
Express.js'de Statik Klasör Belirleme
Projemizde görüldüğü üzere “content” klasörü altında birinde resim ve bir diğerinde style dosyalarını barındırdığımız “images” ve “styles” olmak üzere iki farklı dizinimiz mevcuttur. Şimdi bu dizindeki dosyaları kullanıp basit bir çalışma gerçekleştirelim.

html
    head
        title Example Page
        link(rel="stylesheet", href="style.css")
    body
        p
            |Hello, this is example page...
        div
            img(src="picture1.jpg", width="200px")
            br
            img(src="picture2.jpg", width="200px")

Hemen sunucumuzu oluşturup, gerekli çalışmaları yapalım.

const express = require("express");
const app = express();
app.set("view engine", "pug");
app.get("/", (request, response) => {
    response.render("index");
});
app.listen(5000, () => {
    console.log("Publication started");
});

İlgili portta tanımlanmış route’u tarayıcıdan çağırırsak eğer aşağıdaki gibi bir ekran görüntüsüyle karşılaşacağız.
Express.js'de Statik Klasör Belirleme

Görüldüğü üzere kullanılmak istenen dosyaların hiçbirine erişilemediğinden dolayı beklenen sayfayla karşılaşamamış bulunmaktayız. Bu durumun sebebi dosyaların dizinlerini belirtmediğimizden kaynaklanmaktadır.

Express ile bu dizinleri statik olarak belirleyerek harici dosyaların direkt olarak aranacakları dizinleri default değer olarak ayarlayabiliriz. Bu işlem için script dosyamızda aşağıdaki ayarı yapmamız gerekmektedir.

const express = require("express");
const app = express();
app.set("view engine", "pug");
//-------------
app.use(express.static("content/images"));
app.use(express.static("content/styles"));
//-------------
app.get("/", (request, response) => {
    response.render("index");
});
app.listen(5000, () => {
    console.log("Publication started");
});

Yukarıdaki kod bloğunda görmüş olduğunuz gibi “app.use” fonksiyonu içerisinde “express.static” fonksiyonu aracılığıyla ilgili dizinleri belirtiyoruz.
Bu işlemden sonra harici dosyaların hepsi bu statik olarak ayarlanan dizinlerde aranacaktır. Dolayısıyla tarayıcıdan ilgili porta yeniden talepte bulunduğumuzda karşımıza aşağıdaki gibi görüntü gelecektir.
Express.js'de Statik Klasör Belirleme

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.