Problem with "Writing your own components"

Dash Python
1

Hi everyone,

I’m having issues to run the tutorial about building your own components as shown on https://plot.ly/dash/plugins

I might be missing something crucial here, but I’m not able to actually run the example component with python usage.py. The error I’m getting is (my component was called jan-test):

python usage.py 

Traceback (most recent call last):
  File "usage.py", line 1, in <module>
    import jan_test
  File "~/Plotly/DashComponentTrials/jan-test/jan_test/__init__.py", line 10, in <module>
    'jan_test'
  File "~/Plotly/DashComponentTrials/venv/local/lib/python2.7/site-packages/dash/development/component_loader.py", line 24, in load_components
    with open(metadata_path) as data_file:
IOError: [Errno 2] No such file or directory: '~/Plotly/DashComponentTrials/jan-test/jan_test/metadata.json'

So it seems metadata.json is missing after running builder-init dash-components-archetype

Prior to this, I created a virtualenv in the DashComponentTrials folder and ran

pip install dash==0.20.0  
pip install dash-renderer==0.11.3 
pip install dash-html-components==0.8.0  
pip install dash-core-components==0.18.1 
pip install plotly

as well as

pip install node
pip install npm

then

npm install -g builder-init
builder-init dash-components-archetype

and

npm-install

in the jan-test folder (not sure if that might be the problem?). I don’t seem to have this either:

"The JavaScript bundle and the react-docgen JSON file will be in a folder named after your package alongside an __init__.py file."

Finally running python usage.py after this yields the error above. I assume it’s some sort of dependency/package problem, but would appreciate any help! I’m trying to run this on Ubuntu 16.04 x64.

Many thanks!

PS: running npm install gives this output:

sudo npm install
npm WARN deprecated babel-preset-es2015@6.24.1: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
npm WARN deprecated isparta-loader@2.0.0: Package is deprecated, use https://github.com/deepsweet/istanbul-instrumenter-loader
npm WARN deprecated jade@0.26.3: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated to-iso-string@0.0.2: to-iso-string has been deprecated, use @segment/to-iso-string instead.
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

> phantomjs-prebuilt@2.1.16 install ~/Plotly/DashComponentTrials/jan-test/node_modules/phantomjs-prebuilt
> node install.js

Considering PhantomJS found at /usr/bin/phantomjs
Found PhantomJS at /usr/bin/phantomjs ...verifying
Writing location.js file
PhantomJS is already installed on PATH at /usr/bin/phantomjs
npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.
npm WARN lifecycle jan-test@0.0.1~prepublish: cannot run in wd %s %s (wd=%s) jan-test@0.0.1 npm test && builder run build-dist && npm run copy-lib ~/Plotly/DashComponentTrials/jan-test
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 866 packages in 28.781s
2

That’s odd, I thought that npm install would have generated the metadata.json file. In any case, you can generate the bundle.js and metadata.json file with npm run prepublish (as seen in Step 6).

3

@chriddyp - thanks for the quick answer!

I started from scratch and it turns out that most probably I was running npm install in the wrong folder… here are the steps that finally made python usage.py work:

  1. create local folder e.g. DashComponentTrials and switch to it
  2. set up virtualenv with virtualenv venv and activate with source venv/bin/activate
  3. pip install -r requirements-venv.txt with requirements-venv.txt containing
    dash==0.20.0 # The core dash backend
    dash-renderer==0.11.3 # The dash front-end
    dash-html-components==0.8.0 # HTML components
    dash-core-components==0.18.1 # Supercharged components
    plotly # Plotly graphing library used in examples
    node
    npm
  4. sudo npm install -g builder-init ( I had to use sudo here…)
  5. builder-init dash-components-archetype there enter your components name such as e.g. jan-components in my case and use this for all the other entries, in particular put jan-components also in the last step when asked for the destination directory
  6. now the important bit (as it seems) - switch from the DashComponentTrials folder to cd jan-components AND switch to cd jan_components (note the underscore), which contains the __init__.py and the version.py files
  7. In this folder, run npm install
  8. switch one folder up and run python usage.py

Just in case someone else gets stuck there…

Thanks! (having this set up now will lead to more difficult questions, I suppose… :wink: )

2 Likes