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
// 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/