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

Question

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>
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.

This question does not relate to programming embedded systems so I have removed the tag. see stackoverflow.com/tags/embedded/info — uɐɪ
– uɐɪ, Commented May 19, 2011 at 8:59

Raynos · Accepted Answer · 2011-05-18 21:08:11Z

20

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.

edited May 18, 2011 at 21:08

answered May 18, 2011 at 21:02

Raynos

170k57 gold badges359 silver badges399 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adam Halasz Over a year ago

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?

Raynos Over a year ago

@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

Gui Imamura Over a year ago

Hello. 2 of 3 links are broken. I don't know if they can be fixed, but I'd love to access those materials :)

mako-taco · Accepted Answer · 2012-12-12 01:23:11Z

6

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

answered Dec 12, 2012 at 1:23

mako-taco

7325 silver badges10 bronze badges

2 Comments

mako-taco Over a year ago

don't use this. It was written by a friend and I in college, before we understood the evils of what we were doing!

peterh Over a year ago

@maco-taco If you do it beautifully, by re-interpreting the html and substituting only the text nodes, then I think it is not so terribly bad.

mgutz · Accepted Answer · 2011-06-06 21:41:32Z

2

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));

answered Jun 6, 2011 at 21:41

mgutz

9531 gold badge8 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related