This question already has answers here:
How to serve an image using nodejs
(12 answers)
Closed 5 years ago.
Good day ,
I've got a small problem with my NodeJS http server. The server doesn't load the CSS/JS files from folder , only from url and i don't know why. I would appreciate if someone could take some time and give me some tips on what went wrong.
Here is the Server Code :
var http = require("http");
var gs = require("querystring");
var url = require("url");
var fs = require("fs");
var server = http.createServer(function (request, response, err) {
//HTML
if (request.url === "/") {
sendFileContent(response, "HTML/Login.html", "text/html");
console.log("Requested URL : " + request.url + "\n");
}
else if (request.url === "/main") {
sendFileContent(response, "HTML/Main_Home.html", "text/html");
console.log("Requested URL : " + request.url + "\n");
}
// JS / CSS / Other formats
else if (/^\/[a-zA-Z0-9\/]*.js$/.test(request.url.toString(1))) {
sendFileContent(response, request.url.toString().substring(1), "text/javascript");
}
else if (/^\/[a-zA-Z0-9\/]*.css$/.test(request.url.toString()))
{
sendFileContent(response, request.url.toString().substring(1), "text/css");
}
else if (/^\/[a-zA-Z0-9\/]*.json$/.test(request.url.toString()))
{
sendFileContent(response, request.url.toString().substring(1), "application/json");
}
else if (/^\/[a-zA-Z0-9\/]*.ts$/.test(request.url.toString()))
{
sendFileContent(response, request.url.toString().substring(1), "text/javascript");
}
else if (/^\/[a-zA-Z0-9\/]*.png$/.test(request.url.toString()))
{
sendFileContent(response, request.url.toString().substring(1), "image/png");
}
else if (/^\/[a-zA-Z0-9\/]*.jpg$/.test(request.url.toString()))
{
sendFileContent(response, request.url.toString().substring(1), "image/jpeg");
}
else
{
console.log("Requested URL : " + request.url + "\n");
response.end();
}
});
server.listen(1337, function ()
{
require("console-stamp")(console, '[HH:MM:ss]');
console.log("HTTP Server runs on port : 1337");
});
console.log("Server ready....");
And here is the Send file content function :
function sendFileContent(response, fileName, contentType){
fs.readFile(fileName, function (err, data) {
if (err) {
response.writeHead(404);
response.end("Not Found!");
}
else {
response.writeHead(200, { "Content-Type": contentType });
response.end(data);
}
});
};
And this is how i call the files in html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="../materialize/css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="../CSS/App.css" />
<title></title>
<script type="text/javascript" src="../jquery/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="../materialize/js/materialize.min.js"> </script>
<script type="text/javascript" src="../Javascript/Main_App.js"></script>
Thank you for your time !
You are trying to implement your own static files server and there so many problems in your implementation even besides those that you're asking about that I think that you need to rethink your approach.
To serve static files it is much easier to use a working solution like express.static - but read below for solutions without Express if you really need it. Example with express.static:
var path = require('path');
var express = require('express');
var app = express();
var dir = path.join(__dirname, 'public');
app.use(express.static(dir));
app.listen(3000, function () {
console.log('Listening on http://localhost:3000/');
});
See this answer for more options using connect, express, http and net:
How to serve an image using nodejs
In that answer there are examples of doing what you're trying to do here using express.static, Express without express.static, using connect, using http and using net and even the version that uses raw TCP sockets is not as complicated as your code here. You may want to take a look at it and base your code on these examples.
Related
I am trying to build a Node.js/AngularJS app with Openshift 2. The server is being run successfully and if I go to local adress I get index.html(but blank as it does not load the css), I cant get scripts and links on index.html, I get an error 404 but I dont know why.
Folder structure:
sw [sw master]
pages
index.html
inicio.html
css
inicio.css
js
angular.js
aplicacion.js
app.js
start.js
app.js
const http = require('http'),
fs = require('fs'),
path = require('path'),
contentTypes = require('./utils/content-types'),
sysInfo = require('./utils/sys-info'),
env = process.env;
let server = http.createServer(function (req, res) {
let url = req.url;
if (url == '/') {
url += '/index.html';
}
// IMPORTANT: Your application HAS to respond to GET /health with status 200
// for OpenShift health monitoring
if (url == '/health') {
res.writeHead(200);
res.end();
} else if (url == '/info/gen' || url == '/info/poll') {
res.setHeader('Content-Type', 'application/json');
res.setHeader('Cache-Control', 'no-cache, no-store');
res.end(JSON.stringify(sysInfo[url.slice(6)]()));
} else {
fs.readFile('./pages' + url, function (err, data) {
if (err) {
res.writeHead(404);
res.end('Not found');
} else {
let ext = path.extname(url).slice(1);
if (contentTypes[ext]) {
res.setHeader('Content-Type', contentTypes[ext]);
}
if (ext === 'html') {
res.setHeader('Cache-Control', 'no-cache, no-store');
}
res.end(data);
}
});
}
});
server.listen(env.NODE_PORT || 3000, env.NODE_IP || 'localhost', function () {
console.log(`Application worker ${process.pid} started...`);
});
index.html
<!DOCTYPE html>
<html lang="es" data-ng-app="TFG">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Página principal</title>
<script src="../js/angular.js"></script>
<script src="../js/app.js"></script>
<link href="../css/inicio.css" rel="stylesheet" />
</head>
<body>
<!--CUERPO-->
<div data-ng-view></div>
</body>
</html>
your index file should be at root level as you are providing path in your nodejs file.
Right now your index.html is under "pages" folder.
pages
index.html
inicio.html
I think this will be your tree
sw [sw master]
pages
inicio.html
css
inicio.css
js
angular.js
aplicacion.js
emphasized textindex.html
app.js
start.js
The Node.js script running the server will render html from page folder. This index.html has the css and js linked by relative path from the folder structure but you need to expose that publicly too to get reached by the browser when it tries to get the resources. You will need some code to serve that static content.
In fact, is your own code returning that 404 as the URL that the browser is trying to get the resources (css and js) from your pages folder and they are not found.
fs.readFile('./pages' + url, function (err, data) {
if (err) {
res.writeHead(404);
res.end('Not found');
}
You should include some code that return the css and js files.
I'm trying to write my first Nodejs server for getting to know Angular/Node and eventually the whole MEAN stack.
My server is running but there's a problem in my code, for some reason when I enter a non existing file, it should redirect to 404, but it doesn't. For some reason the URL gets a double dash;
How would I go about making the redirect to 404 work?
check this image
Here is my code for the server so far.
var http = require('http'),
fs = require('fs'),
path = require('path'),
root = __dirname + '/public/', //magic var
mime = require('mime');
//Server
var server = http.createServer(function (req, res) {
// Check is root is queried
var fileName = '';
var url = req.url;
if (url === '/'){
url = 'index.html'; // redirect when no file specified
}
fileName = root + url;
// check if file exists
fs.exists(fileName, function(exists){
if (exists) {
serveFile(fileName); // yes
} else {
path = root + '404.html'; //no
serveFile(fileName);
}
})
//serve file
function serveFile(requestFile) {
// maak a stream based on events
var stream = fs.createReadStream(requestFile);
res.writeHead(200, {'Content-Type': mime.lookup(requestFile)});
stream.on('data', function (chunk){
res.write(chunk);
});
stream.on('end', function(){
res.end();
});
stream.on('error', function(err){
console.log('error: '+ err);
});
}
});
server.listen(3000); //server start
console.log('Server gestart op http://localhost:3000 ');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>angular</title>
<link href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="styles/app.css" rel="stylesheet"/>
</head>
<body ng-app class="bg">
<h1>First name?</h1>
<input type="text" placeholder="Type your name" ng-model='firstName'
class="input-lg"/>
<p>
Hi, {{firstName}}
</p>
<img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg" height="100px" width="100px"/>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angularjs/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angularjs/1.5.5/angular.min.js"></script>
</html>
Could anyone tell me what's going wrong here?
Thanks in advance!
get rid of the '/' after public:
root = __dirname + '/public'
It is the default behaviour of Node JS. ie. If you request for xxx.com/sample.txt, then the req.url will be "/sample.txt".
https://nodejs.org/api/http.html#http_message_url
So you have consider that in your code, as #Jordan mentioned, remove the "/".
Your redirect also should work fine.
i want to execute the javascript file in the header of an dynamically created html page with a node.js webserver. can't figure out how but must be possible.
var http = require('http');
var url = require('url');
function processRequest(request, response) {
"use strict";
var pathname = url.parse(request.url).pathname;
console.log('Requested ' + pathname);
response.writeHead(1000, { 'Content-Type': 'text/html' });
response.write('<!DOCTYPE html><html ><head>');
response.write('<meta charset="utf-8">');
response.write('<title>' + 'Yay Node!' + '</title>');
response.write('<link rel=stylesheet href=../styles/styles.css rel=stylesheet />');
response.write('<script src=script.js type=text/javascript></script>');
response.write('</head><body>');
response.write('<h1><tt>' + 'jan' + '</tt></h1>');
response.write('<script type="text/javascript">test()</script>')
//response.write('<script type="text/javascript">script.onload = function () { alert("from html Node!")}; </script>')
response.write('<input id="clickMe" type="button" value="clickme" onclick="test()" />')
response.write('</body></html>');
response.end();
};
http.createServer(processRequest).listen(8888);
script.js:
document.onload = function () { alert('load Node!'); };
test = function() { alert('test Node!') };
the problem is, that your browser can't find script.js
When it tries to get http://localhost:8888/script.js node answers with an html file that is the same as http://localhost:8888/.
In order for node to correctly serve the script file, you need to check the path and send the correct file.
add something like this to your processRequest function
if (pathname === '/script.js') {
//code to send script
} else {
//code to send html
}
you would have to do the same for the styles.css file as well
if you don't want to hardcode every file in your page, I would recommend using the npm module express
var express = require('express'),
app = express(),
server = require('http').createServer(app);
app.use('/', express.static(__dirname + '/static');
server.listen(8888);
this code will automatically send the files in /static when the browser requests them.
if you want to create a dynamic page, you can add this between the app.use and the server.listen
app.all('/somedynamicurl', function (request, response) {
//Dynamic page
});
now, if someone goes to http://localhost:8888/somedynamicurl they'll get this dynamic page.
I'd also recommend reading the express guide and the express docs
this works. thanks to Ferdi265.
// http://www.cburch.com/cs/340/reading/nodejs/
var http = require('http');
var url = require('url');
var path = require('path');
var fs = require('fs');
var mimeTypes = {
'.js': 'text/javascript',
'.html': 'text/html',
'.css': 'text/css'
};
function processRequest(request, response) {
"use strict";
var pathname = url.parse(request.url).pathname;
console.log('Requested ' + pathname);
var lookup = path.basename(decodeURI(request.url)), //|| 'index.html',
f = lookup;
fs.exists(f, function (exists) {
if (exists) {
fs.readFile(f, function (err, data) {
if (err) {
response.writeHead(500);
response.end('Server Error!'); return;
}
var headers = {
'Content-type': mimeTypes[path.
extname(lookup)]
};
response.writeHead(200, headers);
response.end(data);
});
// return;
}
else {
response.writeHead(1000, { 'Content-Type': 'text/html' });
response.write('<!DOCTYPE html><html ><head>');
response.write('<meta charset="utf-8">');
response.write('<title>' + 'Yay Node!' + '</title>');
response.write('<link rel=stylesheet href=../styles/styles.css rel=stylesheet />');
response.write('<script src=script.js type=text/javascript></script>');
response.write('</head><body>');
response.write('<h1><tt>' + 'jan' + '</tt></h1>');
response.write('<script type="text/javascript">test()</script>')
//response.write('<script type="text/javascript">script.onload = function () {
alert("from html Node!")}; </script>')
response.write('<input id="clickMe" type="button" value="clickme"
onclick="test()" />')
response.write('</body></html>');
response.end();
}
});
};
http.createServer(processRequest).listen(8888);
I've read this link Node.js - external JS and CSS files (just using node.js not express) and comprehended somewhat but still do not know where to plug them in, in my case. Consider a 'Hello World' node.js app bellow, 2 lines, link and script, in the head section would not work. I guess because they are not web-reference yet. So, how do I include them in? If I do like the link suggests, would they be outside of the head section?
var http = require('http');
var html =
'<html>'+
'<head>'+
'<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'+
'<link rel="stylesheet" type="text/css" href="./mystyle.css">'+
'<script src="./myscript.js"></script>'+
'</head>'+
'<body>'+
'<p>Hello World!</p>'+
'</body>'+
'</html>';
http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.write(html);
response.end();
}).listen(80);
You should be using response.writeHead, not request.writeHead.
Also, the current code will return the same file regardless of the js or css request.
Basically, you need the server to deliver your public files. Now the easiest way to do this would be to use express, and set up the static middleware.
However, if you really don't want to use express, I still think the easiest way to do this would be to use the connect static middleware.
Something along the lines of :
var http = require('http');
var static = require('static')('/');
http.createServer(static).listen(80);
This would create a basic web server delivering the files in your / directory.
I got it, finally! Like I said it would help me to understand the basic structure and interaction between node.js and browser. Thank you everyone. Here is the code.
var http = require('http');
var fs = require('fs');
var i = 0;
var html =
'<html>'+
'<head>'+
'<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'+
'<link rel="stylesheet" type="text/css" href="./mystyle.css">'+
'<script src="./myscript.js"></script>'+
'</head>'+
'<body>'+
'<p>Hello World!</p>'+
'</body>'+
'</html>';
http.createServer(function(request, response) {
i++;
console.log('Request #'+i+': '+request.url);
if (request.url.indexOf('.js') != -1) {
fs.readFile(__dirname + '/misc/myscript.js', function (err, data) {
if (err) console.log(err);
else {
console.log('/misc/myscript.js: fs.readFile is successful');
response.setHeader("Content-Length", data.length);
response.setHeader("Content-Type", 'text/javascript');
response.statusCode = 200;
response.end(data);
}
});
}
else if (request.url.indexOf('.css') != -1) {
fs.readFile(__dirname + '/misc/mystyle.css', function (err, data) {
if (err) console.log(err);
else {
console.log('/misc/mystyle.css: fs.readFile is successful');
response.setHeader("Content-Length", data.length);
response.setHeader("Content-Type", 'text/css');
response.statusCode = 200;
response.end(data);
}
});
}
else {
response.writeHead(200, {'Content-Type': 'text/html'});
response.write(html);
response.end();
}
}).listen(80);
I am trying to write a Node.js project from a tutorial, but the server.js file does not seem to be working properly:
var http = require('http');
var fs = require('fs');
var path = require('path');
var mime = require('mime');
var cache = {};
function send404(response) {
response.writeHead(404, {'Content-Type': 'text/plain'});
response.write('Error 404: not found');
response.end();
}
function sendFile(response, filePath, fileContents) {
response.writeHead(
200,
{"content-type": mime.lookup(path.basename(filePath))}
);
response.end(fileContents);
}
function serveStatic(response, cache, absPath) {
if (cache[absPath]) {
sendFile(response, absPath, cache[absPath]);
} else {
fs.exists(absPath, function(exists) {
if (exists) {
fs.readFile(absPath, function(err, data) {
if (err) {
send404(response);
} else {
cache[absPath] = data;
sendFile(response, absPath, data);
}
});
} else {
send404(response);
}
});
}
}
var server = http.createServer(function(request, response) {
var filePath = false;
if(request.url == '/') {
filePath = 'public/index.html';
} else {
filePath = '/public/' + request.url;
}
var absPath = './' + filePath;
serveStatic(response, cache, absPath);
});
server.listen(26353, function() {
console.log("Listening...");
});
When I go to my URL the index.html content is displayed, but none of the stylesheets or attached files from the index.html are displayed, I get:
GET http://myURL.com/stylesheet/style.css 404 (NOT FOUND)
Here is my index.html:
<html>
<head>
<title>Chat</title>
<link rel='stylesheet' href='/stylesheet/style.css'></link>
</head>
<body>
<div id='content'>
<div id='room'></div>
<div id='room-list'></div>
<div id='messages'></div>
<form id='send-form'>
<input id='send-message' />
<input id='send-button' type='submit' value='Send' />
<div id='help'>
Chat commands:
<ul>
<li>.....</li>
</ul>
</div>
</form>
</div>
<script src='/socket.io/socket.io.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-1.8.0.min.js' type='text/javascript'></script>
<script src='/javascript/chat.js' type='text/javascript'></script>
<script src='/javascript/chat_ui.js' type='text/javascript'></script>
</body>
</html>
I'm not sure what is wrong.
My project directory has the server.js, the node-modules and the public folder, the public folder has a stylesheet directory and javascript folder where the files are.
My web host has is set up so that http://myURL.com/node/ is where port 26353 is bound to (don't know if that's the right word). So if I go to http://myURL.com/node I see the index.html file but none of the stylesheets or javascript works.
Sending file is not so trivial in node.js. There is a code from my framework
core.sendFile = function(filename, context)
{
if (fs.exists(filename, function (exists)
{
if (exists) fs.stat(filename, function (err, stats)
{
if (err) core.catch_err(err);
else if (stats && !stats.isDirectory())
{
var filestream = new fs.ReadStream(filename);
var mimme = mime.lookup(filename);
context.response.writeHead(200, {'Content-Type': mimme });
filestream.pipe(context.response);
filestream.on("error", function (err) { context.response.statusCode = "500"; context.response.end("Server error"); core.log("Server error while sending " + filename, "err"); });
context.response.on("close", function () { filestream.destroy(); });
core.logger.log("Sending file " + filename);
}
});
else core.not_found(context);
}));
}
The idea is to read and write file as a stream, and to process some errors and closing of streams. "Core" is just a library object.
remove the first / from your url, so it should be stylesheet/style.css instead of /stylesheet/style.css