pejvak v1.0.6
pejvak is a fast web framework with minimum dependencies and small size for Node.js. it has an embeded template rendering engine. I have just created pejvak
for my personal projects in the first place.
Installation
This is a Node.js module available through the npm registry.
Before installing pejvak, install node.js.
first create a package.json
with
the npm init
command.
then use npm install
:
$ npm install pejvak
How to use
Example 1
import pejvak from "pejvak"
let srv = new pejvak({ port: 80 });
srv.handle("GET", "/", (req, res) => {
res.send("This is a GET method");
});
srv.start();
Example 2
assuming your project folder structure is like this:
ProjectFolder
|
|__node_modules
| |__pejvak
| |__jquery
|
|__view
| |__home.pejvakhtml
| |__rendercode.pejvakhtml
| |__main.template
|
|__www
| |__static.html
| |__...
|
|__index.js
|__package-lock.json
|__package.json
example project files:
pejvak constructor
has 3 parameters.
- settings
- routes
- virtualPaths
settings (1st parameter)
the structure should be something like this:
const settings = {
www: "./www", //main www folder where you should place static files(html,css,local js files, images, ...)
view: "./view", //view folder containing `.template` and `.pejvakhtml` files
port: 80, //http port number
renderFileExtension: ".pejvakhtml", //default pejvak rendering file extension (usually: ".pejvakhtml")
forbidenExtensions: [".pejvakhtml", ".pem"], //all forbidden file extensions from direct http requests
https: { //in case of using https
port: 443, //https secure port
keyFile: "./key.pem", //https key file location path
certFile: "./cert.pem" //https certificate file location path
}
}
routes (2nd parameter)
you can set some static routes when you don't need to run a block of code to render. for example assume that you have a static rendercode
page and a simple static html
. then you can set the routing path for them at the initialize point of pejvak server:
const routes = {
"/rendercode": { file: "/rendercode.pejvakhtml", template: "/main.template" },
"/static": { file: "/static.html" },
};
virtualPaths (3d parameter)
here you can bind any unique path to access to the desired module folder. virtual paths makes the module files accessible through web:
const vritualpaths = {
"/js/jquery": "node_modules/jquery/dist",
}
complete index.js file should be like this:
/** index.js */
import pejvak from "pejvak"
const settings = {
www: "./www",
view: "./view",
port: 80,
renderFileExtension: ".pejvakhtml",
forbidenExtensions: [".pejvakhtml"],
};
const routes = {
"/rendercode": { file: "/rendercode.pejvakhtml", template: "/main.template" },
"/static": { file: "/static.html" },
};
const vritualpaths = {
"/js/jquery": "node_modules/jquery/dist",
};
let srv = new pejvak(settings, routes, vritualpaths);
srv.handle("GET", "/", (req, res) => {
res.render("home.pejvakhtml", "main.template", { user: "rick", role: "admin" });
});
srv.handle("POST", "/gettime", (req, res) => {
res.send(new Date().toLocaleTimeString()).end();
});
srv.start();
<!-- main.template -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{@title}</title>
<style>
body { padding: 10px; }
.menu { margin: 5px; border: 1px solid #555; border-radius: 5px; padding: 10px; font-size: 1.5em; }
</style>
{@head}
</head>
<body>
<a class="menu" href="/">Home</a>
<a class="menu" href="/rendercode">render code</a>
<a class="menu" href="/static">static</a>
{@content}
{@script}
</body>
</html>
<!-- home.pejvakhtml -->
@part:title {home page} part:title;
@part:head
{
<style>
span { color: red; }
</style>
} part:head;
@part:content
{
<h2>home page is rendered with model data</h2>
<h3>the user <span>${model.user}</span> has role <span>${model.role}</span></h3>
<button onclick="gettime()">get server time</button>
<span id="time"></span>
} part:content;
@part:script
{
<script>
function gettime() {
$.ajax({
type: "POST",
url: "/gettime",
}).done(function (data) {
$("#time").html(data);
});
}
</script>
<!-- consider using of "/js/jquery/..." has been defined as a virtual path before -->
<script src="/js/jquery/jquery.min.js"></script>
} part:script;
<!-- rendercode.pejvakhtml -->
@part:title {rendercode page} part:title;
@part:head
{
<style>
body { background-color: rgb(83, 158, 163); }
* { color: white; border-color: white !important; }
span { font-size: 2em; }
</style>
} part:head;
@part:content
{
<h2>the matrix is filled with server side js rendering code</h2>
@for(var i = 1; i < 5; i++) {
<span style="color: yellow"> ${i} </span>
@for(var j = 1; j < 10; j++) {
<span style="color: aqua"> ${j} </span>
@}
<br/>
@}
} part:content;
probably you have noticed some {@partname}
tag style in the above code. this format is used in the template designing feature of pejvak and will be explained later (Template structure).
also @
char at the beginning of lines (other than parts) means that the js code is going to render at the server side.
Template structure
in a .template
file you can define dynamic parts in the format of {@partname}
. you can choose any desired name.
...
<head>
{@name}
</head>
...
parts are replaced with the given value during the rendering process. then inside .pejvakhtml
files you can define contents of each part separately in the following format:
@part:name {
...(content)...
} part:name;
Rendering javascript codes
you can use any javascript code inside .pejvakhtml
files which is going to run during the rendering process. to do so, just add the @
at the beginning of the line.
@for(var i = 1; i < 5; i++) {
<span>${i}</span>
@}
Docs
coming soon