cncjs-widget-boilerplate

    0.2.0 • Public • Published

    cncjs-widget-boilerplate build status Coverage Status

    Custom widget support is only available for CNCjs 1.9.10 or later versions

    Installation

    npm i -g npm # Upgrade NPM to the latest version 
    npm install

    Development Guide

    Create a directory under src/widgets and put your code in there.

    src/
       widgets/
          MyApp/index.js
    

    When connecting to a local development server, you can specify the "widget" query parameter within your browser to switch between widgets (e.g. http://localhost:5000/?widget=MyApp).

    Query Parameters

    Name Description
    token (Required) An authentication token to enable secure communication. The token will be automatically set by CNCjs.
    host (Optional) Specifies the host to connect to. Defaults to an empty string.
    widget (Optional) Specifies a folder name under 'src/widgets'. Defaults to 'ReactApp'.

    Examples

    React App

    There is a widget written with React, you can download it from the releases page: https://github.com/cncjs/cncjs-widget-boilerplate/releases

    image

    Development

    Run npm run dev to start a local development server for development, then connect to http://localhost:5000 and wait until bundle finished.

    You can specify a mount path to test your widgets with CNCjs:

    cnc -vv --mount /widget:/path/to/cncjs-widget-boilerplate/dist

    Production

    Run npm run prepublish to build production code. It will output index.html, fonts, images, and JavaScript files to the dist folder.

    After that, you can copy all dist files to a directory (e.g. /home/widget), and specify a mount path for the static directory, as shown below:

    mkdir -p /home/widget
    cp -af /path/to/cncjs-widget-boilerplate/dist/* /home/widget
    cnc --mount /widget:/home/widget

    Configure CNCjs

    1. Click Manage Widgets to add a custom widget
      image

    2. Click the icon to configure widget settings
      image

    3. If everything goes well, you will see the loaded widget, like so:
      image

    License

    MIT

    Install

    npm i cncjs-widget-boilerplate

    DownloadsWeekly Downloads

    0

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • cheton