This package provides the core React component suite for Dash.

1. Install the dependencies with:

$ npm i

2. Build the code:

$ npm run build-dev

3. Install the library

$ cd dash-core-components
$ npm run copy-lib
$ python setup.py install

I recommend installing the library and running the examples in a fresh virtualenv in a separate folder:

$ mkdir dash_examples # create a new folder to test examples
$ cd dash_examples
$ virtualenv venv # create a virtual env
$ source venv/bin/activate # use the virtual env

(and then repeat step 3).

4. Add the following line to your Dash app

app.scripts.config.serve_locally = True

You can start up a demo development server to see a demo of the rendered components:

$ builder run demo
$ open http://localhost:9000

You have to maintain the list of components in demo/Demo.react.js.

$ npm test

$ npm run test-watch

$ npm run test-debug

1. Wait until Chrome launches.
2. Click the "DEBUG" button in the top right corner.
3. Open up Chrome Devtools (Cmd+opt+i).
4. Click the "Sources" tab.
5. Find source files

• Navigate to webpack:// -> . -> spec/components to find your test source files.
• Navigate to webpack:// -> [your/repo/path]] -> dash-core-components -> src to find your component source files.

6. Now you can set breakpoints and reload the page to hit them.
7. The test output is available in the "Console" tab, or in any tab by pressing "Esc".

In your test, append .only to a describe or it statement:

describe.only('Foo component', () => {
    // ...
});

1. Build development bundle to lib/ and watch for changes

    # Once this is started, you can just leave it running.
    $ npm start
   

2. Install module locally (after every change)

    # Generate metadata, and build the JavaScript bundle
    $ npm run install-local
   
    # Now you're done. For subsequent changes, if you've got `npm start`
    # running in a separate process, it's enough to just do:
    $ python setup.py install
   

3. Run the dash layout you want to test

    # Import dash_core_components to your layout, then run it:
    $ python my_dash_layout.py
   

Before publishing to PyPi, you can test installing the module locally:

# Install in `site-packages` on your machine
$ npm run install-local

$ npm run uninstall-local

For now, multiple steps are necessary for publishing to NPM and PyPi, respectively. TODO: #5 will roll up publishing steps into one workflow.

Ask @chriddyp to get NPM / PyPi package publishing access.

1. Preparing to publish to NPM

    # Bump the package version
    $ npm version major|minor|patch
   
    # Push branch and tags to repo
    $ git push --follow-tags
   

2. Preparing to publish to PyPi

    # Bump the PyPi package to the same version
    $ vi setup.py
   
    # Commit to github
    $ git add setup.py
    $ git commit -m "Bump pypi package version to vx.x.x"
   

3. Publish to npm and PyPi

    $ npm run publish-all
   

We use Builder to centrally manage build configuration, dependencies, and scripts.

To see all builder scripts available:

$ builder help

See the dash-components-archetype repo for more information.