CODEWITHSUNDEEP
htmlnode.jsexpress
cg14
cg14

Reputation: 379

Serving Dynamic Webpages with Node.js

I am having a hard time understanding how exactly node.js serves dynamic content. So let's say we have the following code that renders a home page:

var express = require('express'),
    app = express();

app.get('/', function(req,res){
    res.render('home.html');
});

However, let's say this home page was supposed to be a user profile in which you are pulling user information from a database, which results in code:

var express = require('express'),
    mongoose = require('mongoose'),
    app = express();

mongoose.connect('mongodb://localhost/ExampleDB');

app.get('/:id', function(req,res){
    User.findOne({_id: req.id}, function (err, user){
       var name = user.name;
       var profilePic_uri = user.profilePic_uri;
       res.render('home.html');
});

So, ideally home.html is just a template page, in which you set maybe the user's profile picture, their name, etc in the route handler. Right, because the idea behind node, is that this app.js should be able to handle pulling the dynamic content from a database at run time. Where I am having trouble is understanding how exactly rendering dynamic pages work with node. The html page is a static page. You can't really render a php or a asp page because, well, that doesn't really make sense does it?

Which leaves me with the question, how is it done?

Upvotes: 8

Views: 21285

Answers (3)

Michael Blankenship
Michael Blankenship

Reputation: 1669

If you add...

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

...after app=express() has been done then it will now default to the Jade rendering engine if you don't use an extension. Then in your router:

app.get('/', function(req,res){
  res.render('home', {
    var1: 'val1',
    var2: 'val2'
  });
});

You'd need to add Jade to your project's package.json file in the dependencies:

    "jade": "~1.9.1",

...and then "npm install" in your folder to bring that in.

Then you'd need a file named /views/home.jade with the contents:

doctype html
html
  body
    p Var1 is #{var1}
    p Var2 is #{var2}

You should see--when you visit your home page--that the values have been passed to the Jade rendering engine and expanded in place in the template as 'val1' and 'val2', respectively.

Upvotes: 9

adricadar
adricadar

Reputation: 10209

In your case the page is static. Here comes in play template engines (view engines), with this you can render the content of the page dynamic.

Some of the template engines that I remember right now are vash (it's like razor syntax from MVC, I love it) and jade. There are more of them.

Note: You can find in the links I provided how to integrate them with express.

Upvotes: 5

Gerard van Helden
Gerard van Helden

Reputation: 1602

What you are actually asking is not, how it works in Node, but how Express renders templates. Once you understand that you're actually using a feature of the express module, you're probably more aware of what you need to search for to get the correct documentation.

In short: Express features a template rendering engine that does the job for you, very much similar to what ASP or PHP do.

To get to know Node, I'd advise to try to build something without all the libraries first, just to get to know the platform, and to understand why it's feasible to use such libraries or frameworks (such as express).

Upvotes: 1

Related Questions