Tutorial
Serving Static Files in Express.js
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
Express.js is a great framework for creating APIs, but it can also easily be used to serve static files, whether they’re images, CSS, HTML, JavaScript or whatever else you need to host. Express makes serving static files ridiculously easy!
New to Express? Checkout our article on the basics of Express to get caught up on the basics.
Getting Set Up
Installing Express is really easy. We’re going to be using npm, but if you prefer to use something like Yarn, go ahead. To install Express using npm, run:
- $ npm install express --save
Structuring Our Files
We’re going to be making some files public through our Express server by making a whole directory public. This is what our file structure will look like:
express-static-file-tutorial
|- index.js
|- public
|- alligator-logo.png
|- index.html
Note that we’re going to make everything in the public directory available for viewing. This means that we should not put anything secret/sensitive in there, so keep any files with passwords, tokens, etc. out of the public folder, or users will be able to see it.
Creating Our Express Server
Now that we’re all setup, we can start coding! Let’s create our Express server. We’re going to borrow our basic Express server from our Express basics article.
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('An alligator approaches!');
});
app.listen(3000, () => console.log('Gator app listening on port 3000!'));
Now we need to make some changes so that we’ll be serving the static files from our public directory. Let’s tell Express to serve users files from our public directory. We do this by adding the following line to our code:
app.use(express.static('public'));
Let’s look at what this does: when we call app.use(), we’re telling Express to use a piece of middleware. Middleware is a slightly more complicated topic that we’re not going to go into here, but in short, a middleware function is a function that Express passes requests through before it sends them to our routing functions, such as the app.get('/') route above. We tell Express to use the express.static middleware. express.static is a piece of middleware that comes built into Express, it’s purpose is to try to find and return the static file requested. The parameter we pass to the express.static function is the name of the directory we want Express to serve files from, in our case it’s public.
If you’re interested in finding out more about Express middleware, take a look at the official middleware documentation.
Putting it All Together
Let’s put our Express server together, add the app.use line anywhere in between const app = express() and app.listen. Your code should look something like this:
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/', (req, res) => {
res.send('An alligator approaches!');
});
app.listen(3000, () => console.log('Gator app listening on port 3000!'));
Running our app
We’re done with the code for our Express server, let’s run it:
- $ node index.js
Gator app listening on port 3000!
Open your web browser and navigate to localhost:3000, you should see the message “An alligator approaches!”.
Our Express server works.
Creating our Web Page
At this point, we have an Express server set up to serve static files, but we don’t have anything for it to serve. Let’s create a homepage for our super cool company and serve it.
Note: This last section is optional, if you already have the files you want to serve ready, just drop them into the public directory and run the server.
First, create a file called index.html in the public directory. This file will be our home page. You can put whatever you want in it. We’re going to make a simple Hello World webpage for simplicity sake.
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello, Alligator.io!</h1>
<img src="alligator-logo.png" alt="Alligator.io logo">
</body>
</html>
See how we have that image tag link to alligator-logo.png? alligator-logo.png is also a file inside of our public directory, so we link to it using just it’s name. index.html and alligator-logo.png are both in the same directory, so linking is as simple as just putting the file name. Now, if you open localhost:3000 in your browser, you should see our webpage:
Feel free to change anything about the HTML, or the image. And remember, you can still keep adding other routes to your Express app, as long as the route doesn’t have the same path as a file in our public directory, it will work as if nothing was different!
If you want to learn more about Express, take a gander at the Express website and docs at expressjs.com.
0 Comments