Open In App

Template Rendering via Marko.js in Node.js

Last Updated : 06 Apr, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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:

Running localhost at port 2020

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/



Similar Reads

Server Side Rendering vs Client Side Rendering vs Server Side Generation
In the world of web development, there are several approaches to rendering web pages: server-side rendering, client-side rendering, and server-side generation. Each approach has its own advantages and disadvantages, and choosing the right one for your project depends on your specific needs and goals. In this blog, we’ll explore the differences betw
4 min read
Explain lifecycle of component re-rendering due to re-rendering of parent component
React is a javascript library that renders components written in JSX. You can build and render any component as per your usage. States can be updated accordingly using the setState method. Props can be updated only by the parent component. Updating of state and props leads to the rendering of UI. Different lifecycle methods are called during these
2 min read
How does SSR(Server-Side Rendering) differ from CSR(client-side rendering) ?
Server-Side Rendering (SSR) and Client-Side Rendering (CSR) are two different approaches used in web development to render web pages to users. Each approach has its own set of advantages and disadvantages. In this article, we will learn about the difference between SSR and CSR with examples and features. Table of Content Server-Side Rendering (SSR)
4 min read
Vue.js List Rendering v-for on a &lt;template&gt;
Vue.js is one of the best frameworks for JavaScript like React JS. The Vue JS is used to design the user interface layer, it is easy to pick up for any developer. It is compatible with other libraries and extensions as well. In order to repeat a task for a fixed amount of time, we make use of the for loop. There are a lot of data that needs to be r
3 min read
Server Side Rendering using Express.js And EJS Template Engine
Server-side rendering involves generating HTML on the server and sending it to the client, as opposed to generating it on the client side using JavaScript. This improves initial load time, and SEO, and enables dynamic content generation. Express is a popular web application framework for NodeJS, and EJS is a simple templating language that lets you
3 min read
Node.js Server Side Rendering (SSR) using EJS
Server-side rendering (SSR) is a popular technique for rendering a normally client-side-only single-page app (SPA) on the server and then sending a fully rendered page to the client. The client's JavaScript bundle can then take over and the SPA can operate as normal. SSR technique is helpful in situations where the client has a slow internet connec
3 min read
How do React Portals help in rendering elements outside the root DOM node?
React Portals offer a powerful mechanism for rendering elements outside of the typical DOM hierarchy in React applications. They provide a way to render content at a different place in the DOM tree from where it is defined in the component hierarchy. This capability opens up various possibilities, such as modals, tooltips, and overlays, that requir
6 min read
How to kill all instances of a Node.js process via command line ?
Node.js is an open-source and cross-platform runtime environment for executing JavaScript code outside the browser. It is widely used in developing APIs and microservices from small to large companies. Why we need to kill all the instances? Sometimes there may be some issue with the NodeJS like the server is listening to some other port or there ma
2 min read
ReactJS Rendering Elements
In this article we will learn about rendering elements in ReactJS, updating the rendered elements and will also discuss about how efficiently the elements are rendered. What are React Elements?React elements are different from DOM elements as React elements are simple JavaScript objects and are efficient to create. React elements are the building b
3 min read
CSS shape-rendering Property
The shape-rendering property is used to hint the renderer about the tradeoffs that have to be made while rendering shapes like circles, rectangles or paths. The renderer can be told to make the shape geometrically precise or optimize the shape to speed up rendering in certain situations. Syntax: shape-rendering: auto | optimizeSpeed | crispEdges |
4 min read