https://github.com/cncjs/cncjs-widget-boilerplate
Creating custom widgets for CNCjs
https://github.com/cncjs/cncjs-widget-boilerplate
cncjs widget
Last synced: about 1 year ago
JSON representation
Creating custom widgets for CNCjs
- Host: GitHub
- URL: https://github.com/cncjs/cncjs-widget-boilerplate
- Owner: cncjs
- License: mit
- Created: 2017-09-08T11:02:55.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-11-22T15:07:32.000Z (over 1 year ago)
- Last Synced: 2025-04-21T03:18:52.095Z (about 1 year ago)
- Topics: cncjs, widget
- Language: JavaScript
- Homepage: https://cncjs.github.io/cncjs-widget-boilerplate/
- Size: 3.05 MB
- Stars: 11
- Watchers: 7
- Forks: 15
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cncjs-widget-boilerplate
**Custom Widget for CNCjs**
## Version Compatibility
Custom Widget Version | CNCjs Version
:-------------------- | :------------
0.x | 1.9.10 or 1.9.11
1.x | >=1.9.12 or later patch versions
2.x | >=2.0.0 or later versions
## Installation
```bash
yarn install
```
## Development Guide
Create a directory under src/widgets and put your code in there.
```
src/
widgets/
custom/index.jsx
```
Run `yarn dev` to start a development server.
### 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.
### Examples
## 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:
```bash
cncjs -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:
```bash
mkdir -p /home/widget
cp -af /path/to/cncjs-widget-boilerplate/dist/* /home/widget
cncjs --mount /widget:/home/widget
```
### Configure CNCjs
1. Click Manage Widgets to add a custom widget
2. Click the 
icon to configure widget settings
3. If everything goes well, you will see the loaded widget, like so:
## License
MIT