I have just created a nodejs application(that uses expressjs and jade). I tried to implement jQuery but noticed it wasn't working. I then tried a simple test creating a javascript file with a simple function and call it from my view. For some reason I get a ReferenceError exception.
The browser does not complain that the Js file is missing, however it doesn't appear in the source list.
This is the code from the simple javascript file(The alert also doesn't work)
//index.js
alert('foo');
function foo(){
alert('javascript!!');
};
Here is the code of the app.js file:
var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
// Database setup
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/myApplication');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// Make our db accessible to our router
app.use(function(req,res,next){
req.db = db;
next();
});
app.use('/', routes);
app.use('/users', users);
/// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
and this the code of my view
doctype html
html
head
title My Application
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/style-desktop.css')
link(rel='stylesheet', href='/stylesheets/jquery-ui-1.10.4.min.css')
link(rel='stylesheet', href='/stylesheets/style-desktop.css')
link(rel='stylesheet', href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css')
//script(type='text/javascript' href='/javascripts/jquery-1.10.2.js')
//script(type='text/javascript' href='/javascripts/jquery-ui-1.10.4.min.js')
script(type='text/javascript' href='/javascripts/index.js')
script(type='text/javascript').
foo();
/*
$(function() {
console.log('test');
alert('foo');
});
*/
body.homepage
div#tabs
ul
li
a(href="#tabs-1") Nunc tincidunt
li
a(href="#tabs-1") Nunc tincidunt
li
a(href="#tabs-1") Nunc tincidunt
div#tabs-1
p LOL
div#tabs-2
p LOL2
div#tabs-3
p LOL3
This is a screenshot of the sources and console in chrome. Please note that if I click on the url of the javascript file in the elements tab It directs me to the file. So the path appears to be correct.
This is a screenshot of my file structure
As jedigo said in the comments, the issue was that I used "href" instead of "src" to refer to my javascript files which caused the issue.
Silly mistake from my part
Related
As the title says, I've been working at this for about 3 hours trying to figure out why the POST body for this is always undefined - no matter what I do. Could anyone look at my JADE/JS and help me figure out my issue?
JADE
doctype html
html(lang="en" ng-app)
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1")
// The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags
meta(name="description", content="")
meta(name="author", content="")
link(rel="icon", href="favicon.ico")
title Signin Template for Bootstrap
// Bootstrap core CSS
link(href="css/bootstrap.min.css", rel="stylesheet")
// Custom styles for this template
link(href="css/signin.css", rel="stylesheet")
// Just for debugging purposes. Don't actually copy these 2 lines!
//if lt IE 9
script(src="assets/js/ie8-responsive-file-warning.js")
// <script src="assets/js/ie-emulation-modes-warning.js"></script>
// HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
//if lt IE 9
script(src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js")
script(src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js")
body
.container
form.form-signin(method="post", action="/")
h2.form-signin-heading(style="text-align:center;") Please sign in
label.sr-only(for="inputEmail") Student ID
input#inputID.form-control(type="text", name="userID", placeholder="User ID", required="", autofocus="")
label.sr-only(for="inputPassword") PIN:
input#inputPIN.form-control(type="password", name="userPIN", placeholder="Password", required="")
button.btn.btn-lg.btn-primary.btn-block(type="submit") Sign in
// /container
// IE10 viewport hack for Surface/desktop Windows 8 bug
script(src="assets/js/ie10-viewport-bug-workaround.js")
//AngularJS CDN
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js")
server.js
//Add necessary dependencies (Express and MongoJS)
var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('advisingApp',['advisingApp']); //sets the database for the project
//Test to make sure server is properly configured
/*app.get('/', function (request, response) {
response.send("Hello world from server.js!");
});*/
//Tell web app where to look for "static" files in directory - (it's looking in the default parent directory)
app.use(express.static(__dirname));
// app.get("/", function (request, response) {
// console.log("GET Request Received")
// db.advisingApp.find(function (err, docs) {
// console.log(docs);
// response.json(docs);
// });
// });
app.post("/", function (req, res) {
console.log("POST Request Received");
console.log(req.body);
});
app.listen(3000);
console.log("Server running smoothly on port 3000");
try this
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
//var mongoose=require('mongoose');
//mongoose.connect('mongodb://localhost/test');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.get("/",function(req,res){
res.render('view'); //i named ur given jade as view.jade
})
app.post("/", function (req, res) {
console.log("POST Request Received");
console.log(req.body);
});
// app.use('/', routes);
// app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
//
app.listen('3000',console.log('listening'));
// module.exports = app;
// this is app.js which is the main application file
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var api = require('./routes/api');``
//var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// app.use('/', routes);
app.use('/api', api);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
and this is api.js which implements the RESTful API.Post is a resource and because of this we will implement a /posts API which will First we'll implement placeholder route handlers for the /posts api within api.js.
var express = require('express');
var router = express.Router();
//api for all posts
router.route('/posts')
//create a new post
.post(function(req, res){
//TODO create a new post in the database
res.json({message:"TODO create a new post in the database"});
})
.get(function(req, res){
//TODO get all the posts in the database
res.json({message:"TODO get all the posts in the database"});
})
module.exports = router;
i am getting this on postman
You should be going to
http://localhost:3000/api/posts
Not
http://localhost:3000/routes/api/posts
..
Edit:
I didn't realize you're trying to call
req.send
Well that is not a method of
req (request)
You're looking for
res (response)
And on top of that you're trying to send a json result, not plain text so use
res.json
Instead of
res.send
I don't see you starting the server with app.listen(3000). You merely export the express app.
Or is there a different module that spins up the server?
I used the Express generator to generate an express 4 application. Once I did that I replaced the jade templating engine with ejs. I am now trying to add a new route at /players. When I try and navigate to myapp/players I am receiving this error :
Error: Failed to lookup view "error" in views directory "/home/fk/d/e/goose/views"
at EventEmitter.app.render (/home/fk/d/e/goose/node_modules/express/lib/application.js:555:17)
at ServerResponse.res.render (/home/fk/d/e/goose/node_modules/express/lib/response.js:938:7)
at module.exports (/home/fk/d/e/goose/app.js:65:7)
at Layer.handle_error (/home/fk/d/e/goose/node_modules/express/lib/router/layer.js:58:5)
at trim_prefix (/home/fk/d/e/goose/node_modules/express/lib/router/index.js:300:13)
at /home/fk/d/e/goose/node_modules/express/lib/router/index.js:270:7
at Function.proto.process_params (/home/fk/d/e/goose/node_modules/express/lib/router/index.js:321:12)
at IncomingMessage.next (/home/fk/d/e/goose/node_modules/express/lib/router/index.js:261:10)
at fn (/home/fk/d/e/goose/node_modules/express/lib/response.js:933:25)
at EventEmitter.app.render (/home/fk/d/e/goose/node_modules/express/lib/application.js:557:14)
My file structure is
|Myapp"goose"
-bin
-config
-node modules
-public
-routes
--index.js
--users.js
--players.js
-views
--index.ejs
--users.ejs
--players.ejs
--error.ejs
-app.js
-package.json
Here is the code contained in my app.js:
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var routes = require('./routes/index');
var users = require('./routes/users');
var players = require('./routes/players');
var app = express();
var configDB = require('./config/database.js');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
app.use('/players', players);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
Here is the code for my routes/players.js
var express = require('express');
var router = express.Router();
/* GET players page. */
router.get('/players', function(req, res, next) {
res.render('players', { title: 'Players' });
});
module.exports = router;
My index view is currently still working fine. Thank you for your help in advance and please let me know if there is any more information I can provide that would be of assistance.
**EDIT 1: ** I have added an error.ejs file which is reflected above in the file structure. I believe what was causing all the error messages above was my application was trying to render the error.ejs when I was navigating to /players. Now when I am trying to navigate to /players I am being redirected to the new error.ejs view.
Edit 2: This problem has been solved. Please look at user Jonathan Lonowski's answer below for a detailed explanation. Thank you Johnathon.
The initial issue is that requesting GET /players will result in a 404 Not Found.
This is because the route is defined as GET /players/players since Express combines the .use() and router paths:
app.use('/foo', fooRouter);
// GET /foo/bar
fooRouter.get('/bar', ...);
When specifying a "prefix" with .use(), you can define routes for the "root" of that prefix in the router:
// GET /players = /players + /
router.get('/', ...);
So, I'm new to Javascript (and coding in general). To suppliment my education on Javascript, I thought I'd fool around with Node.js. Thinking I'd need a project I thought that I'd try to make a Dungeons & Dragons character creator. There are some out there already, but I'm needing a project, right?
So I made a form that takes the character name, and then instead of putting it to the console and/or displaying it on the page, I get a 404. I must be botching something simple here, so after a couple hours of trying to figure out what has to be a simple thing by myself and doing lots of search engine work, I thought I'd take it to the community.
Right now I have the base framework that you get from:
express --css myapp
Nothing fancy added. Here is my app.js (note the final lines with app.post:
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
app.post('/', function(req, res) {
console.log(req.body);
console.log('Character: ' + req.body.charactername);
res.send('Character Name: ' + req.body.charactername);
});
And finally, my jade file with the form.
extends layout
block content
h1= title
p Welcome to #{title}
form(method='post',action='/')
input(type='text',name='charactername')
input(type='submit')
Like I said, it is certainly something simple, but it's been driving me nuts and I can't seem to find that one document, webpage, howto, or tutorial that explains what I'm doing wrong here.
app.post('/', function(req, res) {}); is after your 404 error handling route. Move it so that it is before:
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
This will work as long as there is nothing conflicting in your other routes (app.use('/', routes)).
I am using angular ui router. The router seems to work perfect on the home page index.html. But any other navigation doesn't work.
Here is my stateprovider angular:
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home", {
url: "/",
templateUrl: "../partials/home/index.html"
})
.state("login", {
url:"/login",
templateUrl: "../partials/account/login.html"
})
.state("register", {
url: "/register",
templateUrl: "../partials/account/register.html"
})
.state("values", {
url: "/values",
templateUrl: "../partials/test/values.html"
})
;
});
HTML in my main index.html:
<!--Content -->
<div class="container">
<div ui-view></div>
</div>
<!-- END Content -->
When I navigate the the page localhost:8080/login I get this:
I would think I shouldn't even be seeing this page if it can't find it. Shouldn't it redirect me back to "/" because of $urlRouterProvider.otherwise(). Besides that point though the template url /partials/account/login.html Does Exist.
I am somewhat new to node.js and I am curious if the note file server is trying to route and trumping my angular one? I am using http-server which is probably the most common one.
I am also using Express Node if that helps. And here is the code for app.js where I think the problem may be coming from:
var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
/// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
I figured it out. Doing the below made it work.
app.use(function(req, res) {
// Use res.sendfile, as it streams instead of reading the file into memory.
res.sendfile(__dirname + '/public/index.html');
});
The entire app.js incase anyone is curious where it goes.
var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(function(req, res) {
// Use res.sendfile, as it streams instead of reading the file into memory.
res.sendfile(__dirname + '/public/index.html');
});
app.use('/', routes);
/// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
Of course this will need to be in your angular code:
app.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
One thing to note that got me. You must restart the server for this to work. ctr+c then paste this code then restart server. Good luck
have you tried using the same directory for your partials :
moving partials/account/login.html" to partials/home/login.html"
Also, are you using your own server.js express configuration, or a yeoman fullstack ?
angular is clearly handling the routing, but it seems that nodejs is not finding the assets...
Be sure to have a specific task for serving partial files in your server.js
function serve_partial(req,res){
var stripped = req.url.split('.')[0];
var requestedView = path.join('./', stripped);
res.render(requestedView, function(err, html) {
if(err) {
res.render('404');
} else {
res.send(html);
}
});
}
function serve_index(req,res){
res.render('index');
}
// Angular Routes
app.get('/partials/*', serve_partial);
app.get('/*', serve_index);
for your case, it might me something as :
var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
function serve_partial(req,res){
var stripped = req.url.split('.')[0];
var requestedView = path.join('./', stripped);
res.render(requestedView, function(err, html) {
if(err) {
res.render('404');
} else {
res.send(html);
}
});
}
app.use('/partials/*', serve_partial);
app.use('/', routes);
app.use('/users', users);
/// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
As i see you request to your node api which there isnt any route like /login and you get 404.
You should try localhost:8080/#/login