Index.html instead of client stuff on server side - javascript

How can I get index.html for my app's client side?
The index page is defined in server.js like this
// load css styles
var css = '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> ';
css = css + '<style type="text/css">' +require('fs').readFileSync('./style.css').toString() + '</style>'
http.createServer(function (req, res) {
// send basic http headers to client
res.writeHead(200, {
"Content-Type": "text/html",
"Transfer-Encoding": "chunked"
});
// setup simple html page:
res.write("<html>\n<head>\n<title>Newsfeed</title>\n" +css +"</head>\n<body>");
But I want to get an index.html so I can use plain HTML for front-end.

This would explain the long.
Short answer is, you separate view, and use express middlewer for routing.
You must set view location:
app.set('views', __dirname + '/yourViewDirectory');
Put your index.html into /views folder
Then you can use res.render function:
res.render('index.html');
This is the base express server, which render index.html on localhost:3000/
var express = require('express');
var app = express();
app.set('views', __dirname + '/yourViewDirectory');
app.get('/', function (req, res) {
res.render('index.html');
});
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});

Related

Using socket.io and express, why isn't my io.on('connection') method working

I'm trying to teach myself socket.io and node.js by following this tutorial: https://www.youtube.com/watch?v=tzNOqcoupWQ
This is the code that's written by the end of the turotial:
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const path = require('path');
const port = process.env.Port || 3000;
app.use(express.static(path.join(__dirname, 'public')));
app.set('view engine', 'ejs');
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
})
server.listen(port, function(){
console.log('Listening on port ' + port);
io.on('connection', function(socket){
console.log('User Connected! :)');
//handle a new message
socket.on('new:message', function(msgObj){
io.emit('new:message', msgObj);
});
//handle a new member joining
socket.on('new:member', function(name){
io.emit('new:member', name);
});
})
});
The problem is, it seems the io.on('connection' method isn't going through and the "User connected!" message isn't being printed out to the console, yet my index.html loads up just fine (it's just a simple header for now).
What can I do to solve this?
[EDIT]
Here's the index.html
<h1>Hello, World!</h1>
You might need to include the client side socket. i.e add the below code in your html file being served.
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
Integrating Socket.IO in the documentation is a good place to start.

passing html through js using fs.readFileSync and buf.toString

hi i'm trying to push code from my html file into my javascript file using buffers, toString, and readFileSync. I have a javacript file named index.js and a html file named index.html. This is the error on my site :
https://secret-ocean-5221.herokuapp.com/
This is my JS:
var fs = require('fs');
var app = express();
app.set('port', (process.env.PORT || 5000));
app.use(fs.static(__dirname + '/public'));
app.get('/', function(request, response) {
var buf = new Buffer(fs.readFileSync("index.html"), "utf-8");
response.send(buf.toString);
});
app.listen(app.get('port'), function() {
console.log("Node app is running at localhost:" + app.get('port'));
});
my HTML simply says:
Welcome to my site.
You are not calling the toString method, only passing it in. Change to:
response.send(buf.toString());
Also, static is a property of express, not fs.
app.use(express.static(__dirname + '/public'));
With that, assuming your index.html file is in public, you don't need the fs.readFileSync at all.
It would also be more idiomatic to call readFile and use the node callback so it is non-blocking.
app.get('/', function(request, response, next) {
fs.readFile("index.html", function (err, fileBuffer) {
if (err) {
return next(err); // Tell express to handle errors
}
response.send(fileBuffer.toString());
});
});
I found the problem.
(1) I did not push my html file into my github repo
(2) My code was wrong here is the right code :
var express = require('express');
var fs = require('fs');
var app = express();
app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));
app.get('/', function(request, response) {
fs.readFile('index.html', function(err, data){
response.send(data.toString());
});
});
app.listen(app.get('port'), function() {
console.log("Node app is running at localhost:" + app.get('port'));
});

Node + Express with static HTML. How to route all requests to index.html?

I am working on a single page web app using Node + Express and Handlebars for templating. Everything currently works well from index.html, which is served from a pretty standard server.js file:
var express = require('express');
var server = express();
server.use(express.static(__dirname + '/public'));
var port = 10001;
server.listen(port, function() {
console.log('server listening on port ' + port);
});
This works perfectly when loading from http://localhost:10001/. My issue is that I'm using push states in the app, so the browser may show a URL like http://localhost:10001/foo/bar and then if I refresh the page, I get the error Cannot GET /foo/bar since there is no route for this.
So my question, and pardon my incredible noobishness when it comes to Node, can I make it so all requests route to index.html? The JavaScript in my app can handle showing the right content based on URL params on page load. I don't want to define custom routes as the number would be large, and the paths for them can change dynamically.
const express = require('express')
const server = express()
/* route requests for static files to appropriate directory */
server.use('/public', express.static(__dirname + '/static-files-dir'))
/* other routes defined before catch-all */
server.get('/some-route', (req, res) => {
res.send('ok')
})
/* final catch-all route to index.html defined last */
server.get('/*', (req, res) => {
res.sendFile(__dirname + '/index.html');
})
const port = 8000;
server.listen(port, function() {
console.log('server listening on port ' + port)
})
This pattern will serve static assets before hitting the catch-all route that serves up your front-end application. To register any additional routes, just add them above the catch-all route.
var express = require('express');
var server = express();
// middleware
server.use(express.static(__dirname + '/public'));
// routes
server.use('*', function (req, res) {
// serve file
});
var port = 10001;
server.listen(port, function() {
console.log('server listening on port ' + port);
});
This short thing works well:
import express from "express";
const app = express(),
staticServe = express.static(`${ __dirname }/public`);
app.use("/", staticServe);
app.use("*", staticServe);
Just make sure that all URLs from your HTML/JS files are absolute now, as all resources that do not exist will return index.html file.
Express v 4.15.2
var app = express();
var options = {
dotfiles: 'ignore',
etag: true,
extensions: ['htm', 'html'],
index: 'index.html',
lastModified: true,
maxAge: '1d',
setHeaders: function (res, path, stat) {
res.set('x-timestamp', Date.now());
res.header('Cache-Control', 'public, max-age=1d');
}
};
app.use(compression());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(methodOverride());
app.use('/', express.static(__dirname + '/public', options));
app.use('*', express.static(__dirname + '/public', options));
var express = require('express');
var server = express();
server.use(express.static(__dirname + '/public'));
server.get('*', function(req, res){
res.sendFile('index.html');
});
var port = 10001;
server.listen(port, function() {
console.log('server listening on port ' + port);
});

where to define database logic in express?

I am using express node js for my redirection project.I am just beginner in express node js.
I don't know where to define my database logic.
Aim:- Getting the url from database and redirect to that url.
my directory structure:-
app.js
controller
---------index.js
node_modules
package.json
public
------images
------stylesheet
------javascripts
routes
-----index.js
views
app.js
var express = require('express')
, http = require('http')
, mysql = require('mysql')
, path = require('path');
var app = express();
var controller = require('./controller')({app: app});
// all environments
app.configure(function() {
app.set('port', process.env.PORT || 8888);
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.set('view engine', 'jade');
app.set('views', __dirname + '/views');
app.use(app.router);
app.get('/', function( req, res) {
res.render('index');
});
});
//connect to mysql database
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'xxxxx',
database : 'nodejsmysql'
});
connection.connect();
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
controller
function controller(param)
{
var app = param.app;
app.get('/id', function(request, response) {
var id= request.param("id");
// i need to use this id to fetch corresponding url from database and redirect that url.
});
}
module.exports = controller;
database query:- select url from db where id='id';
Typically you create Models to handle database logic. The general pattern is
app.js - list all your routes
routesX.js - handles code for routes (say /x/whatever). This is where you evaluate HTTP values like querystring, cookies, and form data. Renders the view after calling the model.
modelsX.js - handles the domain logic for the routes (including database access)
So for example in a routesX.js you might have something like this:
var blogModel = require('./modelsX.js');
exports.blogAll = function(req, res) {
blogModel.getAll(function(data) {
res.render('someView', data);
});
}
and in your modelsX.js you might have something like this:
exports.getAll = function(callback) {
// get data from the database here
// and call the callback
callback()
}
If you want to see a full end-to-end example, check out this repo: https://github.com/hectorcorrea/hectorcorrea.com/blob/master/routes/blogRoutes.js

NodeJS: How to get the server's port?

You often see example hello world code for Node that creates an Http Server, starts listening on a port, then followed by something along the lines of:
console.log('Server is listening on port 8000');
But ideally you'd want this instead:
console.log('Server is listening on port ' + server.port);
How do I retrieve the port the server is currently listening on without storing the number in a variable prior to calling server.listen()?
I've seen this done before but I can't find it in the Node documentation. Maybe it's something specific to express?
Express 4.x answer:
Express 4.x (per Tien Do's answer below), now treats app.listen() as an asynchronous operation, so listener.address() will only return data inside of app.listen()'s callback:
var app = require('express')();
var listener = app.listen(8888, function(){
console.log('Listening on port ' + listener.address().port); //Listening on port 8888
});
Express 3 answer:
I think you are looking for this(express specific?):
console.log("Express server listening on port %d", app.address().port)
You might have seen this(bottom line), when you create directory structure from express command:
alfred#alfred-laptop:~/node$ express test4
create : test4
create : test4/app.js
create : test4/public/images
create : test4/public/javascripts
create : test4/logs
create : test4/pids
create : test4/public/stylesheets
create : test4/public/stylesheets/style.less
create : test4/views/partials
create : test4/views/layout.jade
create : test4/views/index.jade
create : test4/test
create : test4/test/app.test.js
alfred#alfred-laptop:~/node$ cat test4/app.js
/**
* Module dependencies.
*/
var express = require('express');
var app = module.exports = express.createServer();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.use(express.bodyDecoder());
app.use(express.methodOverride());
app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));
app.use(app.router);
app.use(express.staticProvider(__dirname + '/public'));
});
app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
// Routes
app.get('/', function(req, res){
res.render('index.jade', {
locals: {
title: 'Express'
}
});
});
// Only listen on $ node app.js
if (!module.parent) {
app.listen(3000);
console.log("Express server listening on port %d", app.address().port)
}
In express v3.0,
/* No longer valid */
var app = express.createServer();
app.listen();
console.log('Server running on %s', app.address().port);
no longer works! For Express v3.0, you should create an app and a server this way:
var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app);
app.get('/', function(req, res) {
res.send("Hello World!");
});
server.listen(3000);
console.log('Express server started on port %s', server.address().port);
I ran in to this issue myself and wanted to document the new syntax. This and other changes in Express v3.0 are visible at https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x
In case when you need a port at the time of request handling and app is not available, you can use this:
request.socket.localPort
In the current version (v0.5.0-pre) the port seems to be available as a property on the server object, see http://nodejs.org/docs/v0.4.7/api/net.html#server.address
var server = http.createServer(function(req, res) {
...
}
server.listen(8088);
console.log(server.address());
console.log(server.address().address);
console.log(server.address().port);
outputs
{ address: '0.0.0.0', port: 8088 }
0.0.0.0
8088
I use this way Express 4:
app.listen(1337, function(){
console.log('Express listening on port', this.address().port);
});
By using this I don't need to use a separate variable for the listener/server.
If you're using express, you can get it from the request object:
req.app.settings.port // => 8080 or whatever your app is listening at.
Requiring the http module was never necessary.
An additional import of http is not necessary in Express 3 or 4. Assigning the result of listen() is enough.
var server = require('express')();
server.get('/', function(req, res) {
res.send("Hello Foo!");
});
var listener = server.listen(3000);
console.log('Your friendly Express server, listening on port %s', listener.address().port);
// Your friendly Express server, listening on port 3000
Again, this is tested in Express 3.5.1 & 4.0.0. Importing http was never necessary. The listen method returns an http server object.
https://github.com/visionmedia/express/blob/master/lib/application.js#L531
req.headers.host.split(':')[1]
If you did not define the port number and you want to know on which port it is running.
let http = require('http');
let _http = http.createServer((req, res) => {
res.writeHead(200);
res.end('Hello..!')
}).listen();
console.log(_http.address().port);
FYI, every time it will run in a different port.
With latest node.js (v0.3.8-pre): I checked the documentation, inspected the server instance returned by http.createServer(), and read the source code of server.listen()...
Sadly, the port is only stored temporarily as a local variable and ends up as an argument in a call to process.binding('net').bind() which is a native method. I did not look further.
It seems that there is no better way than keeping a reference to the port value that you provided to server.listen().
The simplest way to convert from the old style to the new (Express 3.x) style is like this:
var server = app.listen(8080);
console.log('Listening on port: ' + server.address().port);
Pre 3.x it works like this:
/* This no longer works */
app.listen(8080);
console.log('Listening on port: ' + app.address().port);
You can get the port number by using server.address().port
like in below code:
var http = require('http');
var serverFunction = function (req, res) {
if (req.url == '/') {
console.log('get method');
res.writeHead(200, { 'content-type': 'text/plain' });
res.end('Hello World');
}
}
var server = http.createServer(serverFunction);
server.listen(3002, function () {
console.log('server is listening on port:', server.address().port);
});
var express = require('express');
var app = express();
app.set('port', Config.port || 8881);
var server = app.listen(app.get('port'), function() {
console.log('Express server listening on port ' + server.address().port);
});
Express server listening on port 8881
I was asking myself this question too, then I came Express 4.x guide page to see this sample:
var server = app.listen(3000, function() {
console.log('Listening on port %d', server.address().port);
});
The findandbind npm addresses this for express/restify/connect: https://github.com/gyllstromk/node-find-and-bind
const express = require('express');
const morgan = require('morgan')
const PORT = 3000;
morgan.token('port', (req) => {
return req.app.locals.port;
});
const app = express();
app.locals.port = PORT;
app.use(morgan(':method :url :port'))
app.get('/app', function(req, res) {
res.send("Hello world from server");
});
app1.listen(PORT);
You might be looking for process.env.PORT. This allows you to dynamically set the listening port using what are called "environment variables". The Node.js code would look like this:
const port = process.env.PORT || 3000;
app.listen(port, () => {console.log(`Listening on port ${port}...`)});
You can even manually set the dynamic variable in the terminal using export PORT=5000, or whatever port you want.
express v4+
const app = require("express")();
app.listen( 5555, function() {
console.log( this.address().port )
})
The easier way is just to call app.get('url'), which gives you the protocol, sub domain, domain, and port.

Categories

Resources