I'm using the express skelton to develope an app. I don't know how to use jade language, so I want to convert this files to html, I did that, but my problem now it's I have 2 lines the aim js : app.js that have to change
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
Please can you help me to change this lines, thank you.
You can use EJS(http://embeddedjs.com/) as a view engine and use the html (in form of ejs files)
`app.set('view engine', 'ejs');`
and place the .ejs files containing the html code within the view folder.
You'll have to update the dependencies in the package.json as well
"ejs": ">= 0.0.0"
For listing static html pages, use this property in express
`app.use(express.static(path.join(__dirname, 'public')));`
and place your .html files within the public folder.
Related
How could I include .hbs inside another .hbs without templates? I'm using a component based architecture for Nodejs wih Express and I need to include hbs files with content for use the {{values}} in both, html and js sides without duplicating anything and clean.
I tried using partialsDir like this:
app.engine('.hbs', exphbs({
defaultLayout: 'layout',
extname: '.hbs',
layoutsDir: path.join(__dirname),
partialsDir: [
path.join(__dirname, 'dashboard', '_public', 'main'),
path.join(__dirname, 'home', '_public', 'main')
]
}));
but it gets all of the scripts of all of the views of all of the routes. And using {{>viewScript}} (templates) it load all the .hbs (when I go to home I have the home partial .hbs, when I go to dashboard I have the home and the dashboard partials .hbs so that not works for me.
I tried with src, but it doesn't work (mime error)
<script src="viewScript.hbs"></script>
I can combine both .hbs with its own js inside one .hbs file, ok, but I wanted to keep those pieces separated.
I found a clean solution for this case to get those pieces on separate files (more simple than any kind of complex template system when you have the views in components instead of having all views on an single path).
In .hbs could be a small dictionary before loading the script with all string values I could need.
<script>
var hello = "{{{lang.hello}}}";
</script>
<script src="viewScript.js"></script>
this method is simple, don't duplicate anything and leaves me to do dynamic names with jquery and a lot of more stuff.
I'm currently working on a simple CMS. I have some basic layout set up for each page like that:
app.engine('handlebars', exphbs({defaultLayout:'layout'}));
app.set('view engine', 'handlebars');
I have some pages and I would like to setup sublayout for those pages.
For example.
Each page need to have root layout but gallery/all, gallery/new etc. need its own sublayout. How can I do it?
solution :
I found a solution for this. Instead of using layout use handlebar partials
You can use other layout: 'gallery_all_layout' in router:
res.render('gallery/all', {
pageTitle: 'Gallery List',
layout: 'gallery_all_layout'; //place it the same folder defaultLayout 'layout'
...
});
In NodeJS, what is the point of setting views
app.set('views', __dirname + '/public');
when you have
app.use(express.static(__dirname + '/public'));
Don't they accomplish the same thing? Does one have features/advantages that the other doesn't have?
"Don't they accomplish the same thing?" They don't.
With app.set('views', …) you're setting the Express's app setting which is
A directory or an array of directories for the application's views. If an array, the views are looked up in the order they occur in the array.
It's used by .render() function to look up views, which are usually dynamic like Jade.
With app.use(express.static(…)) you're defining a middleware whose only purpose is to serve static files like JS/CSS.
So essentially they're both fundamentally different things.
This is my current code:
app.set('view engine', 'jade');
I want to convert the jade files to html and render html instead. I tried substituting 'jade' with 'html' but that didnt' work.
You can use res.sendfile to serve HTML files:
res.sendfile('path/to/html/file.html');
(to convert any existing Jade files to HTML, you can install Jade globally using npm install jade -g and use the command line utility jade to convert them)
But that doesn't "render" anything, because rendering assumes some form of templating engine. If you want to use a different templating engine, perhaps one that looks more like HTML than Jade does, you can take a look at ejs or swig.
Also, instead of using res.sendfile, you can use the express.static middleware, which will serve any static files (like plain HTML, JS, CSS):
app.use(express.static(__dirname + '/public'));
I am having some problem with the EJS layout file on Express 3. Express just can't seem to find the layout for rendering. It just skips the layout.ejs totally which means that the output misses out of all the stylesheets and such.
res.render('login', { user: req.user });
and the configuration part,
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
and in the layout.ejs I have added the body tag,
<%- body %>
I have been trying out Jade before and it worked just fine, so the problem is just EJS.
Thanks in advance.
https://github.com/visionmedia/ejs/issues/48
I am uncertain whether the above has been updated but it suggests that layout functionality has been deprecated in express 3.
As a result, I have been using ejs-locals to implement equivalent functionality:
https://github.com/RandomEtc/ejs-locals