Question
Can't Serve Static Files using Node.js over port 3000
- Posted May 16, 2014
This may be an insanely stupid question, even for a node.js newbie. I set up a droplet running 64-bit Ubuntu and installed all of the requisite Node.js packages. I am building a chatroom application using the Node.js in Action book. For this project, I created an HTTP server for serving static content. For some reason, I am able to hit the server over port 3000 (and get a 404 error message), but I can’t seem to serve the static content that I created in the public directory (i.e. index.html file). Below is the server and the index.html file. Can anyone give me a clue why the content is not being served? Assume all the files are in their correct directory locations on the server.
Server:
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: resource 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(3000, function() { console.log(“Server listening on port 3000.”); });
Index.html file
<!DOCTYPE html> <html lang=“en”> <head> <title>Chat</title> <link rel=“stylesheet” href=“/stylesheets/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>Change nickname: <code>/nick [username]</code></li>
<li>Join/create room: <code>/join [room name] </code></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=“/javascripts/chat.js” type=“text/javascript”></script> <script src=“/javascripts/chat_ui.js” type=“text/javascript”></script> </body> </html>
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
Thanks for this ressources! Check this course it’s straight to point and it gives you all the keys to a good start for a complete masteration of node.js by taking all the power of it. https://www.udemy.com/nodejs-tutorial-from-scratch-by-examples/
Unfortunately, even though I made the fix, the problem still persists. It was such a glaring issue, I was sure it would fix the problem, but no change. When I try to access my chatroom page from http://ip address:3000, I still get my 404 error. I looked at file permissions, cleared cache and even rebooted my droplet, but no change. Could this be a node thing? Note that I run my node server using the command nodejs instead of just node. Not sure if that is a thing or not. Very puzzling.
No problem! I think we’ve all spent embarrassingly long amounts of time debugging things in the past only to find out that that we misspelled something.
Wow. How lame! Thanks for the help Andrew!!!
So taking a quick look at this, if I go to htttp://my.ip.address:3000/index.html I can see the web page. If I just go to the root, I get the 404. So that led me to look at this bit: <br> <br><pre> <br>if (request.url == ‘/’) { <br> filepath = ‘public/index.html’; <br>} else { <br> filePath = ‘public’ + request.url; <br>} <br></pre> <br> <br>With this pulled out on it’s own, you’ll probably smack yourself in the forehead. It’s just a simple miss-capitalization! <code>filepath</code> should be <code>filePath</code>