Template Rendering via Marko.js in Node.js

Last Updated : 06 Apr, 2023

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 and 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
const express = require("express");

// Importing marko module
const markoExpress = require("marko/express");

// Importing template module
const template = require("./template.marko");

const 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 the 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:

Note: After Running the server in the 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/

Template Rendering via Marko.js in Node.js

amitkumarjee

Improve

Article Tags :

Template Rendering via Marko.js in Node.js

Similar Reads

Thank You!

What kind of Experience do you want to share?