freeCodeCamp/curriculum/challenges/english/blocks/lecture-understanding-routing-in-express-js/69a9184df26779d958824552.md

id, title, challengeType, dashedName

id	title	challengeType	dashedName
69a9184df26779d958824552	How Can You Serve Static Files in Express?	19	how-can-you-serve-static-files-in-express

--description--

Serving static files is a common requirement in web applications. Static files include assets like images, CSS files, client-side JavaScript, fonts, and other resources that do not change dynamically.

Express makes serving these files simple with its built-in express.static() middleware.

In Express, static file serving means delivering files directly from the server’s file system to the client’s browser without any additional server-side processing.

For example, when a browser requests files like /styles.css, /script.js, or /images/logo.png, Express can locate those files in a specified folder and serve them directly. If a file isn't found, then Express will respond automatically with a 404. Since these files don’t need to be generated or modified on the server, they are called static.

This makes serving assets like stylesheets and images easy, and removes the need to manually define routes for each file.

Here’s how you can set up static file serving in Express:

const express = require("express");
const path = require("path");
const app = express();
const port = 3000;

// Serve static files from the "public" directory
app.use(express.static(path.join(__dirname, "public")));

app.get("/", (req, res) => {
  res.send("Welcome to the static file demo!");
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

First, we import express to create our server and path to safely construct file paths across different operating systems.

Next, app.use(express.static(path.join(__dirname, "public"))) tells Express to serve files from the public folder. The express.static() middleware tells Express to serve files from the public folder. Any file inside this directory becomes accessible to the browser.

We also define a simple GET route for / that sends a welcome message. This shows that static file serving can coexist with dynamic routes.

Finally, app.listen() starts the server on port 3000. Once the server is running, requests for static assets in the public folder are handled automatically.

For this to work, you need a folder named public to store your static files. A typical project structure might look like this:

my-app/
│
├── app.js
└── public/
    ├── index.html
    ├── styles.css
    └── image.png

When a user makes a request, for example, by visiting http://localhost:3000/index.html, Express checks whether the requested file exists inside the public directory. If the file exists, Express sends it directly to the browser. If the file does not exist, Express moves on to the next middleware or returns a 404 response.

Remember that you don't need to define routes for each file, so a request to http://localhost:3000/styles.css means that Express looks for the public/styles.css and responds with it automatically.

You can also customize how static files are served. For example, you might serve files from multiple directories or configure caching behavior.

Imagine your app has this file structure:

my-app/
│
├── app.js
│
├── public/
│   ├── index.html
│   └── styles.css
│
└── images/
    └── image.png

Here's how you can register multiple directories to serve static files from:

app.use(express.static(path.join(__dirname, "public")));
app.use("/images", express.static(path.join(__dirname, "images")));

Here we use app.use(express.static(path.join(__dirname, "public"))); just like before, which means that files inside the public directory are served from the root path, just like before.

But if you look at the next line, you'll see we pass "/images" as the first argument to app.use(), followed by express.static(path.join(__dirname, "images")). In this case, "/images" is a mount path, which tells Express to only use this middleware when it receives a request to /images. When it does, express.static() triggers and looks for files inside the images directory.

So with this configuration, here's how the following requests would work:

• GET http://localhost:3000/styles.css: Express looks in the public directory for styles.css, finds the file, and sends it to the client.

• GET http://localhost:3000/images/image.png: Since this request starts with /images, Express looks in the images directory for image.png, finds the file, and sends it to the client.

Serving static files with Express is simple and powerful. By using express.static(), you can easily serve assets like images, stylesheets, and client-side JavaScript.

Keeping static files in a dedicated folder like public, or by using multiple file directories and mount paths, helps keep your application organized, maintainable, and easy to scale.

--questions--

--text--

What does express.static() do?

--answers--

It creates a new Express application.

--feedback--

Think about how static files are handled in Express.

---

It serves static files from a specified directory.

---

It defines the port number for the server.

--feedback--

Think about how static files are handled in Express.

---

It logs requests made to the server.

--feedback--

Think about how static files are handled in Express.

--video-solution--

2

--text--

Where should you place your static files in order for them to be served by Express?

--answers--

In the root directory of the app.

--feedback--

Consider common practices for organizing static assets.

---

In the public folder.

---

In the views folder.

--feedback--

Consider common practices for organizing static assets.

---

In the node_modules folder.

--feedback--

Consider common practices for organizing static assets.

--video-solution--

2

--text--

What happens when a user requests /index.html on a server that uses express.static() to serve static files from the public folder?

--answers--

The server will display an error page.

--feedback--

Think about how Express serves files from a directory.

---

The server will look for public/index.html and serve it.

---

The server will redirect the user to another page.

--feedback--

Think about how Express serves files from a directory.

---

The server will send a 404 error code.

--feedback--

Think about how Express serves files from a directory.

--video-solution--

2