webrender

    2.2.1 • Public • Published

    webrender

    Run live web and build static site

    NPM Build Status Coverage Status

    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 git@github.com:ndaidong/webrender.git
    cd webrender
    npm i
    npm test

    License

    The MIT License (MIT)

    Keywords

    none

    Install

    npm i webrender

    DownloadsWeekly Downloads

    13

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    38.2 kB

    Total Files

    32

    Last publish

    Collaborators

    • dongnd