Develop Reference

Javascript and CSS don't work in node server

So I'm trying to make a web app, using a node server. I run into a problem where the CSS, Javascript don't work when linking them with a src like or .
The only way I can have css and javascript, is to directly put it inside the script and style parameters, but that doesn't seem that practical
The error that it pulls out shows a url:
127.0.0.1/home.js
why is this happening, and is there a work around?
here is the code
const fetch = require('node-fetch');
const fs = require("fs");
const http = require("http");
const url = require("url");
const server = http.createServer((req, res) => {
// get URL
const pathName = url.parse(req.url, true).pathname;
console.log(pathName);
// create split pathName
const pathSplit = pathName.split("/");
pathSplit.shift();
// HOME PATH
if(pathName === "/home" || pathName === "/"){
// Get HTML data
const data = renderHome();
res.writeHead(200, {"content-type": "text/html"});
fs.readFile(`${__dirname}/templates/template-basic.html`, "utf-8", (err, data) => {
fs.readFile(`${__dirname}/templates/template-battlepass.html`, "utf-8", (err, d) => {
let output = data.replace("{%CONTAINER%}", d);
res.end(output);
});
});
}
// ITEM SHOP PATH
else if(pathName === "/itemShop") {
// Get HTML data
const data = renderItemShop();
res.writeHead(200, {"content-type": "text/html"});
res.end("This is the item shop page");
}
// TOURNAMENTS PATH
else if(pathName === "/tournaments") {
// Get HTML data
const data = renderTournaments();
res.writeHead(200, {"content-type": "text/html"});
res.end("this is the tournaments page");
}
// ITEMS PATH
else if(pathSplit[0] === "items") {
// List all the items for the page
const itemsPages = ["backpacks", "contrails", "emotes", "gliders", "skins", "pickaxes", "wraps"];
let itemConfirm = false;
// If URL has been found, change itemConfirm to true
for(let i = 0; i < itemsPages.length; i++){
if(itemsPages[i] === pathSplit[1]){
// Get HTML data
const data = renderItems(pathSplit[1]);
res.writeHead(200, {"content-type": "text/html"});
res.end(`This is the page for ${pathSplit[1]} in items`);
itemConfirm = true;
}
};
// If itemConfirm is false, no url found
if(itemConfirm === false) {
res.writeHead(404, {"content-type": "text/html"});
res.end(`No URL found for ${pathSplit[1]} in items`);
};
}
// JAVASCRIPT
// NO URL FOUND PATH: 404
else{
res.writeHead(404, {"content-type": "text/html"});
res.end("could not find URL");
}
});
server.listen(1337, "127.0.0.1", () => {
console.log("listening for reqs now");
});

I created a simple server that can serve any type of file using the mime-types library. My basic http server works like this:
const http = require('http');
const fs = require('fs');
const path = require('path');
const mime = require('mime-types'); //Creates the appropriate headerType based on the extension
http.createServer(function (request, response) {
let fileName = path.basename(request.url) || 'index.html' //so that the homepage uses index.html
filePathPart = path.dirname(request.url).slice(1) + "/" + fileName
filePath = "public/" + filePathPart //I store my files in public/js/ or public/css/
console.log(filePath) //just to check if I got the correct files
mimeType = mime.contentType(fileName)
getFile(response, mimeType, filePath)
}).listen(8080);
//I wrote a function to write all the responses the server gives, with this I don't need to expect a specific number of inputs, I can load any number of js/css files or even other html pages.
function getFile(response, mimeType, filePath) {
fs.readFile(filePath, function (err, contents) {
response.writeHead(200, { "Content-Type": mimeType });
response.end(contents);
})
}

Uploading mp3 files and playing the uploaded files in node.js

I am trying to upload some files, through an HTML form, in my local drive, which I was able to complete successfully. However, when attempting to play the mp3 uploaded file, by accessing the url of the "mp3 player", the server redirects me to the uploading page and I can not understand why this happens. I am quite a begginer, when it comes to node.js and I do not really know that much about JavaScript, as I have little experience with it. You can check the code below:
var http = require('http'),
fs = require('fs'),
filePath = './test.mp3',
stat = fs.statSync(filePath);
var formidable = require('formidable');
http.createServer(function(request, response) {
//fs.createReadStream(filePath).pipe(response);
if(request.url == '/playUploadedFile') {
fs.createReadStream(filePath).pipe(response);
response.writeHead(200, {
'Content-Type': 'audio/mpeg',
'Content-Length': stat.size,
});
}
if (request.url == '/fileupload') {
var form = new formidable.IncomingForm();
form.parse(request, function (err, fields, files) {
var oldpath = files.filetoupload.path;
var newpath = __dirname + '/' + files.filetoupload.name;
filePath = newpath;
console.log(filePath);
fs.rename(oldpath, newpath, function (err) {
if (err) throw err;
response.write('File uploaded and moved!');
//request.url = '/playUploadedFile';
response.end();
});
});
} else {
response.writeHead(200, {'Content-Type': 'text/html'});
response.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
response.write('<input type="file" name="filetoupload"><br>');
response.write('<input type="submit">');
response.write('</form>');
return response.end();
}
}).listen(8080)

In order to serve static file you have to declare your upload path to static. This way node understands the files within the specified path needs to be served exactly the way it is. The easiest way to do this is to use express https://expressjs.com/en/starter/static-files.html. But you can also use node-static https://www.npmjs.com/package/node-static package as well.

why am I being redirected to a 404 Page Not Found?

I wrote the server.js code below:
// Require modules
const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
// Array of Mime Types
const mimeTypes = {
"html" : "text/html",
"jpeg" : "image/jpeg",
"jpg" : "image/jpeg",
"png" : "image/png",
"js" : "text/javascript",
"css" : "text/css"
};
// Create Server
const server = http.createServer(function(req, res){
const uri = url.parse(req.url).pathname;
const fileName = path.join(process.cwd(),unescape(uri));
console.log('Loading '+ uri);
const stats;
try{
stats = fs.lstatSync(filename);
} catch(e) {
res.writeHead(404, {'Content-type': 'text/plain'});
res.write('404 Not Found\n');
res.end();
return;
}
// Check if file/directory
if(stats.isFile()){
const mimeType = mimeTypes[path.extname(fileName).split(".").reverse()[0]];
res.writeHead(200, {'Content-type': mimeType});
const fileStream = fs.createReadStream(fileName);
fileStream.pipe(res);
} else if(stats.isDirectory()){
res.writeHead(302,{
'Location' : 'index.html'
});
res.end();
} else {
res.writeHead(500, {'Content-type' : 'text/plain'});
res.write('500 Internal Error\n');
res.end();
}
}).listen(3000);
I have an index.html page that simply says test and instead of rendering that in the browser I get a 404 Page Not Found. Since I tweaked the server.js file I believe the problem is there, but I am not quite sure.
Anybody see how this server code could have been written to better server the index.html file I have in the project?

Perhaps :
stats = fs.lstatSync(fileName);
and not :
stats = fs.lstatSync(filename);
You have the wrong variable/param... it's case sensitive.

Node.js - Static fileserver not working

I'm trying to create a static fileserver in note.js, but it is not really working.
My fileserver.js code:
var http = require("http"),
sys = require("sys"),
path = require("path"),
url = require("url"),
filesys = require("fs"),
rootpath = "D:\\NodeJS\\WWW\\",
port = 3000;
http.createServer(function(request,response){
var my_path = url.parse(request.url).pathname;
var full_path = path.join(process.cwd(),rootpath+my_path);
path.exists(full_path,function(exists){
if(!exists){
response.writeHeader(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
}
else{
filesys.readFile(full_path, "binary", function(err, file) {
if(err) {
response.writeHeader(500, {"Content-Type": "text/plain"});
response.write(err + "\n");
response.end();
}
else{
response.writeHeader(200);
response.write(file, "binary");
response.end();
}
});
});
})
http.createServer(function(request,response){
var my_path = url.parse(request.url).pathname;
filesys.readFile(rootpath + my_path,response);
}).listen(port);
sys.puts("Server Running on 3000");
When I now try to open: localhost:3000/index.html (The index file is in the folder WWW), my webbrowser is just loading and loading something but not displaying anything. There is also no error in the console.
I hope you can help me!
JS

Are you trying to get directory listing with this program? If yes then use this.
var http = require('http');
var connect = require('connect');
var app = connect()
.use('/public', connect.static(__dirname + '/public'))
.use('/public', connect.directory(__dirname + '/public'))
.use(function(req, res){
res.end('hello world\n');
})
http.createServer(app).listen(3000);
// access it on http://localhost:3000/public
I have used connect module. connect.directory serves the directory listing and connect.static serves the static file.
Let me know if I have not understood you correctly.

Try This :
var fs = require('fs');
var http = require('http');
var path = require("path");
var url = require("url");
var settings = require("../settings");
http.createServer(function (request, response) {
var uri = url.parse(request.url).pathname;
var filetype = (uri.split("/static/")[1]).split(".")[1];
var filename = path.join(process.cwd(), uri);
fs.readFile(filename, function (error, content) {
if (error) {
response.writeHead(500);
response.end();
}
else {
response.writeHead(200, { 'Content-Type': settings.STATIC.HEADERS[filetype.toUpperCase()] });
response.end(content, 'utf-8');
}
});
}).listen(8000);
Add A settings File with something like this :
module.exports = {
DOMAIN: "localhost", // Runnimg Domain , Production Only
PORT: 8080, // Port Project Running On
PROJECT: __dirname, // project directory
DEFAULT_THEME: "default", // Default Theme for site
DB: { // Database Information and Credintials
HOST: "localhost",
USER: 'root',
PASSWORD: 'root',
DATABASE: 'sockets'
},
STATIC: { // Static Files and forlders information
EXTENSIONS: ['psd', 'docs', 'zip', 'rar', 'png'], // allowed to download extensions
HEADERS: {// MIME Types for diffrent types
PDF: 'application/pdf',
CSS: 'text/css',
JS: 'text/javascript',
HTML: 'text/html',
TXT: 'text/plain',
JPG: 'image/jpeg',
JPEG: 'image/jpeg',
GIF: 'image/gif ',
DOWNLOAD: 'application/octet-stream'
}
}
};
i Always like to have this file with everything that i will use everywhere.
and as you can see the code waits for a url like this :
http://domain:port/static/file.ext
you can change that in this line :
var filetype = (uri.split("/static/")[1]).split(".")[1];
Hope this helps

node + socket.io: multiple server emits for single client emit?

I've just managed to connect to a server script with socket.io, so I'm happy about that. I'm less happy though about the weird behavior my script generates: I send one emit to the server script on a buttonclick, and the server test script sends back a message 6x to the console log. Googling this problem description gets ideas about spotty, repeating connections, but I don't think that's it.
Anyway, here's the client app.js:
var commentapp={
init: function(){
var commentapp=this;
commentapp.btn_api=$('#btn_api');
commentapp.btn_api.click(this.get_comment_data);
},
get_comment_data: function(btn_event){
var commentapp=this;
console.log('trying to connect');
commentapp.socket=io.connect('http://localhost:8080');
commentapp.socket.on('connect', function() {
commentapp.socket.emit('btn_api_call');
}); //commentapp.socket.on 'connect',
commentapp.socket.on('serverMessage', function(content){
console.log(content);
}
); //commentapp.socket.on('serverMessage'
}
};
$(function() {
commentapp.init();
});
The server script is as follows:
var httpd = require("http").createServer(handler);
var io=require('/Users/user/Virtualenvs/node_modules/socket.io/lib/socket.io').listen(httpd);
var fs = require('fs');
var url = require("url");
var path = require("path");
var port = process.argv[2] || 8080;
httpd.listen(parseInt(port, 10));
function handler (request, response) {
var uri = url.parse(request.url).pathname,
filename = path.join(process.cwd(), uri);
console.log(uri);
path.exists(filename, function(exists) {
if(!exists) {
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return; //these returns get you out of the function I think
}
if (fs.statSync(filename).isDirectory()) filename += '/index.html';
fs.readFile(filename, "binary", function(err, file) {
if(err) {
response.writeHead(500, {"Content-Type": "text/plain"});
response.write(err + "\n");
response.end();
return;
}
response.writeHead(200);
response.write(file, "binary"); //otherwise here's where the file gets finally served
response.end();
}); //fs.readFile
}); //path.exists
io.sockets.on('connection',function(socket) {
socket.on('btn_api_call', function() {
socket.emit('serverMessage', 'Server heard you.');
});
});
};
console.log("Static file server running at\n => http://localhost:" + port + "/\nCTRL + C to shutdown");
Both of these are cannibalized from https://github.com/accbel/nodejs-socketio-example and Pedro Teixeira's book.
So if I click the button to generate the 'btn_api_call'emit, the console log will say "'Server heard you.'" 6x. Hopefully this is a rookie mistake easily set straight.
Thanks for your help!

This is likely due to having your registration for connections inside of a route handler.
Each time a request comes in that is handled by that route, the code is adding a new listener for connections.
You likely have a similar problem in your client - connecting each time the button is clicked.
Move your connection listener outside the route like this:
function handler (request, response) {
var uri = url.parse(request.url).pathname,
filename = path.join(process.cwd(), uri);
console.log(uri);
path.exists(filename, function(exists) {
if(!exists) {
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return; //these returns get you out of the function I think
}
if (fs.statSync(filename).isDirectory()) filename += '/index.html';
fs.readFile(filename, "binary", function(err, file) {
if(err) {
response.writeHead(500, {"Content-Type": "text/plain"});
response.write(err + "\n");
response.end();
return;
}
response.writeHead(200);
response.write(file, "binary"); //otherwise here's where the file gets finally served
response.end();
}); //fs.readFile
}); //path.exists
};
io.sockets.on('connection',function(socket) {
socket.on('btn_api_call', function() {
socket.emit('serverMessage', 'Server heard you.');
});
});
On the client move the connect logic to init - something like:
var commentapp={
init: function(){
var commentapp=this;
commentapp.btn_api=$('#btn_api');
commentapp.btn_api.click(this.get_comment_data);
console.log('trying to connect');
commentapp.socket=io.connect('http://localhost:8080');
commentapp.socket.on('connect', function() {
commentapp.socket.emit('btn_api_call');
}); //commentapp.socket.on 'connect',
commentapp.socket.on('serverMessage', function(content){
console.log(content);
}
); //commentapp.socket.on('serverMessage'
},
get_comment_data: function(btn_event){
var commentapp=this;
commentapp.socket.emit('btn_api_call');
}
};