Error Loading Stylesheets in Express 3.x - node.js

So I'm having an problem loading my stylesheets in my express project. When I was using express 2.5.8 my styles were being loaded correctly, but when I updated to 3.x the styles started failing to load. The views get rendered but without any styles.
I'm using node, express 3.x, jade, and bootstrap. My styles are in public/stylesheets/*.
UPDATE: It seems that for some reason layout.jade isn't being rendered.
Here' my server.js
require('coffee-script');
/**
* Module dependencies.
*/
var express = require('express'),
flash = require('connect-flash');
var app = module.exports = express.createServer();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.set('port', 3000);
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(flash());
app.use(require('connect-assets')());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.configure('development', function(){
app.use(express.errorHandler({
dumpExceptions: true,
showStack: true
}));
});
app.configure('test', function () {
app.set('port', 3001);
});
app.configure('production', function(){
app.use(express.errorHandler());
});
// Routes
require('./apps/landing-page/routes')(app);
require('./apps/authentication/routes')(app);
require('./apps/home/routes')(app);
require('./apps/register/routes')(app);
app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.settings.port, app.settings.env);
Here's my main layout.jade view:
!!!
html
head
title= title
script(src='http://code.jquery.com/jquery-latest.js')
link(rel='stylesheet', href='/stylesheets/bootstrap.css')
link(rel='stylesheet', media='screen', href='/stylesheets/bootstrap-responsive.css')
link(rel='stylesheet', href='/stylesheets/app.css')
script(src='javascripts/bootstrap.js')
| <!--[if lt IE 9]>
| <link rel="stylesheet" href="stylesheets/ie.css">
| <![endif]-->
| <!-- IE Fix for HTML5 Tags -->
| <!--[if lt IE 9]>
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
| <![endif]-->
body
!=body
script(src='javascripts/app.js')
And here's one of my routes:
routes = (app) ->
app.get '/home', (req, res) ->
res.render "#{__dirname}/views/home",
title: 'Home | SiteName'
stylesheet: 'home'
module.exports = routes

I believe that layout rendering was set to false per default in Express 3, so try and add following to your configuration:
app.set('view options', { layout: true });
Update: The migration guide state that the concept of layouts and partials have been removed altogether. Instead, use Jade's template inheritance.
/views/layout
!!! 5
head
// all your header elements
body
block content
/views/home
Add the following at the top:
extends layout
block content
// the stuff you want to have in your content block
For more info, take a look at this guide.

app.use(express.static(__dirname + '/public'));
must be before
app.use(app.router);

Related

loading jade template through angular

I am working on a single page web app, and I wanted to load in jade views with my angular template but I am struggling to wrap my head exactly how to do so.
Here is my angular template:
index.html
<!doctype html>
<html ng-app="test">
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="/javascripts/app2.js"></script>
</head>
<body>
<p> Hello </p>
<div>
<div ng-view></div>
</div>
</body>
</html>
I made a controller for my angular template: navigation.js
angular.module('test', [])
.config(viewRouter);
function viewRouter ($routeProvider){
$routeProvider
.when('/', {templateURL: 'views/index.jade'});
}
Here I am trying to use a jade template to render onto the page, but it does not seem to be working.
I have a view jade templates,
index.jade
extends layout
block content
h1= title
include partials/menu
.views-wrapper
include partials/login
layout.jade:
doctype
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
script(src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
script(src='/javascripts/navigation.js')
menu.jade:
ul
li.a VIEW A
li.b VIEW B
li.c VIEW C
li.l VIEW LOGIN2
I also have a view simple templates (named a.jade, b.jade, and c.jade) which just have simple headers displaying a name as a test to see if the routing works. I am struggling to get these templates to connect, I can't seem to wrap my head around, nor find an answer as to how I can display my jade views through my angular template. Before I was not using an angular template, but decided to use one in order to deal with URL more easily.
this is my app.js on my server side:
/**
* Module dependencies.
*/
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
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.use(express.cookieParser('cookies monster')); // Cookie secret
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.set('public', path.join(__dirname, 'public'));
/*
* Views
*/
//app.get('/', routes.index);
app.get('/', function(req, res, next){
return res.sendfile(app.get('public') + '/index.html');
});
app.get('/users', user.list);
app.get('/a', routes.a);
app.get('/b', routes.b);
app.get('/c', routes.c);
app.get('/login2', routes.login2);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
and this is a routes controller that I had to render the views before I decided to use angular
index.js:
exports.index = function(req, res){
res.render('index', { title: 'New Test' });
};
// View A
exports.a = function(req, res) {
res.render('partials/a', { layout: false, test: 'a' });
};
// View B
exports.b = function(req, res) {
res.render('partials/b', { layout: false, test: 'b' });
};
exports.c = function(req, res) {
res.render('partials/c', { layout: false, test: 'c' });
};
exports.login2 = function(req, res) {
res.render('partials/login2', { layout: false, test: 'login2' });
};
I know this is a lot of code to look at, but I would really appreciate any help.
Check my answer on stackoverflow about using AngularJS seed for working with Jade, it can help you with your question.

Angular.js and Express: Routing is not working

I've scoured the internet for somebody with a similar problem, but still no solutions. In comparing my app to Angular-Express-seed, Angular-Express-Master, and any of the other popular examples out there, nothing appears to be broken, yet it just doesn't work. Does anybody have a ideas of why this may be?
I'll try to spare detail without removing what may be the problematic bit of code:
/app.js
// All environments
app.set('views', __dirname + '/views');
app.set('port', process.env.PORT || 3000);
app.engine('.html', require('ejs').renderFile);
app.set('view engine', 'html');
app.set("view options", { layout: false });
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(express.session(
{ secret: 'spunkydelicious',
cookie : {
maxAge: (3600000*24*7) // 1 week
}
}
));
app.use(passport.initialize());
app.use(passport.session());
app.use(require('express-jquery')('/jquery.js'));
app.use(express.static(path.join(__dirname, '/public')));
app.use(app.router);
...
app.get('/', index.index);
app.get('/partials/:name', index.partials);
app.get('*', index.index);
where the 'index' of index.index, index.partials, etc. corresponds to this:
/app/controllers/index.js
exports.index = function(req, res){
res.render('index');
};
exports.partials = function(req, res) {
var name = req.params.name;
console.log('Hurah!');
res.render('partials/' + name);
};
/public/javascripts/app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('emit', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when( '/', {
templateURL:'partials/test',
controller: AppCtrl
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
/public/javascripts/controllers.js
'use strict';
/* Controllers */
function AppCtrl($scope) {
console.log('123');
}
/views/index.html
<!DOCTYPE html>
<html ng-app="emit">
<head>
<base href="/">
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div ng-view></div>
<!-- Plugins -->
<script src="/javascripts/vendor/angular/angular.js"></script>
<!-- Angular -->
<script src="/javascripts/app.js"></script>
<script src="/javascripts/controllers.js"></script>
<!-- Other scripts -->
**strong text** <script src="/javascripts/script.js"></script>
</body>
</html>
/views/partials/test.html
<div class="">Yay!</div>
Pardon the length of the code, I just can't crack what I'm doing wrong. No errors are logged by the server of the client console. Any debugging steps I could take?
After very long and confusing debug session I've figured this out... Surprisingly, the error is in templateURL - it should be templateUrl.

Maximum call stack size exceeded when adding a footer to my Jade template

Ok, this is kind of wierd but here's the situation.
I'm playing about with Express and the Jade tempting system.
I have a fairly straightforward layout.jade file:
doctype 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
h1 Nav goes here!
body
block content
and a home.jade file:
extends layout
block content
h1= title
p Welcome to #{title}
The above combinations works fine.
But, i wanted to add a footer, so I created a foot.jade file:
extends layout
block foot
h1= me
And added include foot to my layout.jade file.
Now if I try to access the home page of my app, im getting a Maximum call stack size exceedederror :/
My app.js file is:
/**
* Module dependencies.
*/
var express = require('express')
, home = require('./routes/home')
, http = require('http')
, path = require('path');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('your secret here'));
app.use(express.session());
app.use(app.router);
app.use(require('stylus').middleware(__dirname + '/public'));
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', function(req, res) {
res.render('home', {title: 'Ninja Store'});
});
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
foot.jade uses extends layout, which loads layout.jade, which has an include for foot.jade, which uses extends layout, which loads layout.jade, ...
In other words: remove extends layout from foot.jade ;)

layout.ejs not rendered - Node.js, Express

I am trying to execute a simple example of node.js with EJS templates. Node, or rather express is unable to render the index page, as in the following code, with layout.ejs, no matter what I do.
Here's the app.js
var express = require('express')
, routes = require('./routes')
, http = require('http');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 8001);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view options', {layout: 'views/layout.ejs'});
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', routes.index);
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
layout.ejs
<!DOCTYPE html>
<html>
<head> <title><%= title %></title> </head>
<body> <%- body %> </body>
</html>
And in index.ejs, it's just this
<p> Some Text </p>
Have I missed something here?
app.set('view options', { layout:'layout.ejs' });
remove the views/ and it should work.

nodejs express unknown method render

after creating a plain vanilla express application, I have this default app.js:
var express = require('express');
var app = module.exports = express.createServer();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(express.session({ secret: 'your secret here' }));
app.use(app.router);
app.use(express.static(__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', { title: 'Foo' }) // 34:7 is the .render
});
app.listen(3000, function(){
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
});
However I keep getting this stacktrace:
500 SyntaxError: Unexpected identifier
...
at C:\Users\...\app.js:34:7
that is right before the render method of the '/' route
layout.jade looks like this:
!!!
html(lang='de')
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='shortcut icon' type='image/png' href='/images/favicon.png')
script(src='/javascripts/jquery-1.7.1.min.js' type='text/javascript' charset='utf-8')
#header!= partial('header.jade')
body!= body
#footer!= partial('footer.jade')
and index.jade looks like this:
#body
#nav
a(href='/login') anmelden
What am I missing?
Try change this:
link(rel='shortcut icon' type='image/png' href='/images/favicon.png')
script(src='/javascripts/jquery-1.7.1.min.js' type='text/javascript' charset='utf-8')
to this:
link(rel='shortcut icon', type='image/png', href='/images/favicon.png')
script(src='/javascripts/jquery-1.7.1.min.js', type='text/javascript', charset='utf-8')
Look the commas!

Resources