DEV Community

aryan015
aryan015

Posted on

How to Write Your Own Static File Server in Pure Node.js

#node #express #nextjs

Prerequisites 💻

  1. A computer (Windows, macOS, or Linux)
  2. Node.js installed
  3. About 5 minutes of your time

How-to 🎬

  1. Create a project folder (i.e. node-project)
  2. Create public folder inside you node-project folder
  3. Inside your public create index.html and style.css
  4. Paste below content on your index.html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Aryan – Freelance Developer</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="container">
        <h1>Hello, I'm Aryan Khandelwal — a freelance developer from India 🇮🇳</h1>

        <p>I help businesses build fast, modern, and scalable web applications.
            My key services include:</p>

        <ul>
            <li>ReactJS / RemixJS Development</li>
            <li>Node.js / Express.js APIs</li>
            <li>WordPress Websites & Custom Themes</li>
            <li>Full-stack Development & Consulting</li>
            <li>AWS Lambda & Serverless Applications</li>
            <li>AWS S3 Static Hosting & File Storage</li>
            <li>AWS CloudFront CDN Setup</li>
            <li>AWS EC2 Deployment & Optimization</li>
        </ul>

        <p class="cta">
            You can contact me here
            <a href="mailto:aryankhandelwal15@gmail.com">email</a>
        </p>
        <p class="cta">
            Visit my portfolio:
            <a href="https://aryankhandelwal.in" target="_blank">website</a>
        </p>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode
  1. Paste Below css in your style.css file 
body {
  font-family: Arial, sans-serif;
  background: #f7f7f7;
  margin: 0;
  padding: 0;
  color: #222;
}

.container {
  max-width: 700px;
  margin: 60px auto;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

h1 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.6;
}

ul {
  margin-top: 12px;
}

ul li {
  margin-bottom: 8px;
}

a {
  color: #0066ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.cta {
  margin-top: 20px;
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode
  1. Create a two files main.js and static.js inside your root folder (ie. node-project)
  2. Put below code inside static.js. (It is just a Bare minimum code to start with) 
const fs = require('fs')
const path = require('path')
function static(req, res, public) {
    const files = fs.readdirSync(public)
    let obj = {}
    for (let file of files) {
        if (req.url == '/') {
            obj.filePath = public + 'index.html'
            obj.contentType = "text/html"
            break;
        }
        else if ('/' + file == req.url) {
            obj.filePath = public + file
            const extname = String(path.extname(public + file)).toLowerCase();
            switch (extname) {
                case '.js':
                    obj.contentType = 'text/javascript';
                    break;
                case '.css':
                    obj.contentType = 'text/css';
                    break;
                case '.json':
                    obj.contentType = 'application/json';
                    break;
                case '.png':
                    obj.contentType = 'image/png';
                    break;
                case '.jpg':
                    obj.contentType = 'image/jpg';
                    break;
                case '.gif':
                    obj.contentType = 'image/gif';
                    break;
                case '.svg':
                    obj.contentType = 'image/svg+xml';
                    break;
            }
        }
    }
    if (obj.contentType && obj.filePath) {
        let readS = fs.createReadStream(obj.filePath)
        res.writeHead(200, { "Content-type": obj.contentType })
        readS.pipe(res)
    }
    else {
        res.writeHead(404, { "Content-type": "text/html" })
        res.write("<h1>Not found</h1>")
        res.end()
    }
}

module.exports = static
Enter fullscreen mode Exit fullscreen mode
  1. Again put mention code to main.js 
const http = require('http')
const static = require('./app')


http.createServer((req, res) => {
    static(req, res, './public/')
}).listen(3000)
Enter fullscreen mode Exit fullscreen mode
  1. Now It is time to run our server 
node main.js
Enter fullscreen mode Exit fullscreen mode

Conclusion 🗒️

  1. Never resort to this approach. 💀
  2. Always use backend framework for better optimization. 🚁
  3. keep learning !!! 🦸

Social

Support me 🐣

Top comments (0)