Skip to content
Related Articles

Related Articles

Improve Article

Template Rendering via Marko.js in Node.js

  • Last Updated : 09 Feb, 2021

Marko: Marko makes it easy to represent your UI using a syntax that is like HTML. It is a friendly and super fast UI library that makes building web apps bearable fun. It is so much like HTML, that you can use it as a replacement for a templating language like handlebars, mustache, or pug.

However, Marko is much more than a templating language. It’s a language that allows you to declaratively build an application by describing how the application view changes over time and in response to user actions. In the browser, when the data representing your UI changes, Marko will automatically and efficiently update the DOM to reflect the changes.

Installation: If you’re starting from scratch, you can use Marko’s cli commands to quickly create a starter app:

npx @marko/create

The Marko compiler runs on Node.js and can be installed using npm:



npm init -y // The -y installs the default package.json

We need to install the following required libraries:

npm install express --save // install express module
npm install marko --save  // install marko module
or using yarn:
yarn add marko

Example: Filename: template.marko

html




<!doctype html>
html
    head
        title -- Hello World
    body
        h1 -- Hello, ${data.fname} ${data.lname}
        h3 -- Welcome to, ${data.host}'s bar.
           p -- We offer you
               b -- ${data.drinks[0]}, ${data.drinks[1]}, ${data.drinks[2]}.

Equivalent code of Template.marko:

html




<!doctype html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Hello, ${data.fname} ${data.lname}</h1>
      <h3>Welcome to, ${data.host}'s bar.</h3>
   
<p>
    We offer you ${data.drinks[0]},
    ${data.drinks[1]}, ${data.drinks[2]}.
  </p>
 
</body>
</html>

Filename: index.js

javascript




// Node.js program to implement the
// marko.js template
 
// Allow Node.js to require and load
// `.marko` files
require("marko/node-require");
 
// Importing express module
var express = require("express");
 
// Importing marko module
var markoExpress = require("marko/express");
 
// Importing template module
var template = require("./template.marko");
 
var app = express();
 
// Enable res.marko(template, data)
app.use(markoExpress());
 
// Routing
app.get("/", function(req, res) {
  console.log("Routing done all fine...");
  res.marko(template, data={
    fname: "Devanshi",
    lname: "awasthi",
    host: "Vikas",
    drinks : ["Wine", "Beer", "Champagne"]
  });
});
 
// Listening on 2020 port number
app.listen(2020, ()=>{
    console.log("Server started at port: 2020...");
});

Run index.js file using the following code in cmd:

node index.js 

Output (In Console):

Server started at port 2020…
Routing done all fine… 
 

In Browser:

Running localhost at port 2020

Note: After Running the server in console, it automatically creates a file template.marko.js, which has a reference to all the template files. 

Reference: https://markojs.com/docs/getting-started/




My Personal Notes arrow_drop_up
Recommended Articles
Page :