webrender

Run live web and build static site

Usage

Suppose that we want to build a front-end only website with pure HTML/CSS/JS or React, Vue, whatever. Our repo may look like following folder structure:

my-project
 - package.json
 - src/
     - assets
          - css
              - main.css
              - theme.css
          - js
              - main.js
              - another-modules.js
     - static
        - fonts
        - images
        - favicon.ico
     - templates
       - index.html
       - about.html
       - faq.html
     - config.json

Here the website source code is placed within src folder. However the folder name can be anything else. templates dir is not required. If it does exist, webrender will try to parse them with nunjucks template engine. Otherwise, the HTML files located at root folder will be used.

View examples/ for reference.

In order to use webrender, let's install it:

npm i webrender

Then you can use it with command line or call it from code.

Command Line

Add these 2 commands to script section of the package.json file, for example:

  "scripts": {
    "run": "DEBUG=webrender:* webren run ./src",
    "build": "DEBUG=webrender:* webren build ./src ./dist"
  },

Since now, we can run the website within src folder to view and develop it as below:

npm run dev

Once everything is ok, we can build a static site into dist folder:

npm run build

Programmatically

Run a website located at ./src folder:

const run = require('webrender/scripts/run');
run('./src');

This approach is helpful to work with nodemon for auto reloading.

  "scripts": {
    "dev": "DEBUG=webrender:* PORT=4728 nodemon server.js -e js,css,html,json,yaml"
  },

You can even add more express middlewares:

const path = require('path');

const cors = require('cors');
const favicon = require('serve-favicon');

const middlewares = [
  cors(),
  favicon(path.join(__dirname, 'public', 'favicon.ico')),
];

run('./src', middlewares);

Lastly, just build static version of this website to ./dist folder:

const build = require('webrender/scripts/build');
build('./src', './dist');

Test

git clone [email protected]:ndaidong/webrender.git
cd webrender
npm i
npm test

License

The MIT License (MIT)