<\/div>\n

Merhaba,<\/p>\n

Express.js mod\u00fcl\u00fc \u00fczerinden \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirilen projelerde harici dosyalara yap\u0131lan entegrasyon i\u015flemlerinde dosyalar\u0131n yolunu static belirtebilmekteyiz. Bu \u015fekilde ilgili harici dosyalar\u0131n dizinleriyle ili\u015fkimiz kesilecek ve dosyalar otomatik olarak belirtilen dizinlerde aranacakt\u0131r.<\/p>\n

\u015eimdi bu i\u015flemi bir \u00f6rnek \u00e7al\u0131\u015fma ile temellendirelim;
\n $\"Express.js'de$ <\/a>
\nProjemizde g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “content” klas\u00f6r\u00fc alt\u0131nda birinde resim ve bir di\u011ferinde style dosyalar\u0131n\u0131 bar\u0131nd\u0131rd\u0131\u011f\u0131m\u0131z “images” ve “styles” olmak \u00fczere iki farkl\u0131 dizinimiz mevcuttur. \u015eimdi bu dizindeki dosyalar\u0131 kullan\u0131p basit bir \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirelim.<\/p>\n

\r\nhtml\r\n    head\r\n        title Example Page\r\n        link(rel="stylesheet", href="style.css")\r\n    body\r\n        p\r\n            |Hello, this is example page...\r\n        div\r\n            img(src="picture1.jpg", width="200px")\r\n            br\r\n            img(src="picture2.jpg", width="200px")\r\n<\/pre>\nHemen sunucumuzu olu\u015fturup, gerekli \u00e7al\u0131\u015fmalar\u0131 yapal\u0131m.<\/p>\n\r\nconst express = require("express");\r\nconst app = express();\r\napp.set("view engine", "pug");\r\napp.get("\/", (request, response) => {\r\n    response.render("index");\r\n});\r\napp.listen(5000, () => {\r\n    console.log("Publication started");\r\n});\r\n<\/pre>\n\u0130lgili portta tan\u0131mlanm\u0131\u015f route’u taray\u0131c\u0131dan \u00e7a\u011f\u0131r\u0131rsak e\u011fer a\u015fa\u011f\u0131daki gibi bir ekran g\u00f6r\u00fcnt\u00fcs\u00fcyle kar\u015f\u0131la\u015faca\u011f\u0131z.
\n<\/a><\/p>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere kullan\u0131lmak istenen dosyalar\u0131n hi\u00e7birine eri\u015filemedi\u011finden dolay\u0131 beklenen sayfayla kar\u015f\u0131la\u015famam\u0131\u015f bulunmaktay\u0131z. Bu durumun sebebi dosyalar\u0131n dizinlerini belirtmedi\u011fimizden kaynaklanmaktad\u0131r.<\/p>\n
Express ile bu dizinleri statik olarak belirleyerek harici dosyalar\u0131n direkt olarak aranacaklar\u0131 dizinleri default de\u011fer olarak ayarlayabiliriz. Bu i\u015flem i\u00e7in script dosyam\u0131zda a\u015fa\u011f\u0131daki ayar\u0131 yapmam\u0131z gerekmektedir.<\/p>\n
\r\nconst express = require("express");\r\nconst app = express();\r\napp.set("view engine", "pug");\r\n\/\/-------------\r\napp.use(express.static("content\/images"));\r\napp.use(express.static("content\/styles"));\r\n\/\/-------------\r\napp.get("\/", (request, response) => {\r\n    response.render("index");\r\n});\r\napp.listen(5000, () => {\r\n    console.log("Publication started");\r\n});\r\n<\/pre>\nYukar\u0131daki kod blo\u011funda g\u00f6rm\u00fc\u015f oldu\u011funuz gibi “app.use” fonksiyonu i\u00e7erisinde “express.static” fonksiyonu arac\u0131l\u0131\u011f\u0131yla ilgili dizinleri belirtiyoruz.
\nBu i\u015flemden sonra harici dosyalar\u0131n hepsi bu statik olarak ayarlanan dizinlerde aranacakt\u0131r. Dolay\u0131s\u0131yla taray\u0131c\u0131dan ilgili porta yeniden talepte bulundu\u011fumuzda kar\u015f\u0131m\u0131za a\u015fa\u011f\u0131daki gibi g\u00f6r\u00fcnt\u00fc gelecektir.
\n<\/a><\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Express.js mod\u00fcl\u00fc \u00fczerinden \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirilen projelerde harici dosyalara yap\u0131lan entegrasyon i\u015flemlerinde dosyalar\u0131n yolunu static belirtebilmekteyiz. Bu \u015fekilde ilgili harici dosyalar\u0131n dizinleriyle ili\u015fkimiz kesilecek ve dosyalar otomatik olarak belirtilen dizinlerde aranacakt\u0131r. \u015eimdi bu i\u015flemi...<\/p>\n","protected":false},"author":1,"featured_media":8686,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2495,2145],"tags":[2497,2514,2515],"class_list":["post-8766","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-express-js","category-node-js","tag-express-js","tag-express-js-statik-directory","tag-express-js-statik-klasor"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=8766"}],"version-history":[{"count":8,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8766\/revisions"}],"predecessor-version":[{"id":8777,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8766\/revisions\/8777"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/8686"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}