I followed "NodeJS Express app generation with CoffeeScript and HAML" and the express-usage docs, but my layout is not displaying.
I can see the rendered index.hamlc OK, but it doesn't contain the layout. How do I get layout to work with HAML and Express 4?
server.js:
const express = require('express'),
partials = require("express-partials"),
...
app.set('views','app/views');
app.engine("hamlc", require("haml-coffee").__express)
app.use(partials())
app.set("view engine", "hamlc")
index.js:
router.get('/', (req, res) => {
res.render('index', {name: "User"})
app/views/layout.hamlc:
!!!
%head
%title Express App
%body
xxx
!= #body
I viewed the source in Chrome using view-source:http://127.0.0.1/ and it only shows the template contents but not the layout.
I moved the line
app.use('/', indexRouter)
below
app.engine("haml", require("haml-coffee").__express)
app.use(partials())
app.set("view engine", "haml")
and it worked. I didn't think the order would matter. (I also renamed the files .haml to match conventions and enable syntax hilighting.)
Related
I'm trying to make a website using NodeJS with express and pug for templates.
I integrated Pug using the express docs, but I keep getting TypeError: View is not a constructor on the render function. I really looked, but the only people who had this problem got it with other templates, and were not doing it has simple.
So at the end I did it like this :
var express = require('express');
var server = express();
server.set('views', './views');
server.set('view engine', 'pug');
server.get('/', (req, res) => {
res.render('example', {title: "code", message: "message"});
});
require('./settings')(server); console.log('Settings initialized');
server.listen(server.settings.port);
console.log('Server listening on port', server.settings.port);
And in views/ the template looks like :
html
head
title = title
body
h1 = message
In package.json, I imported it like : "pug": "^2.0.0-rc.1"
Thank you for your tips ! And have a nice day.
-- EDIT --
So I made a little experiment by uninstalling pug ... I have the same result, so I guess I didn't install or parametrized well pug.
-- EDIT --
Made some other tests and it turns out without the require it works well. But I don't see why, and I need to import external files.
This could be happen for various reason one of the most frequent is that there is a typo in the way you use pug in your index.js or where the object is instanced.
After made sure to have installed it locally( check your package.json) and to have created a root a folder called "views", and in there same file that you use in your rooter, then to be sure to use the sintax:
server.set('view engine', 'pug');
server.set('views','./views');// default, but if you specify don't make mistake on this
In your case I believe it is the order that caused this error.
Another note, useful is that the pug sintax, is required that "tags" are followed without space by "=", like:
html
head
title= title
body
h1= message
I had the same error because of a typo in views
server.set('view', './views');
server.set('view engine', 'pug');
I fixed it by putting an s to views
server.set('views', './views');
(this discussion assumes app is express: var app = express();)
You're getting this error because you're stepping on app.settings, which contains a view property.
I understand the appeal of wanting to call app.settings, so you can use app.settings.custom instead, and it won't cause a clash:
settings.ts
module.exports = {
port: 3000
}
app.ts
// settings
app.settings.custom = require('./settings')
...
var server = await app.listen(app.settings.custom.port, async () => {
var address = server.address()
console.log(`app.js - server started at ${new Date().toLocaleTimeString()} in ${app.environment} - http://${address.address}:${address.port}`)
})
If you don't like .custom, you can use Object.assign(app.settings, mySettings), just make sure no property values clash.
I'm using Handlebars in my NodeJS application as my templating engine.
I've put all my templates in a views folder like so :
-
- /controllers
- /views
- index.html
- server.js
Here's my code to render the template when the user access a given URL (using express for routing) :
app.get("/", function(req, res){
var template = handlebars.compile("views/index.html");
var data = {"name": "Charles"};
var result = template(data);
res.send(result);
});
I'm trying to render a template from a file, but it's not working. This is what the browser outputs directly when I'm accessing the / URL :
views/index.html
That makes sense, since it's interpreting the given param as a string directly and not as a path to an external template.
How can I load my template file (in this case the one in views/index.html to a variable, so that I can then render the template?
The only examples I found were storing all the templates in a file and loading them via AJAX, but all these examples were from "front-end" handlebars and not when using it with Node.
Is it possible to achieve what I want? I looked at the documentation but it's hard to find good infos for handlebars with NodeJS.
From your description, it sounds like you want handlebars as view engine, with dynamic views. You don't need to do this manually, here is an example (using express-handlebars):
var handlebars = require('express-handlebars');
app.engine('.html', handlebars({layout: false, extname: '.html'}));
app.set('view engine', '.html');
app.get("/:view", function(req, res){
var view = req.params.view;
res.render(view, { "name": "Charles" }); // Whatever data you want
});
With handlebars you have to load the file yourself or you can precompile the files (using grunt/gulp maybe) I feel way more confortable with swig ( http://paularmstrong.github.io/swig/ )
It is very simple to use. And it has also integration with express if you want.
var swig = require('swig');
swig.renderFile('/path/to/template.html', {
pagename: 'awesome people',
authors: ['Paul', 'Jim', 'Jane']
});
In your case
app.get("/", function(req, res){
res.send(swig.renderFile('views/index.html', {"name": "Charles"}));
});
Is it possible in any way to use hogan.js as template engine with layouts something like
"Razor or master pages in .NET"?
I would get a result like this:
layout.hjs:
contains "header" & "footer"
and
index.hjs:
will include layout.hjs and contain only page content.
sure:
layout.hjs:
{{> header}}
{{$content}}
default content
{{/content}}
{{> footer}}
index.hjs:
{{<layout}}
{{$content}}
your content goes here
{{/content}}
{{/layout}}
see the hogan test file for all it can do:
https://github.com/twitter/hogan.js/blob/master/test/index.js
btw. this is Hogan#3.0.0, get it with a git url with mpn
I'm not sure what you mean, "Razor or master pages in .NET"? What are you looking to do, use view partials?
But the basic way of setting up Hogan.js for Express is as follows:
var express = require('express');
var app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'hjs');
app.use(app.router);
app.use(express.static( __dirname + '/public' ));
app.get('/', function( req, res, next ) {
res.render('index');
});
app.listen(3000);
You will have to npm install express [--save], npm install hjs [--save], depending if it's inside your package.json already or not.
Then you just make a views directory and throw an index.hjs file and you're set.
Let me know what you want to do with your templates and we can work from there.
I'd like to set my CSS path in my express application in order to use this one in my jade layouts. However, I don't know how to do, I try to use "app.set('cssPath', __dirname+'/public/admin/css/')" but it doesn't work because I can not use "app.get()" in my external controllers.
My layout _layout.jade :
!!! 5
html(lang='fr')
head
meta(charset='UTF-8')
link(href='admin/css/screen.css', media='screen, projection', rel='stylesheet', type='text/css')
body
.container
h1 Wellcome to Forest Administrator
.space20
block content
.clear.space20
script(type='text/javascript', src='admin/js/jquery.js')
My page edit.jade :
extends ../_layout
block content
.block.half.first
h2 Add a post
And I'd like to use something like :
link(href='+myCssPath+', media='screen, projection', rel='stylesheet', type='text/css')
Not sure if I get what you want to do but You can use
res.locals.cssPath = 'string with the path';
And cssPath will be available in your template.
Besides that you don't need __dirname+'/public/. Part because when the page is rendered for the browser /public/ will be /
[edit] If you want to have that variable available in all you routes, but declaring it just once, you can create a small middleware like
var express = require('express');
var app = express();
var app.configure(function(){
app.use(express.bodyParser());
app.use(express.methodOverride());
// .. and your other tipical configuration
//this small middleware for variables that must available in all paths
app.use(function(req, res, next) {
res.locals.cssPath = 'path to the css directory';
next();
});
});
//From here your typical route declarations
app.get('/', function(req, res) { res.render('someView'); });
I am new to Express for Node.js, and I was just setting up a simple app by following Pedro Teixeira's Node Tuts Episode 9. I wanted to experiment with layout files, so I set the layout to be "true." When I did that though, it didn't render with my layout, only with my body. How should I get it to render correctly? Below is my app.js file, my index.jade, my layout.jade, and a screenshot of my rendered page.
app.js
var express = require('express');
var app = express.createServer();
app.configure(function () {
app.use(express.logger();
});
app.set('views', __dirname + '/views');
app.set('view engine','jade');
app.set('view options', {layout: true});
app.get('/', function(request, response) {
response.render('index');
});
app.listen(4000);
index.jade
h2 Hello
p World!
layout.jade
!!! 5
html
head
title My template
body
#main
h1 Content goes here
p Testing 123
#container!= body
If you are using Express 3 this is normal the way template are rendered has changed.
Your layout needs to be like this:
!!! 5
html
head
title My template
body
#main
h1 Content goes here
p Testing 123
block content
And you templates:
extends layout
block content
h1 Something
Examples here:
https://github.com/dotcloud/express-on-dotcloud/blob/master/app/views/layout.jade#L64
https://github.com/dotcloud/express-on-dotcloud/blob/master/app/views/welcome.jade#L1
If you are starting with Node and Express feel free to clone this demo/tutorial App:
https://github.com/dotcloud/express-on-dotcloud
You can fool with it localy and discover some nice features of Express 3, if you want to share your app it is all setup to be pushed to dotCloud.