Template Rendering via Marko.js in Node.js
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
require( "marko/node-require" );
const express = require( "express" );
const markoExpress = require( "marko/express" );
const template = require( "./template.marko" );
const app = express();
app.use(markoExpress());
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" ]
});
});
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/
Last Updated :
06 Apr, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...