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:

1. Understand what static files are.
2. Learn how Express.js can be used to serve these files.
3. Finally, we'll create a basic Express.js server that delivers static files.

Are you ready? Let's get started!

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.

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.

Now let's look at how we can use the express.static function to deliver static files. Express.js executes the function and serves the returned files when the file's request URL path matches the path of a file in the specified directory.

Here's a basic example of how we use the express.static function:

JavaScript
Copy to clipboard
1const express = require('express');
2const path = require('path');
3const app = express();
4
5// Define the static file path using path.join to ensure the absolute path is correct
6app.use(express.static(path.join(__dirname, 'public')));
7
8app.listen(3000, function () {
9    console.log('Your app is listening on port 3000');
10});

In the above example, public is the name of the directory containing our static files. We use path.join(__dirname, 'public') to create an absolute path, ensuring the server can locate the public directory no matter where the script is run from. When this code runs, Express.js will serve any file directly from the public directory when requested. For example, if we have an image named logo.jpg in our public directory, it can be accessed by visiting http://localhost:3000/logo.jpg in the browser.

When doing the practice exercises of this lesson, you can find the index.html, styles.css, and script.js files in the public folder.

In more complex applications, you might want to serve static files from multiple directories or set cache control headers to optimize performance.

Let's put everything we've learned into practice by setting up a basic Express.js server that serves static files:

JavaScript
Copy to clipboard
1const express = require('express');
2const path = require('path');
3const app = express();
4
5// Define the static file path
6app.use(express.static(path.join(__dirname, 'public')));
7
8app.get('/', function (req, res) {
9    res.send('Hello World!');
10});
11
12app.listen(3000, function () {
13    console.log('App is listening on port 3000');
14});

Note: Using the function keyword in app.get(...) is not mandatory. You can also use an arrow (=>) function for the same purpose:

JavaScript
Copy to clipboard
1app.get('/', (req, res) => {
2    res.send('Hello World!');
3});

Additionally, using __dirname is not mandatory; it is simply a conventional way to ensure the path is absolute and correct. You can use a relative path or any other method to specify the directory as needed.

The code starts by importing the required modules and initializing an Express.js application. Then it uses the express.static middleware function to serve files from the public directory. When the server receives a request, it looks for a file matching the request's path in the public directory and sends it to the client. If the file doesn't exist, it will not send anything.

This simple server is the foundation from which you'll build more complex applications. It's time to take what you've learned and start creating!

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:

JavaScript
Copy to clipboard
1const axios = require('axios');
2
3const serverUrl = 'http://localhost:3000';
4
5// Function to check the static files
6async function checkStaticFiles() {
7  const staticFiles = [
8    'index.html', 
9    'styles.css', 
10    'script.js'
11  ];
12
13  for (const file of staticFiles) {
14    try {
15      const response = await axios.get(`${serverUrl}/${file}`);
16      console.log(`Response from ${file}: ${response.status}`);
17      console.log(`Content of ${file}:`);
18      console.log(response.data);
19      console.log('---------------------------------------');
20    } catch (error) {
21      console.error(`Error accessing ${file}:`, error.message);
22    }
23  }
24}
25
26// Run the function to check static files
27checkStaticFiles();

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:

Copy to clipboard
1Response from index.html: 200
2Content of index.html:
3<!DOCTYPE html>
4<html lang="en">
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Static Files Example</title>
9    <link rel="stylesheet" href="styles.css">
10</head>
11<body>
12    <h1>Welcome to the Static Files Example</h1>
13    <button onclick="showAlert()">Click Me</button>
14    <script src="script.js"></script>
15</body>
16</html>
17---------------------------------------
18Response from styles.css: 200
19Content of styles.css:
20body {
21    font-family: Arial, sans-serif;
22    text-align: center;
23    background-color: #f0f0f0;
24}
25
26h1 {
27    color: #333;
28}
29
30button {
31    padding: 10px 20px;
32    background-color: #007BFF;
33    color: white;
34    border: none;
35    border-radius: 4px;
36    cursor: pointer;
37}
38
39button:hover {
40    background-color: #0056b3;
41}
42---------------------------------------
43Response from script.js: 200
44Content of script.js:
45function showAlert() {
46    alert('Button was clicked!');
47}
48---------------------------------------

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.

Congratulations! You've just unlocked a key concept in web development. We've learned what static files are and how crucial they are to building web applications. You now understand how to serve those files using Express.js and even built a simple Express.js server that serves static files.

Remember, express.static is your trusted friend when working with static files. Just specify the name of your static directory, and it will navigate the file system maze for you.

Up next are several practice sessions that will allow you to put your newly acquired skill into action. Trust me; you'll get better with each code line you write!