CODEWITHSUNDEEP
javascriptnode.js
geninewtoso
geninewtoso

Reputation: 7

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

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);

Upvotes: 0

Views: 4173

Answers (1)

IvanPenga
IvanPenga

Reputation: 335

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);

Upvotes: 2

Related Questions