Node.js Server User Interface

Question

As I understood, node.js allows to implement server functionality with JavaScript. So maybe a webbrowser requests content from this server. How is a User Interface delivered to the client that requests data?

Answer 1

The browser requests an HTML page from the node.js server. The node.js server then serves up that HTML page. That HTML page contains HTML, CSS and Javascript (and perhaps references to other files that also contain HTML, CSS and Javascript that the browser then requests).

All those HTML, CSS and Javascript resources when rendered by the browser are the user interface.

The node.js server can serve static HTML, CSS and Javascript or it can serve dynamic resources that are custom built for the specific request. For example, a specific URL request might be to show all unshipped orders. When the node.js server receives that URL, it queries a database to get all unshipped orders, then formats the database results into a tabular form and returns the appropriate HTML to the browser to display the list of orders.

There are all sorts of tools that can be used by node.js to create dynamically formed HTML such as template engines, database view engines, etc...

---

If a browser is just making an Ajax call to your node.js server (not trying to load a new web page), then you can return any type of data you want from the node.js server and the receiving Javascript in the browser can process that data however is appropriate. For example, you could return only data and the Javascript in the browser could create the appropriate HTML elements to display the data. Or, you could return pre-formed HTML from the Ajax call that the client-side Javascript would insert into the page. Or you could use any combination of these.

Answer 2

On Node.js website there's an example:

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n'); //This is what the user will see
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

This is just plain text, but you could also pass HTML directly but it would be difficult to keep your code clear enough. That's why (like in PHP) there are templates. My favorite is Jade, which generate HTML with a special syntax.

Instead of you returning the string (HTML formated) to the user, they'll do the job for you and you will have a dedicated file to put your HTML.

Here's a list of Node.js templates, but there's much more so don't hesitate do give it a look.

Answer 3

I would suggest using express http://expressjs.com which is very compfortable, flexible and widely supported.