After doing some research, everyone seems to advise learning and using some form of a templating language with node.js. Why? Couldn't you just use HTML, and if so, how? I'm new to Node, so I downloaded Express and immediately I asked myself, "What is .jade?"
There is no requirement, but it can be much nicer. You can just as easily manually output HTML, but then you are forced to keep all of your HTML inside of JS strings at all times, or keep it in a file.
You'd do something like this:
res.send("<html><body>" + content + "</body></html>");
As soon as you want to have dynamic HTML, you either need to include it directly in your code, or you need to have it in a template. The difficulty is that you can't just throw standard HTML in a file, because that essentially makes it impossible to dynamically alter the page. To solve this problem, usually you'd dynamically generate HTML using some kind of templating language like jade.
For a tiny one-off app, it may not be a big deal, but separating your presentation HTML from your code becomes very important as the size of the app you are developing grows.
If your're using express use the code below
var express = require('express');
var app = express.createServer(
express.static(__dirname + '/public')
);
app.listen(3000);
Then put all your html files in the /public folder. That's it.
Related
Summary:
I'm currently migrating a website on Apache + PHP stack over to Node + Express, and would like to know what is the best way/best practice (if there is one) for dynamically injecting meta tags under the new stack.
Details:
Under the existing stack, meta tags are injected dynamically by adding PHP codes into the HTML file directly. As rendering is done on server side, the tags are properly interpreted by Facebook/Google+/whatever web crawlers.
Under the new stack, after doing some research, I've come across two options:
Use template engine like Pug (Jade) to render the HTML with locals. (It seems to be an overkill to rewrite the existing HTML with Pug's syntax though? Can Pug deal with HTML, or I've to consider other template engine like EJS? What template engine do you advise me to explore?)
Use DOM manipulation plugin like Cheerio to inject the meta tags first, before rendering begins.
Between these two options, which one will have a better performance or there is no material difference? Are there any other ways that you'd otherwise recommend? Thanks!
EJS would probably be the simplest one for that and very similar to PHP.
You can also take a look at Mustache and Handlebars for other options with minimal changes to your existing HTML.
with EJS: <html><head><%= yourMetaTags %> ...
with Mustache: <html><head>{{ yourMetaTags }} ...
with Handlebars: <html><head>{{ yourMetaTags }} ...
Also doT.js is very fast.
See:
http://www.embeddedjs.com/
https://mustache.github.io/
http://handlebarsjs.com/
http://olado.github.io/doT/
Parsing the HTML and manipulating it with a DOM API just to insert meta tags would be an overkill in my opinion.
On the other hand if all you need is to insert meta tags then you could make a simple regex substitution, using something like yourHTML.replace('<head>', '<head>'+yourMetaTags); but it could potentially get more complex over time when you need more functionality. After all, everyone has made a templating engine at some point in life.
I'm looking to use Express to render raw strings as HTML, with the ability to reference static files in a specified directory (CSS, images, and other resources).
I've done a lot of research, but I haven't seen anything that approaches what I'm trying to do. For example, I thought perhaps writing a custom templating engine that only pretended to load a file would cut it, but that doesn't seem to do the trick.
What's the best way to approach this?
There are many ways to do it.
It can done in any other templating engine as well but here i am guiding you to implement same using EJS(Embedded Javascript).
Use Express Generator to create an ExpressJS app with EJS templating Engine.
command :
express --ejs AppName
For more information about express Generator refer to doc here
Now EJS has tags such as :
1. <% code %> - Code that is evaulated without "echo" it is not printed out.
2. <%= code %> - Code that is evaluated and printed out and escaped!
3. <%- Code %> - Code that is evaluated printed out and not escaped!
So in your case you can use 3rd the third tag that i have mentioned above.
Render EJS views in the usual way from your route config:
res.render('index.ejs', {
// data you want to pass ..
});
Code sample
Some time ago i was playing around with EJS, i developed a very small blogApp for practice.
You can look into this view, line number 33, for more practical way of implementing same.
Hello,
I have been trying to learn Node with Express for about a week now. So far I got the basics of how to build MVC on top of it, and using JavaScript proved easier and cleaner than I would have ever gotten with another server language (except Python, maybe). But let's get into one of my first problems and one of a few I couldn't solve myself.
I'm using the Jade templating engine and I love it. I love how simple it is to input Markdown into the template. You just say :markdown and it's there!
But then I got into a problem. It's all easy to parse and print Markdown, however how am I supposed to display a blog post, for example, that's been stored as Markdown text in the database, on screen? I tried:
each entry in posts
h1 #{entry.title}
:markdown
#{entry.text}
div#post-footer
#{entry.date}
But the # gets parsed as a Markdown header, not a Jade directive. How do I make it so I can display Markdown properly?
var md = require('marked');
res.render('template', {md: md, markdownContent: markdownContent};
then inside the template use
div!= md(markdownContent);
I believe don't re-invent the wheel unless you absolutely have to. So I don't want to start coding away something that has already been coded, or a lot of people are contributing to it already.
I have just recently emigrated to planet Node.js (sorry php/apache), and need to put resources together to bring things up to speed with other languages.
I am using Node.js as a server listener, with Express.js as middle-ware, and jade js as a template engine.
I would like to use a TinyMCE like features but instead of the code being the usual ugly HTML markup, I would like the code to be the markdown and allow jade to do its majic. I suppose it more or less like stackoverflow edit (which I am typing in) but maybe a little more advanced UI wise.
So for instance if I click on a button B it should make the selected text bold as you would, with any WYSIWYG editors.
References:
http://nodejs.org/api/
http://expressjs.com/api.html
https://github.com/visionmedia/jade#readme-contents
http://www.tinymce.com/wiki.php
You could use any of the HTML generating WYSIWYG editors, and on "save", allow the HTML to pass to the server where you convert it to Jade syntax before storing it.
You could easily integrate this package, for example, into your Express server:
https://www.npmjs.org/package/html2jade
html2jade.convertHtml(html, {}, function (err, jade) {
// save jade to the DB
});
I've been working on an API in Node.js for the first time, and of course I needed a test page so I decided to whip one up in Node as well for the hell of it.
After wracking my mind to come up with a good way to load the header, body and footer files (Jade syntax files) and have them be friends and render together, I came up with a recursive solution.
function assemblePage(name,markup)
{
markup = markup || '';
if (markup=='')
fs.readFile('header.jade', function(err,data){assemblePage(name,markup+data)});
else if (name != 'footer')
fs.readFile(name+'.jade', function(err,data){assemblePage('footer',markup+data)});
else
fs.readFile('footer.jade', function(err,data){console.log(markup+data);__res.send(jade.render(markup+data))});
}
So all I have to call is:
assemblePage('home');
Is this the best way to go about things?
I think you should be using expressjs(High performance, high class web development for Node.js) to render your templates.
It has a very sophisticated View Rendering. I think what you need is called view partials. In the screencasts section you can watch a screencast about view partials