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.
Related
For some reason it can't load my index.js script that is being referenced from my index.html. server.js, index.html, and index.js are all located at the root of my project folder.
server.js
var express = require('express'),
app = express();
app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));
app.set('views', __dirname + '/');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.get('/', function (req, res) {
res.render('index.html');
});
app.listen(4000, function () {
console.log('Example app listening on port 4000!');
});
index.html
<html>
</head></head>
<body>
<div class="ink-grid vertical-space">
<div id="content">
<div class="panel vertical-space">
<div id="app"/>
</div>
</div>
</div>
<script type="text/babel" src="index.js"></script>
</body>
</html>
You have to serve those files. You could do them individually:
app.get('/index.js', function (req, res) {
res.sendFile('index.js');
});
Or create a directory (e.g. www) for everything you want to serve and use express.static:
app.use(express.static('www'));
By looking declaration
app.use(express.static(__dirname + '/public'));
Your index.js file should be in the public directory.
Since index.js and server.js are in the same directory, define
app.use(express.static(.));
I know this post is a kinda dupplicate,
but I can't find out where I'm wrong.
/// my app.js //
var express = require('express'),
app = express();
app.use(express.static('public'));
app.use(express.static('views'));
//
app.engine('html', require('hbs').__express);
app.set('views', 'views');
app.set('view engine', 'html');
app.get('/', function(req, res) {
// res.sendFile(path.join(__dirname + '/index.html'));
//res.sendFile('/index.html');
res.render('index',{title :"page index"});
});
app.listen(3000);
Here my ./views/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<h1>{{title}}</h1>
</body>
</html>
Any help ? thanks !
You should use .hbs as the extension.
Try to rename your /views/index.html to /views/index.hbs
and change it in the code as follows
app.set('view engine', 'hbs');
Apparently hbs wants .hbs to be used.
Tip: hbs hbs does not look so good to me, you can take a look at swig: http://paularmstrong.github.io/swig/docs
Try the below code
app.set('view engine', 'html');
app.engine('html', require('hbs').__express);
Instead of the this
app.engine('html', require('hbs').__express);
app.set('views', 'views');
app.set('view engine', 'html');
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);
I get this error:
500 Error: ENOENT, open 'C:\Users\Gilbert\WebstormProjects\games\views\layout.hbs
but my project has no reference to this file. when trying to render a simple test page with HBS, I used a pregenerated express app that created a layout.jshtml file but deleated this file.
app.js:
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, 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', 'hbs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__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'));
});
routes/index.js:
/*
* GET home page.
*/
exports.index = function(req, res){
res.render('hi.hbs', { title: 'Express' });
};
views/hi.hbs:
<h1>IT WORKS</h1>
With HBS you must manually disable need for a layout with layout:false this should be done in the view options to make it app global.
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!