im new to node and i've searching ways to add dynamic data into html files, like php:
<?php echo $data; ?>
i've found that jade seems to be the exact way for node, but seems to be a little confusing, isn't there a way bit more like php?, something like:
{{data}} where data is var data or function,
-data- where data is var data or function,
etc.
PD: im new to node and javascript, but i have experience on php, so any tutorial or book to do so will be appreciated
i recommend using Swig js and it does exactly what you are asking for, just pass the variables from the node server, in express js i use it like this:
res.render('index.html', {'name': 'mecha'});
then in my index.html i would just use:
<p>{{ name }}</p>
Related
I have a next.js (react) application and I wanted to embed a few graphs that were written as static files (i.e., HTML, CSS, JS). How can I do that?
Example Graph: https://gist.github.com/mbostock/4061961
I found some answers around dangerouslySetInnerHTML but not sure how this applies as I am new to nextjs.
dangerouslySetInnerHTML will set HTML directly. Its mostly used to add libraries such as facebook, hotjar,... to your app. when using dangerouslySetInnerHTML be careful please read this doc and this one.
you can add script to your _document.js file. Something like:
<script dangerouslySetInnerHTML={{
__html: `// your html here`,
}}
/>
I am trying to create a Node website with a header ejs file that is included on each page.
When I load my index.ejs page, I would also like to pass a variable from my server to my header page.
I could be wrong, but it seems like the best way to do that is to pass that variable from the server, to the index page, then to the header.
Currently, the only example I've seen of this is the following code snippet:
<%- include("header",{title:"your_title"}) %>
The catch is that I would need to replace "your_title" with a title variable that I set serverside.
Is there a way to do this?
My hunch is that it may look like the following:
<% runHeader = function(title){ %>
<%- include('../partials/header', {title: title}); %>
<%}; %>
Unfortunately, include does not seem to run properly here, and the header does not load at all.
Any help would be much appreciated!
so the best way I found for this to work is to make a a "views" folder under your project folder. The views folder will have an ejs file with the name of "title.ejs" the call should then look like <%- include("title") -%>this will look for the ejs file in the same directory. I'd say in the title file add some sample HTML then everything should work.
Make sure that you have NPM installed ejs, then in nodefile use const ejs = require("ejs"); and app.set('view engine', 'ejs'); and app.use(express.static("public"));in the same node.js file.
Hope this makes sense and good luck.
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.
Switching from handlebars to pug I don't know how to populate a dropdown in pug. In handlebars I could do
<script type='text/javascript'>
$('.ui.dropdown').dropdown('set selected', [{{#each trip.tags}}'{{this}}',{{/each}}]);
</script>
Anyone got a clue what's the best practice in pug?
It looks like you're trying to generate JavaScript values as part of your template rendering. The approach you have taken in markdown could cause an XSS attack if this is not properly escaped (or it might just cause values like " to appear as ").
In pug, we recommend using js-stringify when you need to embed template values in a script. To do this, you need to install js-stringify using npm. You then need to include it in your locals. e.g.
pug.renderFile('my-template.pug', {stringify: require('js-stringify')});
Then you can use it as:
script(type='text/javascript').
$('.ui.dropdown').dropdown('set selected', !{stringify(trip.tags)});
N.B. It is only safe to use the !{...} syntax because js-stringify properly escapes the values before rendering.
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.