Serving static files in Node js

In this post, we will learn serving static files in Node Js using Express Js. Static files are like images, CSS, js etc. The static js file is completely different from the js we are using in Node Js.

Serving static files using Express Js

Express Js has a built-in middleware express.static that helps us to serve the static files in Node Js application.

You can learn more about express.static from their official docs.

Serving static files in Express

While using express.static, we can provide the directory name to the method where the static files are stored.

Let's create a directory where we want to store our static files and name it public. Open a terminal and run the below command.

mkdir public && cd public

Now, we can paste any static file here like images or CSS/JS files.

Here I'll be creating a styles.css file.

I'll be using this static file for styling my Html page.

touch styles.css

This will create a new file named styles.css.

Below is the sample code for CSS. Copy the code and paste it in your styles.css file.

* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

/* your custom css here */

Now we have our static file in our public directory, its time to serve it using Express Js.

Add the following code to your main js file after creating the express app.

const express = require('express')

const app = express()

// this middleware will help you to serve your static files
app.use(express.static('public'))

app.listen(80)

Now, this middleware will help us to access all the static files that are in the public directory.

Let's create a views directory in our root directory and inside it, we can create index.html file.

This file will be served to the users whenever someone comes to the root URL.

Below is the sample code for index.html file. Copy the code and paste it in your index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <p>Home Page</p>
    <ul>
      <a href="/product">Products</a>
    </ul>
  </nav>
  <form action="/" method="post">
    <input type="text" name="name" id="name">
    <input type="submit" value="Submit">
  </form>
</body>
</html>

Now, we have our Html code and our CSS static file, let us try to link our CSS with our Html file.

<link rel="stylesheet" href="/styles.css">

The above line will try to locate the CSS file in the same directory if it was a static website, but because of express.static middleware code, Express will provide the path of our public directory and this will help the Html code to access the CSS file.

Well, this was all for today. I know this post was a bit small but this will help you to serve your static files in Node Js.

Thanks for your time. If you found this post helpful😊, please share this with your friends.

If you stuck into some kind of problem, feel free to comment below. I'll be happy to help you🙂.

Till then bye and happy coding!

Serving static files in Node js

Comments

Node JS

Creating a weather app in Express Js using OpenWeatherMap API

More from this blog

React Context API for handling global state

Streamlining React Component Development with a Custom CLI

An introduction to digital ocean functions

Handle file uploads in Node JS with Formidable

Log your Node Js error in a log file like a PRO!

Serving static files using Express Js

Command Palette

Comments

Node JS

Creating a weather app in Express Js using OpenWeatherMap API

More from this blog

Serving static files using Express Js