res.render showing html code than rendering the page - node.js

I am new to ejs and I am trying to render a page using it. Here is the code
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.get ("/user",(req,res) =>{
res.header("Content-Type",'application/json');
var id_token_decode=jwt_decoder(req.session.tokenSet.id_token);
var decoded = jwt_decoder(req.session.tokenSet.access_token);
console.log(id_token_decode)
console.log(decoded);
console.log(path.join(__dirname + '/views/citizenHome.html'))
res.render('citizenHome.ejs')
})
It is showing the html code rather than actually rendering the page. Can anyone help me?

Remove res.header("Content-Type",'application/json'); this line from the route
app.get ("/user",(req,res) =>{
// res.header("Content-Type",'application/json'); <-- remove this line
var id_token_decode=jwt_decoder(req.session.tokenSet.id_token);
var decoded = jwt_decoder(req.session.tokenSet.access_token);
console.log(id_token_decode)
console.log(decoded);
console.log(path.join(__dirname + '/views/citizenHome.html'))
res.render('citizenHome.ejs')
})
And also, what does /views/citizenHome.html this file do?

Related

Multiple View paths on Node.js + Express + <%= EJS %>

I am using express 4.17.1 combination for my web app.
I am wondering how can i render multiple files depend on the route and multiple folders
Let's say that i have :
When I want to go to the admin path this problem appears :
Passing an array of directory will not work if you're using express version 3 or above. Try the below
app.set('view engine', 'ejs');
var renderer = express.response.render;
express.render = () => {
app.set('views', './regular/viewPath/views');
try {
return renderer.apply(this, arguments);
}
catch (e) {...}
app.set('views', './admin/viewPath/views');
return renderer.apply(this, arguments);
};
const adminRoute = require('./routes/adminFile');
app.use('/admin', adminRoute);
Finally, set the name inside your admin file
router.set('name', 'adminFile');
Other easy alternative would be to put your views in different folders
Example:
views/index.ejs
views/admin/adminFile.ejs
app.set('views', path.join(__dirname, 'views'));
Then on render, you do like
res.render('views/admin/adminFile', configs);

Disable view cache for pug (jade) templates in express

I use "express": "^4.14.0", "pug": "^2.0.0-beta6"
app.set('view engine', 'jade');
...
app.get('/', function (req, res) {
res.render('index.pug', {...});
}
When I use Express render function, it renders a template just once. If I change pug-template I'll get an old page version based on an already compiled template. For dev purposes, I need express recompiling .pug template for every render call. How can I achieve this?
I tried something like:
app.disable('view cache'); OR
app.set('view cache', false); OR
app.set('view cache', 'disabled');
But none of those were helpful.
Disappointing, but working:
const pug = require('pug');
const path = require('path');
res.send(pug.renderFile(path.join(__dirname,'template.pug'), templateObj));

Send a parameter along with sendfile

I am using nodejs
i have this code
var someparameter ="teststst";
var fileLocation = path.resolve(__dirname + '/../public/resetpassword.html');
console.log(fileLocation);
res.sendfile(fileLocation);
I want to send someparameter in resetpassword.html
Can anybody tell me how to do this ?
Thanks
You can't. (not without an engine)
Passing parameters to the html won't have any effect (and isnt possible)
You can use a template engine such as jade (or EJS if you want to stay with HTML)
Defined as:
app.engine('.html', require('ejs').__express);
app.set('views', __dirname + '/views');
app.set('view engine', 'html');
And than you can 'render' view with parameters:
app.get('/', function(req, res){
res.render('index', {
users: users,
title: "EJS example",
header: "Some users"
});
});
Usaful Info:
EJS templates
Use EJS to Template Your Node Application

Get request url in server.js file. Node.js

I have server.js file where i define my server and all settings.
And i need to define request url before declaring those settings. Because i need to define them depend on request url.
An example:
var siteDir = ((app.route).lastIndexOf('/admin', 0) === 0) ? '/admin' : '/client';
app.engine('ejs', require('ejs-locals'));
app.set('views', __dirname + ('/template' + siteDir));
app.set('view engine', 'ejs');
So, if request url begins with 'admin' i will load templates from admin folder, otherwise from client.
My current implementation doesn't work, because app.route always returns '/'.
What can i do here. Please give me some advises. Thanks in advanced.
You cannot set the views directory per request with Express, which is what you're trying to do.
But you can use subdirectories in your calls to res.render():
app.get('/admin/', function(req, res) {
res.render('admin/index'); // renders '__dirname + /template/admin/index.ejs'
});
app.get('/', function(req, res) {
res.render('client/index'); // renders '__dirname + /template/client/index.ejs'
});
you can write your own middleware for this.
Something like this:
var siteDir = "/client"; //default case;
app.use(function(req,res,next){
if(req.path == '/admin') siteDir = '/admin';
else siteDir = '/client';
next();
});
app.engine('ejs', require('ejs-locals'));
app.set('views', __dirname + ('/template' + siteDir));
app.set('view engine', 'ejs');

Express JS not rendering jade template

I'm going to keep this short, I'm just trying to render a jade template using express js.
I'm using express 3.0.0rc5 and jade 0.27.6.
Here's my jade templates, the layout:
// test-layout.jade
doctype 5
html
head
title My title
block head
body
#content
block content
And the index:
// test-index.jade
extends test-layout
block head
script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js")
block content
h1 My page
Here's some excerpts from app.js:
var app = express();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.get('/test-jade', function(req, res) {
res.render('test-index', {}, function(err, html) {
});
});
app.get('/test', function(req, res) {
res.send('this works');
});
Now whenever I try to go to http://myurl.com/test-jade the browser just hangs and timesout without showing any output in the console (even though I'm in dev mode).
However when I go to http://myurl.com/test I see 'this works'.
I feel like I'm missing something really simple here, I'm currently upgrading from 2.5 to 3.0.
Thanks in advance if anyone has advice.
Is it the blank call back?
res.render('test-index', {}, function(err, html) {
});
In my app I'm using
res.render('test-index', {});

Resources