simple-static-router
v1.1.0
Published
The Simple Static Router is a lightweight, easy-to-use HTTP server that serves static HTML pages. It comes with a built-in cache system and a simple way to include CSS and JavaScript files within your HTML pages.
Downloads
3
Readme
Simple Static Router
The Simple Static Router is a lightweight, easy-to-use HTTP server that serves static HTML pages. It comes with a built-in cache system and a simple way to include CSS and JavaScript files within your HTML pages.
Features
- Routing for multiple pages
- Sub-routing for nested pages
- Custom 404 page
- Built-in cache for HTML pages
- Support for adding styles and scripts to HTML pages
- Support for embedding variables in HTML pages
Usage
npm i simple-static-router
First, create an instance of the Router class by providing a port number and optional settings. The default settings are:
{
pagesDir: 'pages', // directory where HTML pages are stored
stylesDir: 'styles', // directory where styles are stored
scriptsDir: 'scripts', // directory where scripts are stored
homePage: 'home', // name of the home page (page for the "/" route)
errorPage: 'notFound', // name of the 404 page
defaultStyle: 'style.css', // name of the default style
defaultScript: 'script.js', // name of the default script
htmlFt: '.html', // file type for HTML pages
clearCache: 10 // seconds to clear the cache
}
For Example:
const Router = require('simple-static-router');
const router = new Router(3000);
To start the server, call the start method of the Router instance:
router.start();
To specify custom settings:
const router = new Router(3000, {
pagesDir: 'myPages',
stylesDir: 'myStyles',
scriptsDir: 'myScripts',
homePage: 'index',
errorPage: '404',
defaultStyle: 'main.css',
defaultScript: 'main.js',
htmlFt: '.htm',
clearCache: 30
});
// OR for editing specific settings:
const router = new Router(3000);
router.SETTINGS.HTML_FT = ".htm";
router.SETTINGS.CLEAR_CACHE_TIMING: 25 // seconds
Caching
Caching
The router implements a simple cache that stores the processed HTML pages.
The cache is cleared every clearCache
seconds (as specified in the settings object passed to the constructor).
You can disable caching by setting clearCache
to 0
.
File Management
In SS-Router, you will need to create a pages
directory at the root of your project.
Inside this directory, you should create a .html
file for each page you want to be able to access on your server.
You can also create subroutes by including a +
symbol in your file names.
For example, if you want to create a route at /about/team
, you would create a file called about+team.html
.
In addition to the pages
directory, you can also create a styles
and scripts
directory to store your CSS and JavaScript files, respectively.
These will be automatically included in your HTML pages when you use the provided syntax.
Events
Two events get called on the router instance, one immediately when a request is recieved and the other when the html is being sent back as response;
router.on('get', (req, res) {
// ...idk, change some variable value for a specific route ig, idk
})
router.on('page', (route, htmlPage) {
// ...idk, no clue
})
get
event gets called immediately on recieving a request.
page
event gets called afterwards (nanosecs later), when the processing is done and page is being sent.
get
can be used to modify/process some values before rendering a route.
page
can be used to play with the actual html or route after the page is sent.
HTML Page Structure
To specify styles and scripts in an HTML page, use the following syntax: For styles:
<style>
/*[ "style.css", "error.css" ]*/
</style>
say you only want the default stylesheet ("style.css" : or whatever you specified in the settings)
<style>
/* [] */
</style>
For scripts:
<scripts>
// [ "script.js", "error.js" ]
</scripts>
OR, for default script only ("script.js"):
<scripts>
// []
</scripts>
Embed variables
Define them in the variable
propery of the Router:
router.variable = {
name: "SS-Client"
}
Refer to them as variable.name
.
For HTML:
<body>
<h1>README for <!--variable.name--> (all lowercase and no space in between)</h1>
<body>
For JS:
function click() {
alert("/*variable.name*/'s README"); // lowecase, no space
}