So I was wondering how I could use .html extensions instead of .handlebars or .hbs extensions. I am doing this so I can develop using regular html so that my frontend developers can seamless edit files in their IDEs without any extra configuration. Plus it will help installing html templates much faster into our express applications.
So I was able to do this by changing three things in my app.js file I hope this helps everyone out as much as it helped me!
var express = require('express'),
exphbr = require('express3-handlebars'), // "express3-handlebars"
helpers = require('./lib/helpers'),
app = express(),
handlebars;
// Create `ExpressHandlebars` instance with a default layout.
handlebars = exphbr.create({
defaultLayout: 'main',
helpers : helpers,
extname : '.html', //set extension to .html so handlebars knows what to look for
// Uses multiple partials dirs, templates in "shared/templates/" are shared
// with the client-side of the app (see below).
partialsDir: [
'views/shared/',
'views/partials/'
]
});
// Register `hbs` as our view engine using its bound `engine()` function.
// Set html in app.engine and app.set so express knows what extension to look for.
app.engine('html', handlebars.engine);
app.set('view engine', 'html');
// Seperate route.js file
require("./routes")(app, express);
app.listen(3000);
Agree with JemiloII,
extname: '.myext' in the config while creating the expr-HBS instance (exphbr.create()) according to https://www.npmjs.org/package/express3-handlebars#-extname-handlebars-
binding the expr-HBS engine to the extension: app.engine('myext', handlebars.engine); according to http://expressjs.com/3x/api.html#app.engine
set the extension as view engine: app.set('view engine', 'myext'); - unfortunately no link to how it works.
Regards
Related
Builtin nodejs is using layout.hbs by default. But have to render wordpress instead of hbs
piece of code from app.js
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.set('env', config.env || 'development');
How can i change my default layout to wordpress?
A long way to render a wordpress page may be this:
Install the WordPress REST API plugin on your Wordpress site;
Recreate individual pieces of the wordpress template in hbs format;
On nodejs server, use the necessary wordpress APIs for composing the template and render it.
I have a node application and i'm using express and the doT.js template engine.
Everything is working but my template views have to be files with the extension .dot. I would prefer to have my views be html files because html is more ubiquitous.
Here is some of my current code:
var app = express()
app.engine('dot', express_dot.__express);
app.set('views', path.join(__dirname, './public/dot_views'));
app.set('view engine', 'dot');
what can I add or change so that my views don't have to be .dot files and can be .html files instead?
All you should need to do is rename the view engine identifier from dot to html, as that's what express is using for the file extension:
app.engine('html', express_dot.__express);
app.set('views', path.join(__dirname, './public/dot_views'));
app.set('view engine', 'html');
You are configuring the engine explicitly, so, as long as it's changed in both places, express will match up the html view engine with the doT engine you've configured as html.
I have a Node Server with Express. I get the cannot find module 'html' error even though my code looks like this and should be correct in my opinion:
app.set('views', path.join(__dirname, 'build/views'));
app.use(favicon(path.join(__dirname, "build/favicon.ico")));
app.use('/scripts', express.static(path.join(__dirname, 'node_modules')));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function(req, res){
res.render('index.html');
});
You have to set engine for HTML
Include this code in your main file
var engines = require('consolidate');
app.engine('html', engines.mustache);
app.set('view engine', 'html');
If you only want to serve a static file without passing any variables from the server to the client the easiest solution would be:
res.sendFile(path.join(__dirname + '/build/views/index.html'));
Especially when you are using AngularJS for the client side. The problem with the solution above is that mustache uses {{}} as variables recognition. So does AngularJS which might causes errors!
It seems that you are trying to display a static index.html file but you serve it as if it was a template. Probably Express is trying to find a module for html template format, which doesn't exist.
You may try to send the index as a static file instead of with res.render which is for rendering templates.
Some time ago I wrote an example of serving static files with Express. It's available on GitHub:
https://github.com/rsp/node-express-static-example
See also my other answer, where I explain it in more detail.
How do you render an html file while keeping the templating engine as jade ?
app.set('view engine', 'jade'); is where i've set the templating engine as jade and I want to do something like
app.get('/world', function(req,res){
res.render('profile.html', );
To render the html file.
I'm programming in node.js using express.js.
Note: i've already require html using var html=require('html');
Edit:
I understand res.render need not be used as html is already rendered. res.send(profile.html); gives error of profile is undefined
You can render jade files (.jade) but not html files as the result will be the html. What do you mean by rendering the html file?
Replace your res.render('profile.html') by res.sendfile('[path_to_the_file]profile.html')
I think you can use consolidate and mustache templating engine
npm install consolidate mustache
var engines = require('consolidate');
app.engine('html', engines.mustache);
app.set('view engine', 'html');
if you want to test the .html files, the easiest way to do it is to temporarily change the engine and add consolidate and swig modules
npm install consolidate
npm install swig
cons = require('consolidate'),
app.engine('html', cons.swig);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');
Then you can simply render like this:
app.get('/', function(req, res){
res.render("index");
});
Scenario: I had developed some transactional pages using Node.js, Express + Handlebars as view engine and MongoDB.
Now the issue is during module integration I got some of the pages which are built on Express + Jade as view engine.
Question: How to integrate pages built on Handlebars & some on Jade?
Add both engines and consolidate.js in your package.json
In yourapp.js
var engines = require('consolidate');
app.engine('jade', engines.jade);
app.engine('handlebars', engines.handlebars);
More info here
Express 4.0 and up solution (until it changes again)
NPM install the engines you need.
// some examples
npm install ejs
npm install pug
npm install handlebars
Set the engines to use in your app.js.
app.set('view engine', 'pug');
app.set('view engine', 'ejs');
Render your template, be sure to set the file extension.
// forces usage of the respective render engine by setting the file extension explicitly.
res.render( 'about.ejs', { title: 'About' } );
res.render( 'about.pug', { title: 'About' } );
Documentation for more usage examples.
https://expressjs.com/en/guide/using-template-engines.html
EDIT
After discussing with Amol M Kulkarni below comments, I came back and analyzed these again.
And turns out, it was fairly easier than I thought that I have to get back here and share my solution. Using consolidate, do it like this:
First do the require.
var engines = require('consolidate');
Then you can either remove or set engine and view engine...
I have tried removing all app.engine and app.set('view engine', '...'); and it did work. However, setting it other than 'html' will only work for one engine. So I just have set it to be sure.
I have set it like so:
app.engine('html', engines.swig); // take note, using 'html', not 'ejs' or 'pug'..
app.set('view engine', 'html'); // also 'html' here.
And then later on when you do the app.render, just make sure it has the file extension and it will just work nicely.
res.render( 'theme.ejs', {}); // will render with ejs
res.render( 'theme.pug', {}); // will render with pug
Just make sure have these engines (pug, ejs, etc..) are installed and consolidate will do the rest.
Old answer.
with relation to #Sergii answer, it did not work for me 100%.
There are times when an error is raised in the templates I'm using. But with a wrong error message that says failed to look up this template in this directory.
I tried #azariah solution but still did not work.
app.set('view engine', 'pug'); // does not make sense.
app.set('view engine', 'ejs'); // overriding the last .set()
what worked for me is using consolodate.js as mentioned.
Added app.set('view engine', 'pug'); as usual.
And then, in every time I will call render, I set the 'view engine'.
like so:
req.app.set('view engine', 'ejs');
res.render( 'theme', theme );
My worries with this is that when more simultaneous users will visit page with different engines, not sure if this will collide and be back with the error look up that I'm having.
But I guess that the render is so fast, that it should be done by the time another req.app.set is called.
I found this as more accurate and this is my personal practice.
We should have a default template engine set, so that all all views should process through at-least one template engine, it will save the file from being exposed to end user, in case you have html as default engine.
therefore, start with installing consolidate.js to the directory.
npm install consolidate
Later, we need to add the installed module to the application file.
var consoengines = require('consolidate');
Now setting the default view engine, (choosing pug because of its popularity)
app.set('view engine', 'pug');
After setting the default template engine. now I need to install the additional template engine, for my case, I mostly need EJS, because it allows almost all Javascript, which comes handy, to make anything in template. but you are good to choose any template engine.
All you would have to do is, install your template engine
npm install ejs
Now add this to consolidate instance and then put back to main template engines list.
app.engine('ejs', engines.ejs);
Now each time, you render a template, if you don't give extension in your router, this will call it with the default set template engine (here it is PUG), otherwise it will call the template engine according to the extension mentioned in the router call.