{"id":72703,"date":"2020-01-14T17:12:02","date_gmt":"2020-01-14T11:42:02","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=72703"},"modified":"2024-04-12T14:23:00","modified_gmt":"2024-04-12T08:53:00","slug":"serving-static-files","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/","title":{"rendered":"Serving Static Files"},"content":{"rendered":"<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">\u00a0<\/span><span lang=\"EN-US\">The function signature is: express.static(root, [options])<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">\u00a0<\/span><span lang=\"EN-US\">The root argument specifies the root directory from which to serve static assets. For example, use the following code to serve images, CSS files, and JavaScript files in a directory named public:<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">app.use(express.static(&#8216;public&#8217;))<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">\u00a0<\/span><span lang=\"EN-US\">Now, you can load the files that are in the public directory:<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">http:\/\/localhost:3000\/images\/kitten.jpg<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">http:\/\/localhost:3000\/css\/style.css<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">http:\/\/localhost:3000\/js\/app.js<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">http:\/\/localhost:3000\/images\/bg.png<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">http:\/\/localhost:3000\/hello.html<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">\u00a0<\/span><span lang=\"EN-US\">Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL. To use multiple static assets directories, call the express.static middleware function multiple times:<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">\u00a0<\/span><span lang=\"EN-US\">app.use(express.static(&#8216;public&#8217;))<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">app.use(express.static(&#8216;files&#8217;))<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">\u00a0<\/span><span lang=\"EN-US\">Express looks up the files in the order in which you set the static directories with the express.static middleware function. For best results, use a reverse proxy cache to improve performance of serving static assets.<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">\u00a0<\/span><span lang=\"EN-US\">To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static function, specify a mount path for the static directory, as shown below:<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">\u00a0<\/span><span lang=\"EN-US\">app.use(&#8216;\/static&#8217;, express.static(&#8216;public&#8217;))<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">\u00a0<\/span><span lang=\"EN-US\">Now, you can load the files that are in the public directory from the \/static path prefix.<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">http:\/\/localhost:3000\/static\/images\/kitten.jpg<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">http:\/\/localhost:3000\/static\/css\/style.css<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">http:\/\/localhost:3000\/static\/js\/app.js<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">http:\/\/localhost:3000\/static\/images\/bg.png<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">http:\/\/localhost:3000\/static\/hello.html<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">\u00a0<\/span><span lang=\"EN-US\">However, the path that you provide to the express.static function is relative to the directory from where you launch your node process. If you run the express app from another directory, it\u2019s safer to use the absolute path of the directory that you want to serve:<\/span><\/p>\n<p class=\"VSKILLbodytext\"><span lang=\"EN-US\">\u00a0<\/span><span lang=\"EN-US\">app.use(&#8216;\/static&#8217;, express.static(path.join(__dirname, &#8216;public&#8217;)))<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express. \u00a0The function signature is: express.static(root, [options]) \u00a0The root argument specifies the root directory from which to serve static assets. For example, use the following code to serve images, CSS files, and JavaScript files in a&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8453],"tags":[8492],"class_list":["post-72703","page","type-page","status-publish","hentry","category-node-js","tag-serving-static-files"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Serving Static Files - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Serving Static Files - Tutorial\" \/>\n<meta property=\"og:description\" content=\"To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express. \u00a0The function signature is: express.static(root, [options]) \u00a0The root argument specifies the root directory from which to serve static assets. For example, use the following code to serve images, CSS files, and JavaScript files in a...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:00+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/\",\"name\":\"Serving Static Files - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-14T11:42:02+00:00\",\"dateModified\":\"2024-04-12T08:53:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Serving Static Files\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Serving Static Files - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/","og_locale":"en_US","og_type":"article","og_title":"Serving Static Files - Tutorial","og_description":"To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express. \u00a0The function signature is: express.static(root, [options]) \u00a0The root argument specifies the root directory from which to serve static assets. For example, use the following code to serve images, CSS files, and JavaScript files in a...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:00+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/","name":"Serving Static Files - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-14T11:42:02+00:00","dateModified":"2024-04-12T08:53:00+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/serving-static-files\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Serving Static Files"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/72703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=72703"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/72703\/revisions"}],"predecessor-version":[{"id":73216,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/72703\/revisions\/73216"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=72703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=72703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=72703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}