Serving static files in Express

<!DOCTYPE html>  <html lang="en" prefix="og: http://ogp.me/ns#"> <head> <title>Serving static files in Express</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/png" href="/images/favicon.png" /> <script data-cfasync="false" src="/js/theme.js"></script> <link rel="stylesheet" href="/css/dark-theme.css?_=1732805297"> <link rel="stylesheet" href="/css/style.css?_=1732805297"> <link rel="stylesheet" href="/css/prism.css"> <link rel="stylesheet" href="/css/font-awesome.min.css"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin,latin-ext"> <link rel="stylesheet" href="/css/en.css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="description" content="Understand how to serve static files like images, CSS, and JavaScript in Express.js applications using the built-in 'static' middleware."> <meta property="og:url" content="https://expressjs.com/en/starter/static-files.html"> <meta property="og:type" content="website" > <meta name="title" property="og:title" content="Serving static files in Express"> <meta property="og:description" content="Understand how to serve static files like images, CSS, and JavaScript in Express.js applications using the built-in 'static' middleware."> <meta property="og:image" content="https://expressjs.com/images/og.png" > <meta name="twitter:card" content="summary_large_image"> <meta property="twitter:domain" content="expressjs.com"> <meta property="twitter:url" content="https://expressjs.com/en/starter/static-files.html"> <meta name="twitter:title" content="Serving static files in Express"> <meta name="twitter:description" content="Understand how to serve static files like images, CSS, and JavaScript in Express.js applications using the built-in 'static' middleware."> <meta property="twitter:image" content="https://expressjs.com/images/og.png" > <script data-cfasync="false" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script data-cfasync="false" src="/js/ismobile.js"></script> <script data-cfasync="false" src="/js/app.js"></script> <script data-cfasync="false" defer src="/js/menu.js"></script> <script data-cfasync="false" src="/js/retina.js"></script> <script data-cfasync="false" src="/js/prism.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" /> </head> <body class="en-doc"> <section class="page content"> <header> <div id="mobile-menu"> <div id="nav-button" class="fa fa-bars fa-2x button"></div> </div> <section id="logo"><a href="/" class="express">Express</a> </section> <div id="navbar"> <input id="q" placeholder="馃攷 search"> <ul id="navmenu"> <li><a href="/" id="home-menu">Home</a></li> <li id="getting-started-menu" class="submenu"> <a href="/en/starter/installing.html" class="active">Getting started</a> <ul class="submenu-content"> <li> <a href="/en/starter/installing.html"> Installing </a> </li> <li> <a href="/en/starter/hello-world.html"> Hello world </a> </li> <li> <a href="/en/starter/generator.html"> Express generator </a> </li> <li> <a href="/en/starter/basic-routing.html"> Basic routing </a> </li> <li> <a href="/en/starter/static-files.html"> Static files </a> </li> <li> <a href="/en/starter/examples.html"> More examples </a> </li> <li> <a href="/en/starter/faq.html"> FAQ </a> </li> </ul> </li> <li id="guide-menu" class="submenu"> <a href="/en/guide/routing.html">Guide</a> <ul class="submenu-content"> <li><a href="/en/guide/routing.html">Routing</a> </li> <li><a href="/en/guide/writing-middleware.html">Writing middleware</a> </li> <li><a href="/en/guide/using-middleware.html">Using middleware</a> </li> <li><a href="/en/guide/overriding-express-api.html">Overriding the Express API</a> </li> <li><a href="/en/guide/using-template-engines.html">Using template engines</a> </li> <li><a href="/en/guide/error-handling.html">Error handling</a> </li> <li><a href="/en/guide/debugging.html">Debugging</a> </li> <li><a href="/en/guide/behind-proxies.html">Express behind proxies</a> </li> <li><a href="/en/guide/migrating-4.html">Moving to Express 4</a> </li> <li><a href="/en/guide/migrating-5.html">Moving to Express 5</a> </li> <li><a href="/en/guide/database-integration.html">Database integration</a> </li> </ul> </li> <li id="application-menu" class="submenu"> <a href="/en/5x/api.html">API reference</a> <ul class="submenu-content"> <li><a href="/en/5x/api.html">5.x</a> </li> <li><a href="/en/4x/api.html">4.x</a> </li> <li><a href="/en/3x/api.html">3.x (deprecated)</a> </li> <li><a href="/2x/">2.x (deprecated)</a> </li> </ul> </li> <li id="advanced-topics-menu" class="submenu"> <a href="/en/advanced/developing-template-engines.html">Advanced topics</a> <ul class="submenu-content"> <li><a href="/en/advanced/developing-template-engines.html">Building template engines</a> </li> <li><a href="/en/advanced/security-updates.html">Security updates</a> </li> <li><a href="/en/advanced/best-practice-security.html">Security best practices</a> </li> <li><a href="/en/advanced/best-practice-performance.html">Performance best practices</a> </li> <li><a href="/en/advanced/healthcheck-graceful-shutdown.html">Health checks & shutdown</a> </li> </ul> </li> <li id="resources-menu" class="submenu"> <a href="/en/resources/glossary.html">Resources</a> <ul class="submenu-content"> <li> <a href="/en/resources/community.html">Community</a> </li> <li> <a href="/en/resources/glossary.html">Glossary</a> </li> <li> <a href="/en/resources/middleware.html">Middleware</a> </li> <li> <a href="/en/resources/utils.html">Utility modules</a> </li> <li> <a href="/en/resources/contributing.html">Contributing to Express</a> </li> <li> <a href="/en/changelog/4x.html">Release Change Log</a> </li> </ul> </li> <li><a href="/en/support" id="support-menu">Support</a></li> <li id="blog-menu" class="submenu"> <a href="/2024/10/22/security-audit-milestone-achievement.html">Blog</a> <ul class="submenu-content"> <li> <a href="/2024/10/22/security-audit-milestone-achievement.html">Latest post</a> </li> <li> <a href="/en/blog/posts.html">All posts</a> </li> <li> <a href="/en/blog/write-post.html">Write a Post</a> </li> </ul> </li> </ul> </div> <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode"> <i class="fa fa-moon-o fa-2x hidden-dark"></i> <span class="sun-icon hidden-light"></span> </div> </header> <div id="overlay"></div> <div id="page-doc" markdown="1"> <h1 id="serving-static-files-in-express">Serving static files in Express</h1> <p>To serve static files such as images, CSS files, and JavaScript files, use the <code>express.static</code> built-in middleware function in Express.</p> <p>The function signature is:</p> <pre><code class="language-js">express.static(root, [options]) </code></pre> <p>The <code>root</code> argument specifies the root directory from which to serve static assets. For more information on the <code>options</code> argument, see <a href="/en/4x/api.html#express.static">express.static</a>.</p> <p>For example, use the following code to serve images, CSS files, and JavaScript files in a directory named <code>public</code>:</p> <pre><code class="language-js">app.use(express.static('public')) </code></pre> <p>Now, you can load the files that are in the <code>public</code> directory:</p> <pre><code class="language-plain-text">http://localhost:3000/images/kitten.jpg http://localhost:3000/css/style.css http://localhost:3000/js/app.js http://localhost:3000/images/bg.png http://localhost:3000/hello.html </code></pre> <div class="doc-box doc-info"> Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL. </div> <p>To use multiple static assets directories, call the <code>express.static</code> middleware function multiple times:</p> <pre><code class="language-js">app.use(express.static('public')) app.use(express.static('files')) </code></pre> <p>Express looks up the files in the order in which you set the static directories with the <code>express.static</code> middleware function.</p> <div class="doc-box doc-info"> <p class="doc-info-title"><i class="fa fa-lg fa-info-circle"></i> Note</p> <p>For best results, <a href="/en/advanced/best-practice-performance.html#use-a-reverse-proxy">use a reverse proxy</a> cache to improve performance of serving static assets.</p> </div> <p>To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the <code>express.static</code> function, <a href="/en/4x/api.html#app.use">specify a mount path</a> for the static directory, as shown below:</p> <pre><code class="language-js">app.use('/static', express.static('public')) </code></pre> <p>Now, you can load the files that are in the <code>public</code> directory from the <code>/static</code> path prefix.</p> <pre><code class="language-plain-text">http://localhost:3000/static/images/kitten.jpg http://localhost:3000/static/css/style.css http://localhost:3000/static/js/app.js http://localhost:3000/static/images/bg.png http://localhost:3000/static/hello.html </code></pre> <p>However, the path that you provide to the <code>express.static</code> function is relative to the directory from where you launch your <code>node</code> process. If you run the express app from another directory, it鈥檚 safer to use the absolute path of the directory that you want to serve:</p> <pre><code class="language-js">const path = require('path') app.use('/static', express.static(path.join(__dirname, 'public'))) </code></pre> <p>For more details about the <code>serve-static</code> function and its options, see <a href="/resources/middleware/serve-static.html">serve-static</a>.</p> <h3 id="previous-basic-routing-next-more-examples-"><a href="/en/starter/basic-routing.html">Previous: Basic Routing </a>聽聽聽聽<a href="/en/starter/examples.html">Next: More examples </a></h3> </div> </section> <a id="top" href="#"><img src="/images/arrow.png"></a> <footer> <section id="doc-langs"> Documentation translations provided by StrongLoop/IBM: <a href="/fr/">French</a>, <a href="/de/">German</a>, <a href="/es/">Spanish</a>, <a href="/it/">Italian</a>, <a href="/ja/">Japanese</a>, <a href="/ru/">Russian</a>, <a href="/zh-cn/">Chinese</a>, <a href="/zh-tw/">Traditional Chinese</a>, <a href="/ko/">Korean</a>, <a href="/pt-br/">Portuguese</a>. <br> Community translation available for: <a href="/sk/">Slovak</a>, <a href="/uk/">Ukrainian</a>, <a href="/uz/">Uzbek</a>, <a href="/tr/">Turkish</a>, <a href="/th/">Thai</a> and <a href="/id/">Indonesian</a>. </section> <section id="footer-content"> <div id="footer-copyright"> <a href="https://openjsf.org/"> <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-dark"/> <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-white.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-light"/> </a> <div id="footer-policy"> <a href="https://terms-of-use.openjsf.org">Terms of Use</a> <a href="https://privacy-policy.openjsf.org">Privacy Policy</a> <a id="coc" href="https://github.com/expressjs/express/blob/master/Code-Of-Conduct.md">Code of Conduct</a> <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> <a id="security" href="https://github.com/expressjs/express/security/policy">Security Policy</a> <a id="license" href="https://github.com/expressjs/express/blob/master/LICENSE">License</a> </div> </div> <div id="footer-links"> <div class="footer-social"> <div> <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub"> <span class="hidden-dark"> <svg viewBox="0 0 256 250" width="20" height="20" fill="#24292f" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" > <path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" /> </svg> </span> <span class="hidden-light"> <svg viewBox="0 0 256 250" width="20" height="20" fill="#fff" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" > <path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" /> </svg> </span> </a> </div> <div> <a href="https://www.youtube.com/channel/UCYjxjAeH6TRik9Iwy5nXw7g" aria-label="Go to the repository on Youtube"><svg viewBox="0 0 256 180" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z" fill="red"/><path fill="#FFF" d="m102.421 128.06 66.328-38.418-66.328-38.418z"/></svg></a> </div> <div> <a href="https://x.com/UseExpressJS" aria-label="Go to the repository on X"> <span class="hidden-dark"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 1200 1227"><path fill="#000" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/></svg> </span> <span class="hidden-light"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 1200 1227"><path fill="#fff" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/></svg> </span> </a> </div> <div> <a href="https://openjs-foundation.slack.com/archives/C02QB1731FH" aria-label="Go to the repository on Slack"><svg viewBox="0 0 2447.6 2452.5" xmlns="http://www.w3.org/2000/svg" width="20" height="20" > <g clip-rule="evenodd" fill-rule="evenodd"> <path d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z" fill="#36c5f0" /> <path d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z" fill="#2eb67d" /> <path d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z" fill="#ecb22e" /> <path d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0" fill="#e01e5a" /> </g> </svg> </a> </div> <div> <a href="https://opencollective.com/express" aria-label="Go to the repository on Open Collective"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 64 64" fill-rule="evenodd"><path d="M52.402 31.916c0 4.03-1.17 7.895-3.178 11.087l8.196 8.23c4.014-5.375 6.523-12.094 6.523-19.318s-2.51-13.942-6.523-19.318l-8.196 8.23c2.007 3.192 3.178 6.887 3.178 11.087z" fill="#b8d3f4"/><path d="M32.004 52.41c-11.207 0-20.406-9.24-20.406-20.493s9.2-20.493 20.406-20.493c4.182 0 7.86 1.176 11.04 3.36l8.196-8.23C45.887 2.52 39.197 0 32.004 0 14.44 0 .057 14.278.057 32.084S14.44 64 32.004 64c7.36 0 14.05-2.52 19.403-6.55l-8.196-8.23c-3.178 2.016-7.025 3.192-11.207 3.192z" fill="#3385ff"/></svg></a> </div> </div> <a href="https://www.netlify.com"> <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Preview Deploys by Netlify" width="80" /> </a> </div> </section> </footer> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" onload="docsearch({ apiKey: '7164e33055faa6ecddefd9e08fc59f5d', indexName: 'expressjs', inputSelector: '#q', algoliaOptions: { 'facetFilters': ['lang:en'] } })" async></script> </body> </html>

CINXE.COM

Serving static files in Express