How serve client javascript modules in node.js

Question

I'm new programmer to node.js. I trying to create vanilla server in node.js. In my client, I used ES6 modules. when I start my server and search for http://localhost:3000/ in my browser, HTML and CSS loaded but for javascript have this error:

I have four javascript modules for client side and in HTML I use this code for load javascript moduls:

<script type="module" src="js/controller.js" async></script>

My server code :

const http = require('http');
const fs = require('fs');
const path = require('path');

const PORT = 3000;
const server = http.createServer();

server.on('request', (req, res) => {
    let routes = {
        'GET': {
            '/': indexHtml,
        }
    }
    console.log(req.url)
    let handler = routes[req.method][req.url];

    handler = handler || readFile;
    handler(req, res);
})

server.listen(PORT, () => {
    console.log(`Listening on port ${PORT}...`)
});

function indexHtml(req, res) {
    readFile({ url: '/index.html' }, res);
}

function readFile(req, res) {
    var filePath = path.join(__dirname, '../client/', req.url);
    // console.log(filePath)
    fs.readFile(filePath, (error, data) => {
        if (error) {
            res.writeHead(404);
            res.write('Not found error 404');
            res.end()
        } else {
            res.writeHead(200);
            res.write(data);
            res.end();
        }
    })
}

How can I solve this error and serve javascript modules, Thanks a lot for your help.

You are not setting the Content-Type header for your files. Use res.setHeader(...) and set the correct contenttype (for instance text/html or application/javascript) depending on the respective file type — derpirscher
– derpirscher, Commented Nov 19, 2021 at 8:29

Navid Sadeghi · Accepted Answer · 2022-01-20 05:56:15Z

5

With comment @derpirscher, I change my reader function with this code :

function readFile(req, res) {
    var filePath = path.join(__dirname, '../client/', req.url);

    fs.readFile(filePath, (error, data) => {
        if (error) {
            res.setHeader('Content-Type', 'text/html');
            res.writeHead(404);
            res.write('Not found error 404');
            res.end()
        } else {
            const url = req.url === '/' ? '/index.html' : req.url;
            if (req.url.includes('js')) res.setHeader('Content-Type', 'application/javascript');
            if (req.url.includes('css')) res.setHeader('Content-Type', 'text/css');
            if (req.url.includes('html')) res.setHeader('Content-Type', 'text/html');
            res.writeHead(200);
            res.write(data);
            res.end();
        }
    })
}

answered Jan 20, 2022 at 5:56

Navid Sadeghi

5371 gold badge5 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gert Arnold Over a year ago

Comments are volatile. Please explain how this answers your question. Keep in mind that Stack Overflow is mainly for future visitors.

Collectives™ on Stack Overflow

How serve client javascript modules in node.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related