🚀 Simple HTML templating for expressjs.
npm install expandify
First create a HTML file that will serve as your template (index.html).
<!DOCTYPE html>
<html>
<body>
<h1>Hey expandify templates!</h1>
</body>
</html>
Then create a express application with expandify (index.js).
npm i express
const expandify = require("expandify");
const express = require("express");
const path = require("path");
const app = express();
app.get("/", (req, res) => {
res.send(expandify(path.join(__dirname, "index.html")));
});
app.listen(8080);
The expandify function takes the path to your template, and returns a string as your compiled template. You can use the res.send() function to display the compiled template's HTML.
Once you run node index.js, head to localhost:8080 and you will see Hey expandify templates! on the screen!
You can embed any values or expressions into your templates:
<!DOCTYPE html>
<html>
<body>
<h1>1+1 is equal to {{1+1}}</h1>
</body>
</html>
You can also embed variables from your javascript code:
<!DOCTYPE html>
<html>
<body>
<h1>Hey {{name}}</h1>
<p>{{greeting}}</p>
</body>
</html>
Then, when you call expandify() pass the variables like this:
expandify(__dirname + "/index.html", { name: "Bob", greeting: "How's life!" });
You can embed lists (which will be joined), or map through them. This must stay on one line:
<!DOCTYPE html>
<html>
<body>
<ul>
{todos.map(todo => `<li>${todo}</li>`)}
</ul>
</body>
</html>
expandify(__dirname + "/index.html", { todos: ["Do chores", "Do homework"] });
Or embed JSON, which will be stringified for you:
<!DOCTYPE html>
<html>
<body>
<h1>My cool JSON</h1>
{{{key: "value"}}}
</body>
</html>
You can set an attribute equal to any expression with the $:attribute directive:
<!DOCTYPE html>
<html>
<body>
<input type="number" $:value="1+1" />
</body>
</html>
Or set an attribute equal to a variable passed in through your javascript code:
<!DOCTYPE html>
<html>
<body>
<input type="text" $:placeholder="myPlaceholder" />
</body>
</html>
expandify(__dirname + "/index.html", { myPlaceholder: "Hey!" });
A shortcut for assigning a variable to a attribute with the same name is $:attribute: :
<!DOCTYPE html>
<html>
<body>
<input type="text" $:placeholder: />
</body>
</html>
expandify(__dirname + "/index.html", { placeholder: "Hey!" });
To write embedded styles with scss, use the <style lang="scss"> tag:
<!DOCTYPE html>
<html>
<head>
<style lang="scss">
$size: 10rem;
body {
font-size: $size;
}
</style>
</head>
<body>
Large text!
</body>
</html>
You dont have to do anything else, expandify will automatically compile the scss for you!
expandify is MIT-licensed open-source software created by Bharadwaj Duggaraju.
FAQs
🚀 Simple HTML templating for expressjs.
The npm package expandify receives a total of 0 weekly downloads. As such, expandify popularity was classified as not popular.
We found that expandify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."