html page not loading when running javascript server - javascript

So I'm creating a game with HTML, css, and javascript, and I'm trying to incorporate template engines/ajax in this task. I made a server which if I run in cmd and then open up google chrome and type 'localhost:3000' in the address line, it is supposed to direct me to the main.html page.
However, when I type 'node server.js' in cmd, it runs properly but when I enter 'localhost:3000' in the browser it says the page does not exist. I'm not sure what went wrong. If I were to manually double click on the html file in my folder, it works, but I'm trying to get it to load by running a server.
I have three folders (img, node_modules, and pages) and 2 json packages which were created by installing express and pug. It's hard to explain my folder paths and code here, so I have a link to a folder containing my files/sub folders and it also gives a clearer view of the path in my directory: https://github.com/jessaisreal/game
It wouldn't let me upload the node_modules folder as it was too big, but I automatically got it from typing 'npm init', 'npm install express' and 'npm install pug' into the cmd line in the folder.
I'm assuming something is wrong with my server.js file or the way my folders are set up. I'm really desperate to get my program working and would appreciate any help. I have no idea why my html page isn't loading. I'm also not sure if I handled the GET request for getting specific fonts correctly.
I cut down my program as much as I could. There are several html and css files, but only included create and main here for simplicity. Again, I would appreciate any help or a push in the right direction!!
server.js:
const http = require('http');
const fs = require("fs");
const pug = require("pug");
//user pug functrion to render through the create Page
const renderMain = pug.compileFile('pages/main.pug');
const renderCreate = pug.compileFile('pages/create.pug');
//Helper function to send a 404 error
function send404(response){
response.statusCode = 404;
response.write("Unknown resource.");
response.end();
}
// Helper function to send 500 server error;
function send500(response){
response.statusCode = 500;
response.write("Server error.");
response.end();
}
// initilize the server
const server = http.createServer(function (request, response) {
//console.log(request.method+" -> "+request.url); test about the income request
// handle the get request
if(request.method === "GET"){
if(request.url === "/" || request.url === "/main"){
let data = renderHome("./pages/main.pug",{})
response.statusCode = 200;
response.end(data);
}else if(request.url === "/main.js"){
//read main.js file and send it back
fs.readFile("main.js", function(err, data){
if(err){
send500(response);
return;
}
response.statusCode = 200;
response.setHeader("Content-Type", "application/javascript");
response.write(data);
response.end();
});
}else if(request.url === "/main.css"){
//read css file
fs.readFile("main.css", function(err, data){
if(err){
send500(response);
return;
}
response.statusCode = 200;
response.setHeader("Content-Type", "text/css");
response.write(data);
response.end();
});
}else{
send404(response);
return;
}
}
});
//Server listens on port 3000
server.listen(3000);
console.log('Server running at http://127.0.0.1:3000/');

I highly suggest that you use expressjs for better organizing your project and this issue will be gone

Related

How to run a NodeJS file from a url request

I want to run a NodeJS file index.js from url request, whenever I hit this url like localhost:8080 it automatically run the index.js file.
I'm not exactly sure what you are trying to do, but maybe something simple like this?
var yourSuperAwesomeAPI = require('./yourSuperAwesomeAPI.js');
var http = require('http');
http.createServer(function (req, res) {
switch(req.url){
case '/': res.write('website.com'); break;
case '/about_us': res.write('website.com/about_us'); break;
case '/api':
yourSuperAwesomeAPI();
break;
default: res.write('website.com/error_404');
}
res.end();
}).listen(8080);
You can just run it like that. You could also get the url parameters, so you can take input, so you may want to check out the url module for nodejs or you can just google how to get url parameters.
As I said i'm not sure if this is what you want to do, if you want to just return a .js file that is a bit different, but generally pretty similar.
You could use child process module of nodejs to execute any shell commands or scripts within nodejs.
Create an executable bash file like:
myProcess.sh >
node <path-to-file>/index.js
And at your URL handler you can initiate the call like below:
const exec = require('child_process').exec;
var yourscript = exec('sh myProcess.sh',
(error, stdout, stderr) => {
if (error !== null) {
console.log(`exec error: ${error}`);
}
}
)

Saving and loading data in a node.js server and passing it to an html5 file

So I'm very new to node.js and javascript, and i made a server that works great by loading up an html file on request. This html file does not contain any of it's own data, it simply sources from the internet and displays some images and text i wrote. I've decided to make the site play an audio file when it is opened. I know this is done easily with the <audio> tag in html5 but the src="" lets me take a file from the computer and place it there, of course when i open the site from another computer the file obviously isn't found and thus isn't played. I figure the audio file must be kept as a variable on the server and passed into the html file's <audio src= > tag. How do i do this? It is an .mp3(but i can get it to any other audio format) file about 30 seconds long. I just want it to play when the site is loaded from another computer(over the internet). Also how would i go about doing the same with pictures or any other data that i don't want to source from the internet but rather keep as data in my server?
var http = require('http');
var fs = require('fs');
var simpleServer = http.createServer(function(request, response){
response.writeHead(200, {"Content-Type":"text/html"});
fs.readFile('./Picture.html', null, function(error, data){
if(error){
response.writeHead(404);
} else{
response.write(data);
}
response.end();
})
});
simpleServer.listen(80, '0.0.0.0', function() {
console.log('Listening to port: ' + 80);
});
console.log("Server running...");
Short Answer
Bypassing using HTML altogether, you can also simply serve the audio file instead of Picture.html:
fs.readFile("./audiofile.mp3", function(error, data) {
if (error) {
response.writeHead(404);
} else {
response.writeHead(200, { "Content-Type": "audio/mpeg"});
response.end(data, 'utf-8');
}
});
Note:
You will have to replace the filename audiofile.mp3 and the content type audio/mpeg to their appropriate values for the file you want to send.
Check Mozilla's Complete List of MIME Types for a full list of file extensions and their associated content types.
Better Answer:
The http module is fairly low-level and is unnecessarily complicated if you're learning.
You can install express.js to your project using the command npm install express --save.
With express your code simplifies to:
const express = require('express');
const app = express();
const port = 80;
app.get('/', (request, response) => {
response.sendFile(__dirname + '/Picture.html');
});
// Anything put in the public folder is available to the world!
app.use(express.static(__dirname + '/public'));
app.listen(port, () => {
console.log(`Listening on port: ${port}`)
});
Then you just have to place all your files into a folder called "public" under your project directory and you can call them from HTML!

Node.js - update server page

After create the http server and listen to it:
var server = http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/html"});
response.write("<!DOCTYPE "html">");
response.write("<html>");
response.write("<head>");
response.write("<title>Hello World</title>");
response.write("</head>");
response.write("<body>");
response.write("Hello World!");
response.write("</body>");
response.write("</html>");
response.end();
});
server.listen(1337);
now I want to update the page but don't want to exit() the server. How can I do it?
Use Nodemon, it is a utility that will monitor for any changes in your source files and automatically restart your server.
Steps:
Install nodemon globally npm install nodemon -g
Run the server nodemon app.js
This way you do not have to exit the server everytime you update the page/server logic.
As #Pavol Pitonak suggested, you should use multiple files, one for node server boot, second for index page, so when you edit your index.html file - server doesn't need restart.
server.js file
var http = require('http');
var path = require('path');
var fs = require('fs');
var server = http.createServer(function(req, res){
// get path to file we gonna send
var indexFilePath = path.join(__dirname, 'index.html');
// read file contents
fs.readFile(indexFilePath, function(err, contents){
if(err){
// for debugging
console.log(err);
} else {
// send file content
res.end(contents);
}
});
});
server.listen(1337);
index.html file
<!DOCTYPE html>
<html>
<body>
Hello world
</body>
</html>

NodeJS Error EADDRINUSE and HTML file not rendering, instead shows html codes

I'm new kid on the block with NodeJS. Right now im following a basic tutorial of NodeJS, so far so good.
But I have a problem using fs.createReadStream method:.
var http = require("http");
var fs = require("fs");
function fourOHfour(response) {
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("four oh four.....");
response.end();
}
function onRequest (request, response) {
if(request.method == 'GET' && request.url == '/'){
response.writeHead(200, {"Content-Type": "text/plain"});
fs.createReadStream("./index.html").pipe(response);
}
else{
fourOHfour(response);
}
}
http.createServer(onRequest).listen(8888);
console.log("server is running......");
When I go on my browser and type localhost:8888, it should be rendering the index.html file in HTML but the result is wrong, all I get is a bunch of codes of index.html file - plain text.
Meanwhile in my sublime compiler, I've got no error in regards to this case. Until i try to edit my code, whatever I cahnge, it will give me an error like this:
If that thing happen, I cant fix the error unless I restart the laptop, then everything running well again. At least my compiler say that the server is running... Even thought my localhost:8888 still not rendering the HTML file.
You are specifying your content type as: text/plain which means the page will not render in HTML but instead, plain text. This is why you see the "codes" from your HTML file instead of the actual HTML being rendered.
To fix that problem, set the content type to text/html like so:
response.writeHeader(200, {"Content-Type": "text/html"});
In regards to the error you posted, "EADDRINUSE"
EADDRINUSE means that the port number which listen() tries to bind the server to is already in use.
So, in your case, there must be running a server on port 8888 already.
Check for the listening event like this, to see if the server is really listening:
var http=require('http');
var server=http.createServer(function(req,res){
res.end('test');
});
server.on('listening',function(){
console.log('ok, server is running');
});
server.listen(8888);
EADDRINUSE - seems like port is busy by another process or maybe by same nodejs process that don't want to close.
try to kill process:
killall node
about code - try this:
var http = require("http"),
fs = require("fs"),
URL = require('url');
function output(response, body, status) {
status = status || 200;
response.writeHead(status, {"Content-Type": "text/html"});
response.end(body);
}
function fourOHfour(response) {
output(response, 404, "four oh four...");
}
function onRequest (request, response) {
var uri = URL.parse(request.url).pathname; // extractin URI part
var method = request.method || 'GET'; // detecting method otherwise GET
if(method == 'GET' && uri == '/'){
// reading file
fs.readFile(__dirname+'/index.html', function(err, data) {
if(err) { // if error happen, output error
output(response, err, 500);
return;
}
output(response, data); // ouput html body
});
return;
}
fourOHfour(response);
}
var httpServer = http.createServer();
httpServer.on('request', onRequest);
httpServer.listen(8888);
To run Your code in production do following in terminal:
install forever:
sudo npm install -g forever # remove sudo word if You use windows, or You're already root user
start app using forever:
forever start app.js
To run Your code in development environment:
install nodemon:
sudo npm install -g nodemon # remove sudo word if You use windows, or You're already root user
run Your app using nodemon:
nodemon app.js
Forever will keep Your app running and will output logs which You can see using:
forever list # lists running processes
forever logs # shows logs that outputs forever
forever logs 0 # read logs of 0-th process
To restart forever process:
forever restartall # restarts all forever instances
forever restart 0 # restarts first process
To stop:
forever stopall
forever stop 0
About Nodemon: it's a tool that watches changes in Your file and restarts it automatically, no need to stop-start Your app, so that's why I prefer nodemon in dev environment

NodeJS - "This type of response MUST not have a body..."

I've recently ran into a very interesting problem while writing a web app with node.js.
Essentially, all I am doing is serving the index.html page to the client.
Here is the code:
var http = require('http');
var url = require('url');
var fs = require('fs');
var util = require('util');
var server = http.createServer(function(req, res){
var path = url.parse(req.url).pathname;
if(path == '/'){
console.log("LOADING INDEX...");
openIndex(req, res);
console.log("LOADING COMPLETE.")
} else {
res.write("Something went wrong...");
res.end();
}
}
);
var openIndex = function(req, res){
fs.readFile('./index.html', function(error, content){
if(error){
res.writeHead(500);
res.end();
}
else{
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(content, 'utf-8');
}
});
}
I've put some debugging statements just before and after the index.html page loads: "LOADING INDEX..." and "LOADING COMPLETE".
Now, I have shared the link to my server with my Facebook friends so they can see my app. Most of the time, everything works as it should, but once in a while I get this error:
LOADING INDEX...
This type of response MUST NOT have a body. Ignoring data passed to end().
and just now I've also gotten:
LOADING INDEX...
This type of response MUST NOT have a body. Ignoring write() calls.
The process never raches the "LOADING COMPLETE" statement.
I've tried to reproduce this countless times (accessing my app on different machines, browsers, devices, OS-versions) but every time it works as it should.
I've looked around for other people having this problem, and it seems that somehow, a body is getting into a GET response? I'm not entirely sure what this means or how to fix my code to prevent that from happening. Also, I'm not sure what the clients that produce this error see? Do they get to see my app? (i.e. are these just warnings and as far as they are concerned everything is fine?)
Any help with this will be greatly appreciated.
Xaan
If you're just using a static index.html, why not use express.static to serve it automatically?
app.use("/index.html", express.static(__dirname + '/index.html'));
This would cause expressjs to automatically handle HEAD requests, which should solve your problem.

Categories

Resources