Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Express.js’de Statik Klasör Belirleme

Yazar: Gençay · 27 Temmuz 2018

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;

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.

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.