Statico Node Package(NPM)

Chathula Sampath Perera
Chathulasss
Published in
2 min readMay 13, 2016

This small tool can read any static file and make it dynamic.specially made to make html static files into dynamic.

Many people who use NodeJS use express, meteor, sails, koa etc like frameworks to render a one or two html pages into a web application. These are good with big works. but why we use a huge framework for a small work like rendering a html page or two to web application with few basic routes.This is why “Statico” is handy! with small peace of code you can render a html page into web browser with routes. not only that, “Statico” can automatically identify CSS and JS files which are linked to the html page and make a route to them. you don’t need to make routes for external linked files!

Why “Statico” is Awesome!

— “Statico” can automatically link external CSS and Javascript files to the HTML page

Note

— You must validate req.url correctly. (i have explained a '/' and '/me' route) if you don't, it will break the code

Usage

require statico module

var statico = require('statico');

use statico .use method to read file

var data = statico.use('filename.html');
data.then(function (data)) {
console.log(data);
}

use statico .use to change content dynamically and return the changed data

var data = statico.use('filename.html', { "title" : "My title", "text" : "this is the text" });
data.then(function (data)) {
console.log(data);
}

OR

statico.use('filename.html', { "title" : "My title", "text" : "this is the text" }, function (data) {
console.log(data);
});

filename.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title : ${title}</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>Text : <span style="color: #333;">${text}</span></h1>

<a id="click" href="#">Click me</a>
<a href="me.html">Me</a>

<script type="text/javascript">
console.log("loged");
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="js/file.js"></script>
<script type="text/javascript" src="js/file2.js"></script>
</body>
</html>

use statico with http web server

var http = require("http");
var statico = require('statico');

var file = statico.use("filename.html", { "title" : "My title", "text" : "This is text" });

http.createServer(function (req, res) {
statico.setup(req, res);
if (req.url === '/') {
file.then(function (data) {
res.writeHead(200, { "Content-Type" : "text/html" });
res.write(data);
res.end();
});
} else if (req.url === '/me') {
var d = statico.use('me.html');
d.then(function (data) {
res.writeHead(200, { "Content-Type" : "text/html" });
res.write(data);
res.end();
});
}
}).listen(8000);

Node Package(NPM) : Statico

Github : Statico

T
hank You!

Chathula Sampath Perera

--

--