How would I go about using .html extensions on my view files instead of .ejs when using Parse.com's Express.js?
I changed the EJS delimiters to <? and ?> because I'm used to them from PHP. That worked fine, but I can't seem to change the file extension for my view files:
I've tried the following:
var express = require('express');
var ejs = require('ejs');
var app = express();
ejs.open = '<?';
ejs.close = '?>';
app.set('view engine', 'ejs');
app.engine('.html', ejs.renderFile);
app.set('views', 'cloud/views'); app.use(express.bodyParser());
app.get('/', function(req, res) {
res.render('Test', { message: 'Hello Express!' });
});
app.listen();
And I get an internal server error.
I've also tried eliminating this line with the same result:
app.set('view engine', 'ejs');
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);
So I did app.set to html and app.engine to html and it was working for me.
this way works too:
app.set('view engine', 'html');
app.engine('html',require('ejs').renderFile);
someone knows any problem using this way?
Related
I have the following Express 4 view engine setup:
var handlebars = require('express-handlebars').create({
layoutsDir: path.join(__dirname, "views/layouts"),
partialsDir: path.join(__dirname, "views/partials"),
defaultLayout: 'layout',
extname: 'hbs'
});
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, "views"));
I have the following file structure:
/views
error.hbs
index.hbs
/partials
menu.hbs
/layouts
layout.hbs
And finally in my route: res.render('index');
And visiting my site, it loads only my index.hbs template. It does not use my layout.hbs. I don't get any errors or anything. It just doesn't use the layout even though layout is set as my default layout in the handlebars config.
Next I tried to change my code to this:
res.render('index', {layout: 'layout'});
Now I get the error:
Error: ENOENT: no such file or directory, open '/.../views/layout.hbs'
So it's like it's not finding my layoutsDir... What am I missing here?
Next I changed it to this:
res.render('index', {layout: 'layouts/layout'});
Okay so that worked. My layout is now loaded. But then I added in a partial to my layout:
{{> menu }}
Now I get: /.../views/index.hbs: The partial menu could not be found
So what is going on here? How come Handlebars isn't recognizing my layoutsDir or partialsDir? It's just not seeing them at all or something. And how come defaultLayout wasn't being used? I had to specify the layout.
According to the API documentation for express-handlebars if you are changing the file extension from the default .handlebars then when you set the view engine, all occurrences of handlebars should be replaced with the new extension you wish to use.
So your express setup will need to be updated to:
app.engine('hbs', handlebars.engine);
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, "views"));
Note: the documentation uses a period before the extension e.g. .hbs but it seems to work without this.
Full code:
var path = require('path');
var express = require('express');
var app = express();
var http = require('http').Server(app);
var handlebars = require('express-handlebars').create({
layoutsDir: path.join(__dirname, "views/layouts"),
partialsDir: path.join(__dirname, "views/partials"),
defaultLayout: 'layout',
extname: 'hbs'
});
app.engine('hbs', handlebars.engine);
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, "views"));
app.get('/', function(req, res){
res.render('index');
});
http.listen(3000, function(){
console.log("Server running");
});
In the new handlebars in your use partials you dont have to include its directory in server.js
The partials are included in "express-handlebars"
The first line in view engine setup is responsible for the above
Take note of these.
const hbs = require('hbs');
const expressHbs = require('express-handlebars');
//view engine setup
app.engine('.hbs', expressHbs({ defaultLayout: 'layout', extname: '.hbs' }));
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, '../views'));
app.use(express.static(path.join(__dirname, '../public')));
Try to use wildcard on your Dependencies to make sure you match the latest version
"dependencies": {
"express": "*",
"express-handlebars": "^3.0.0",
"hbs": "*"
},
How can I output pretty HTML using Swig in Express? I have tried the following:
app.set('view options', { pretty: true });
app.locals.pretty = true;
using Production environment
My view code looks like this:
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'swig');
app.engine('.swig', swig.renderFile);
Try with swig Filter. example: {{character|safe}}
you can get more here http://paularmstrong.github.io/swig/docs/filters/
I've got a pretty basic expressjs application with the / route loading a view located in views/main/. However, I'm getting the following error:
Error: Failed to lookup view "main/index" in views directory "/Users/n0pe/Sync/src/proj/views/"
Here's my structure (omitting the unimportant):
/proj
/views
/main
index.hbs
app.js
And here's my app.js (the important parts):
var express = require('express');
var app = express();
app.set('views', __dirname+'/views/');
app.set('view engine', 'handlebars');
And here's the controller:
router.get('/', function(req, res, next) {
res.render('main/index', {title: 'test'});
});
What's missing from this pretty basic setup?
I tested it in local and everything works. Just one mistake
from app.set('view engine', 'handlebars'); to app.set('view engine', 'hbs');
my example
var express = require('express'),
app = express();
app.engine('html', require('hbs').__express);
app.set('views', __dirname+'/views/');
app.set('view engine', 'hbs');
app.get('/', function(req, res) {
res.render('main/index',{title :"page index"});
});
app.listen(3000);
I changed two things and it worked for me.
First
app.set('views', [path.join(__dirname, 'views'),path.join(__dirname, 'views/main')]);
I passed an array to the app.set and added the subdirectory
Second
res.render('../main/index', {title :"page index"}, function(err, html) {
console.log(err);
});
I changed the directory path to relatively navigate from the parent directory.
Using the ../ makes it work somehow. Also, once you add the directory to the app.set, you can call index directly e.g., res.render('index',...
Change your set views. it should be
app.set('views', path.join(__dirname, 'views'));
I think you need to change the file extension of the views from hbs to handlebars
In Express.js application to register template engine ejs you just add one line
app.set('view engine', 'ejs');
How to specify additional options supported by the ejs https://github.com/mde/ejs#options (e.g. I want rmWhitespace: true) so that every res.render() would use them?
UPDATE:
current set up:
...
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
app.locals.rmWhitespace = true;
app.get('/', function (req, res) {
res.render('root', { name: 'Test' });
});
and in `./views/root.ejs'
<html>
<body>
Hello, <%= name -%>
<br/>
</body>
</html>
Your original syntax works now:
app.set('view engine', 'ejs');
app.locals.rmWhitespace = true;
It didn't work at the time you asked your question, due to a bug which was fixed in v2.3.4: https://github.com/mde/ejs/commit/ea0fa32e27a13b9b77970b312699ff117aa56e59
Without this fix in place, rmWhitespace was not recognized as an "option", and therefore wasn't yanked out of data and into opts by the cbOptsInData method.
From documentation: ejs.render(str, data, options);
app.get('/', function (req, res) {
res.render('root', { name: 'Test' }, rmWhitespace);
});
http://ejs.co/
I had the same problem using swig, an alternative to ejs.
I think you can directly require ejs and set its options. For example :
var ejs = require('ejs');
...
app.set('view engine', 'ejs');
ejs.rmWhitespace = true;
...
You can setup a middleware
app.use(function(req, res, next){
res.locals.rmWhitespace = true;
next();
});
setup locals as res.locals
set docs here here
I want to build a simple app using node.js that 'functions' like IIS/classic ASP where all the content (html, png, js, css, ejs) can be in one directory and the ejs file uses javascript vs. VBScript.
I've gathered the following from API's and other examples, but the ejs file arrives at the browser as a binary and gets saved....
My node.js file:
var express = require('express');
var app = express();
app.use(app.router);
app.use(express.static(__dirname + '/html'));
app.engine('.ejs', require('ejs').__express);
app.set('views', __dirname + '/html');
app.set('view engine', 'ejs');
app.get('*.ejs', function(req, res) {
res.render(__dirname + '/html' + req.url, function(err, result) {
res.end(result);
});
});
app.listen(8080);
My test.ejs file:
<!DOCTYPE html>
<html>
<head><title>A test</title></head>
<body>
My Test Page
<% if (1==1) { %>
Working
<%}%>
</body>
</html>
What am I missing or where can I find a working example?
I FIGURED IT OUT... SOLUTION ADDED ABOVE
express.js won't magically try to render static files, you have to explicitly call render somewhere.
I believe something like this would work:
var express = require('express')
var app = express()
app.engine('.ejs', require('ejs').__express)
app.set('views', __dirname + '/html')
app.set('view engine', 'ejs')
app.use(app.router) // only in express 3, remove that in express 4
app.get('/test.html', function(req, res, next) {
res.render('test.ejs')
})
app.use(express.static(__dirname + '/html'))
app.listen(8080)
I believe is not necessary to run render in every place, I use this example to render my static content by migrating express 2.3.7 to 4 and works fine with :
app.engine('.ejs', require('ejs').__express);
app.set('views', __dirname + '/public')
app.set('view engine', 'ejs')
app.use(express.static(__dirname + '/public'))
My static content is in 'public' directory.
I just want to add that express supports EJS out of the box these days:
https://expressjs.com/en/starter/generator.html