CarteBlanche
NOTE: This is a highly experimental project. Please help us by not sharing it yet :)
Setup
$ git clone https://github.com/pure-ui/carte-blanche
$ npm install
Usage & Plugin Development
Development
Client
For the development of the client (client/
folder) we prepared some example apps.
To use them, run
$ npm run example:<examplename>
$ npm run example:dev
You can then visit http://localhost:8080
to see the app and http://localhost:8080/carte-blanche
to see the carte-blanche!
Note:
$ npm start
aliases to$ npm run example:dev
Here the full list of examples:
$ npm run example:dev # Complex PropTypes, almost no styling. Perfect for dev
$ npm run example:profile # Simple, visually nice example
$ npm run example:dest # Has the dest option enabled at /examples/
$ npm run example:radium # Styles the example app with Radium
$ npm run example:jss # --“-- JSS
$ npm run example:aphrodite # --“-- Aphrodite
To build the client, run $ npm run client:build
.
Core
We use iron-node
to develop the webpack plugin. (webpack-plugin/
folder) iron-node
runs your Node process in Electron, meaning you get access to the full Chrome DevTools for the Node process. This allows you to use debugger;
statements and step through your code, be able to console.log
complex data types (Objects, Arrays,…) and much more!
$ npm run example:<examplename>:iron
Note: this command doesn't exist for all examples, but would be trivial to add
Plugins
One important plugin lives in this repo, the ReactPlugin. It's in the plugins/react/
folder, and has it's entire own build process. Run one of the examples from above, and in another terminal instance round
$ npm run plugins:react:dev
to get hot reloading of the ReactPlugin.
To build the client for publishing a new release, run
$ npm run plugins:react:build
Utils
We have some shared utils, which we use in both the client and some plugins in the utils/
folder. We publish them separately, and they have their own building, testing and linting process. Develop them using TDD (test driven development) by running npm run test -- --watch
in the utils/
folder.
Structure
client
└── client.js # The client users see at /carte-blanche
examples # The Example Apps used for development and demos
plugins # Some plugins we wrote ourselves
├── react # The ReactPlugin
└── source # SourcePlugin (shows the source code of the component)
utils # Some shared utilities (`carte-blanche-utils`)
webpack-plugin # The main webpack plugin
├── src # The source code
└── index.js # The main entry file