stitchfix / pyxley

Python helpers for building dashboards using Flask and React
MIT License
2.27k stars 257 forks source link

Solution to installing bower & running datamaps example on Ubuntu 14.04 #7

Closed ianozsvald closed 9 years ago

ianozsvald commented 9 years ago

I had difficulty following your README to install bower. I'm using Linux Mint 17.2 (Ubuntu 14.04). The following is a little exhaustive, hopefully it'll help more-knowledgable Ubuntu users through the process and they could help tighten up the Linux compatibility.

Inside pyxley/examples/datamaps/README.md it notes

## NPM
Install NPM (e.g brew install node). Then run `npm install -g` in the directory containing
package.json. `-g` will make bower available globally.

I'm not a bower or node dev so this bit was a little trial-and-error. It seems I had the Ubuntu nodejs package installed which doesn't provide a node executable (https://github.com/joyent/node/issues/3911) but switching to nodejs-legacy did the job. Next a sudo npm install -g bower worked.

Next I create the 3-line json .bowerrc file as you note and bower install runs, the only question being

Unable to find a suitable version for d3, please choose one:
    1) d3#~3.3.8 which resolved to 3.3.13 and is required by datamaps#0.4.0
    2) d3#~3.5.5 which resolved to 3.5.6 and is required by datamaps-example

where I opted for 2.

Out of interest - how come the .bowerrc file wasn't already in the repo?

Now I see

examples/datamaps $ ls project/static/bower_components/
bootstrap  classnames  d3  datamaps  jquery  pyxley  react  react-bootstrap  require  topojson

Running the demo in my browser works and I see flask report 200 codes in the logs (rather than 404 codes before following bower which I think is the issue here: https://github.com/stitchfix/pyxley/issues/4):

examples/datamaps/project $ python app.py 
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
127.0.0.1 - - [21/Jul/2015 15:20:22] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:20:23] "GET /static/bower_components/bootstrap/dist/css/bootstrap.min.css HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:20:23] "GET /static/bower_components/jquery/dist/jquery.min.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:20:23] "GET /static/bower_components/d3/d3.min.js HTTP/1.1" 200 -
...

I followed the same process in datatables and bower asked

Unable to find a suitable version for d3, please choose one:
    1) d3#~3.3.13 which resolved to 3.3.13 and is required by nvd3#1.7.1
    2) d3#~3.3.8 which resolved to 3.3.13 and is required by datamaps#0.4.0
    3) d3#~3.5.5 which resolved to 3.5.6 and is required by metricsgraphics-example
    4) d3#>=3.4.8 which resolved to 3.5.6 and is required by metrics-graphics#2.5.0

Prefix the choice with ! to persist it to bower.json

? Answer: 3

but this time when I ran the demo, although it runs and I see 200 codes, I don't get anything in the browser (not in Chrome or Firefox). This is the only log info I see

127.0.0.1 - - [21/Jul/2015 15:24:41] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:24:41] "GET /static/bower_components/bootstrap/dist/css/bootstrap.min.css HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:24:41] "GET /static/bower_components/datatables/media/css/jquery.dataTables.min.css HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:24:41] "GET /static/css/main.css HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:24:41] "GET /static/bower_components/jquery/dist/jquery.min.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:24:41] "GET /static/bower_components/datatables/media/js/jquery.dataTables.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:24:41] "GET /static/dataTables.fixedColumns.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:24:41] "GET /static/bower_components/d3/d3.min.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:24:41] "GET /static/bower_components/require/build/require.min.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:24:41] "GET /static/bower_components/react/react.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:24:41] "GET /static/bower_components/react-bootstrap/react-bootstrap.min.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:24:41] "GET /static/conf_int.js HTTP/1.1" 200 -
127.0.0.1 - - [21/Jul/2015 15:24:41] "GET /static/bower_components/pyxley/build/pyxley.js HTTP/1.1" 200 -

Any clue about what's missing to get the demo working?

parth115 commented 9 years ago

@ianozsvald try to replace True with true and False with false in layout.js

ianozsvald commented 9 years ago

@parth115 If I rewrite it and then start python app.py it rewrites project/static/layout.js with the original capitalised 6 occurrences (3 true, 3 false). The file occurs 3 times inside static - any idea which one should be edited?

springcoil commented 9 years ago

I had the exact same issue (hi @ianozsvald) on a MacOSX

springcoil commented 9 years ago

I think @ianozsvald this is resolved now with the Python 3.4 fix and the fix of jinja2 templates

ianozsvald commented 9 years ago

@parth115 - working, thanks! /cc @springcoil

Confirmed working with Python 3.4 (Anaconda) using Ubuntu 14.04 (Linux Mint 17.1).

Using Python 3.4 via an Anaconda environment I can install the code (I'm installing as develop for ease of editing the project):

$ python setup.py develop  # (or install)

Next I go into the examples and following your README:

$ examples/datamaps $ bower install
....<install notes from bower>
Please note that,
    datamaps#0.4.0 depends on d3#~3.3.8 which resolved to d3#3.3.13
    datamaps-example depends on d3#~3.5.6 which resolved to d3#3.5.6
Resort to using d3#~3.5.6 which resolved to d3#3.5.6
....

Next I stepped into the project folder (NOTE maybe you could add cd project/ to the README?) and ran

$ python app.py

and it all worked - thanks :-)

I confirm this also works for "datatables", "custom_react" and "metricsgraphics".

qichaotang commented 8 years ago

Python 2.7 (Anaconda) can be run???