# 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](https://expressjs.com/en/starter/static-files.html)

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!

