How to load an html file with <script> tag on a node js server?

Question

I have an html file that has some javascript on script tag. I created a server with node js but when I try to load the website on the server I only get to see the html part of the file, and not the javascript part.

Here's a part of the code in html on the head tags that I tried to link it with javascript:

<head>
    <title>HTML5 Canvas Winning Wheel</title>
    <link rel="stylesheet" href="main.css" type="text/css" />
    <script type="text/javascript" src="Winwheel.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

    <script src="app.js" type="text/javascript"></script>
</head>

And here is the app.js where I created the server:

var http = require('http');  
var url = require('url');  
var fs = require('fs'); 

var server = http.createServer(function(request, response) {  
    var path = url.parse(request.url).pathname;  
    switch (path) {  
        case '/index.html':  
            fs.readFile(__dirname + path, function(error, data) {  
                if (error) {  
                    response.writeHead(404);  
                    response.write(error);  
                    response.end();  
                } else {  
                    response.writeHead(200, {  
                        'Content-Type': 'text/html'
                    }); 
                    response.write(data);  
                    response.end();  
                }  
            });  
            break;  
        case '/Page2.html':  
            fs.readFile(__dirname + path, function(error, data) {  
                if (error) {  
                    response.writeHead(404);  
                    response.write(error);  
                    response.end();  
                } else {  
                    response.writeHead(200, {  
                        'Content-Type': 'text/html'  
                    });  
                    response.write(data);  
                    response.end();  
                }  
            });  
            break;  
        default:  
            response.writeHead(404);  
            response.write("opps this doesn't exist - 404");  
            response.end();  
            break;  
    }  
});

server.listen(8082);

Thank you Tarik! This was my first time ever asking a question. I wasn't familiar with how to use the features of stack overflow when asking a question. — geninewtoso
– geninewtoso, Commented Jul 4, 2020 at 6:20

IvanPenga · Accepted Answer · 2020-07-03 06:52:44Z

2

When you serve index.html client will try to get all resources specified in index.html from your server. You can see that if you log path variable in your callback function:

/index.html
/main.css
/Winwheel.js
/app.js

What you can do here is to make more switch cases for other files like main.css and app.js but this can get overwhelming if you have many files to serve.

Instead, take a look at how to serve static files from your server here: https://expressjs.com/en/starter/static-files.html or how to create simple express server here https://expressjs.com/en/starter/hello-world.html.

If you don't won't to use express you can remove switch statement and do something like this:

var http = require('http');  
var url = require('url');  
var fs = require('fs');  
var server = http.createServer(function(request, response) {  
    var path = url.parse(request.url).pathname;  
    fs.readFile(__dirname + path, function(error, data) {  
        if (error) {  
            response.writeHead(404);  
            response.write('This page does not exist');
            response.end();  
        } else {  
            response.writeHead(200, {  
                'Content-Type': 'text/html'
            }); 
            response.write(data);  
            response.end();  
        }  
    }); 
});  
server.listen(8082);

answered Jul 3, 2020 at 6:52

IvanPenga

3351 silver badge12 bronze badges

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

1 Comment

geninewtoso Over a year ago

Thank you so much sir!! You have helped me quite a lot.

Collectives™ on Stack Overflow

How to load an html file with <script> tag on a node js server?

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