Node.js : How to embed Node.js into HTML?

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


Node.js : How to embed Node.js into HTML?



In a php file I can do:


<p><?php echo "hello!";?></p>



Is there a way to do this in node, if yes what's the logic for it?



I have an idea how could this be done:



Use an identifier markup for node in the HTML file like: <node>code</node>


<node>code</node>



Load & Parse HTML file in Node



Grab node markup from the HTML file and run it



But I'm not sure if this is the best way or even if it works :)



Please note I want to learn node.js, so express and other libraries and modules are not answers for me, because I want to know the logic of the process.


node.js



One or more of the answers is exemplary and worthy of an additional bounty.



nice question, you see it, its very nice





Join us in the node.js chat room ;)
– Raynos
May 18 '11 at 21:05





This question does not relate to programming embedded systems so I have removed the tag. see stackoverflow.com/tags/embedded/info
– ʎəʞo uɐɪ
May 19 '11 at 8:59




4 Answers
4



What your describing / asking for a node.js preprocessor. It does exist but it's considered harmful.



A better solution would be to use views used in express. Take a look at the screencasts.



If you must do everything from scratch then you can write a micro templating engine.


function render(_view, data) {
var view = render.views[view];
for (var key in data) {
var value = data[key];
view.replace("{{" + key + "}}", value);
}
return view;
}

render.views = {
"someView": "<p>{{foo}}</p>"
};

http.createServer(function(req, res) {
res.end(render("someView", {
"foo": "bar"
}));
});



There are good reasons why mixing php/asp/js code directly with HTML is bad. It does not promote seperation of concerns and leads to spaghetti code. The standard method these days is templating engines like the one above.



Want to learn more about micro templating? Read the article by J. Resig.





Hi @Raynos could you explain me how can I execute a node.js command from an .html file with this templating engine? As I understand this is just changes the foo to bar? or I'm missunderstood something again?
– Adam
May 31 '11 at 20:30




.html





@CIRK use a bigger templating engine. Mustache, EJS, Jade, jQuery templ, etc. Take a look at the express screencasts and whilst your at it use express, it has a great view engine
– Raynos
May 31 '11 at 20:33





Hello. 2 of 3 links are broken. I don't know if they can be fixed, but I'd love to access those materials :)
– Gui Imamura
Oct 7 '14 at 17:04



You can try using JooDee, a node webserver which allows you to embed serverside javascript in your web pages. If you are familiar with Node and PHP/ASP, it is a breeze to create pages. Here's a sample of what a page looks like below:


<!DOCTYPE html>
<html>
<: //server side code in here
var os = require('os');
var hostname = os.hostname();
:>
<body>
<div>Your hostname is <::hostname:></div>
</body>
</html>



Using JooDee also lets you expose server javascript vars to the client with no effort by attaching attributes to the 'Client' object server side, and accessing the generated 'Client' object in your client side javascript.



https://github.com/BigIroh/JooDee



Use a template engine. From terminal


npm install ejs



In code:


var ejs = require('ejs');

var options = {
locals: {
foo: function() { return "bar"; }
}
};

var template = "<p><%= foo() %></p>";
console.log(ejs.render(template, options));



Another good solution
you can use express.js



first install express NPM


npm install express



Then use following code


var express = require('express');
var app = express();
router.get('/', function (req, res)
{
res.render('index', {
pageTitle: 'Home',
pageID: 'home'
});
});



index is basically html view






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Arduino Mega cannot recieve any sketches, stk500_recv() programmer is not responding

Visual Studio Code: How to configure includePath for better IntelliSense results

C++ virtual function: Base class function is called instead of derived