Serving Static Files with Express.js

Topic Overview and Actualization

Welcome on board! In today's lesson, we will be exploring an interesting part of web development — Serving Static Files . Why are we keen on static files? Well, static files form the backbone of the web. Every website you visit uses static files like HTML templates, CSS stylesheets, images, and JavaScript files to create the user interfaces that we interact with. Our key mission for this lesson is to understand the art of using Express.js, a popular web application framework for Node.js, to serve static files effectively. With this crucial knowledge, you'll be well on your way to creating your own dynamic websites! Let's dive in and begin our exciting journey. Our lesson plan is quite straightforward. We'll: Understand what static files are. Learn how Express.js can be used to serve these files. Finally, we'll create a basic Express.js server that delivers static files. Are you ready? Let's get started!

Understanding Static Files

When we talk about static files, we mean files that are not dynamically generated and remain the same for all users. The most common types of static files are HTML, CSS, JavaScript, and image files. For instance, think of an HTML file like a blueprint of a house. It defines the structure and layout of a webpage. This is a static file because it doesn't change, regardless of who views it or when it's viewed. CSS files are another example of static files. They're like the interior designers of our house. They add style and beauty to our webpages, specifying layout, colors, fonts, and more. JavaScript files are like the electricity in our house. They power up our webpages, adding interactivity and functionality. JavaScript files animate elements, handle user actions like clicks or key presses, fetch data from servers, and more. Finally, images, such as JPEGs, PNGs, and GIFs, are also static files. They are like the pictures and paintings in our house, providing visuals to enhance the webpage's look and feel. In a web application, static files are usually stored in a dedicated directory, commonly named public, but it can be any name of your choice.

Introduction to Serving Static Files in Express.js

In web terminology, 'serving files' means delivering files to a browser. For a web server, that entails locating the requested file on the server's file system and sending it over the network to the client's browser. Express.js simplifies this file-serving process by providing a built-in middleware function: express.static . Middleware functions are functions that have access to the request and response objects. They can modify the request and response or end the request-response cycle. express.static is middleware for serving static files. Imagine the express.static function like a librarian. When you request a book (static file) from a library (a directory), the librarian retrieves the book and hands it to you. That's exactly what Express.js does with your static files.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Accessing the Server using Axios

To access the server using a client-side script, you can use the Axios library. Axios makes it simple to make HTTP requests to your server and handle the responses. Here's an example run.js file that demonstrates how to access the server and check the content of the static files:

const axios = require('axios');

const serverUrl = 'http://localhost:3000';

// Function to check the static files
async function checkStaticFiles() {
  const staticFiles = [
    'index.html', 
    'styles.css', 
    'script.js'
  ];

  for (const file of staticFiles) {
    try {
      const response = await axios.get(`${serverUrl}/${file}`);
      console.log(`Response from ${file}: ${response.status}`);
      console.log(`Content of ${file}:`);
      console.log(response.data);
      console.log('---------------------------------------');
    } catch (error) {
      console.error(`Error accessing ${file}:`, error.message);
    }
  }
}

// Run the function to check static files
checkStaticFiles();

This code uses Axios to send GET requests to the root endpoint (http://localhost:3000) and the static file endpoints (index.html, styles.css, script.js) of the server. For each file, it logs the response, and the file content to the console, allowing you to see the actual content of your served static files. If there's an error, such as the server not being available, the error message is logged instead.

Using Axios on the client-side allows you to interact with the server programmatically, which is particularly useful when testing your endpoints or ensuring that your static files are being served correctly.

Note: The checkStaticFiles function is marked as async because it uses await to pause the execution until the axios.get promise resolves. This is crucial for handling asynchronous operations in a synchronous-like manner, ensuring that each file's result is processed in order before moving on to the next.

To run the run.js file, open your terminal and use the command node run.js. This will run the script with Axios requests and offer real-time insights into the server's operations.

When you run the script, you’ll see output similar to:

Response from index.html: 200
Content of index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Files Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to the Static Files Example</h1>
    <button onclick="showAlert()">Click Me</button>
    <script src="script.js"></script>
</body>
</html>
---------------------------------------
Response from styles.css: 200
Content of styles.css:
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
---------------------------------------
Response from script.js: 200
Content of script.js:
function showAlert() {
    alert('Button was clicked!');
}
---------------------------------------

Understanding HTTP Status Codes:

200 OK: The request was successful, and the static file was served correctly.
404 Not Found: The requested file does not exist on the server. Check the file path and ensure it’s in the public directory.
500 Internal Server Error: There was an error on the server while trying to serve the file. Check your server code for issues.
403 Forbidden: The server understood the request, but it refuses to authorize it. Check your server configuration.

By understanding these status codes, you’ll know whether your static files are being served correctly and can troubleshoot any issues that arise.

Topic Overview and Actualization

Understanding Static Files

Introduction to Serving Static Files in Express.js

Join the 1M+ learners on CodeSignal

Using express.static to Serve Static Files

Building a Simple Express.js Server for Serving Static Files

Accessing the Server using Axios

Lesson Summary and Practice