A simple webserver for serving pages and saving data
Usage no npm install needed!
<script type="module">
import tppFrag from 'https://cdn.skypack.dev/@tpp/frag';
</script>
README
Frag - The Simple Webserver
Ever wanted to quickly spin up a website? Frag is perfect when all you
want is to:
Have a site with a basic a theme and content
Capture user inputs
Frag handles generating the site for you from the templates, and
accepts user inputs from URL-parameters, POST body, or JSON-encoded
data.
Use
First add the package to your repository using your favorite package
manager:
gt; yarn add @tpp/frag
Then require it and use it in your code.
'use strict'
const frag = require('@tpp/frag')
const PORT=3003
/* start the web server on port PORT
* taking the fragments from src/
* and generate the HTML sites in public/
* Data will be stored in data/
*/
frag.start(PORT, 'src', 'public', 'data', (err) => {
if(err) console.error(err)
else console.log(`Site started on ${PORT}`)
})
Frag combines the framework/template with the content to produce the
actual pages it can serve.
Both the framework/tempate and the content are simple HTML files in a
folder. The content files can start with some properties and the rest of
the file is referenced as CONTENT.
TITLE = Easter Offer
DESCRIPTION = 50% off on the best eBook this side of heaven
<div class=container>
<div ...
</div>
The framework/template is a special file called
_layout.html that contains $CONTENT$ and other $PROPERTIES$
that will be replaced by the property values in the content html files.
NOTE: The properties are replaced LITERALLY without any HTML escaping.
This means you should make sure that the property values do not break
your HTML
Different folders can have different _layout.html files for different
parts of your site. Folders without _layout.html files are simply
served without any processing.
User Input and Redirects
Frag saves user input using the append-only log database
Kore. Processing of these
records can be done by adding Kore processors by accesing the kore
instance using frag.kore() and then calling
addProcessor()
Frag saves any user input to the endpoint /save. It can optionally
take a nxt parameter and generate a redirect request so the browser
moves to the next page after saving the current request.
As URL
site.com/save?nxt=index.html&my=data&more=data