7 thoughts on “Yeoman, Angular and D3 – A solid stack for web apps”

  1. Hi Oscar, nice slides, thanks for this. One question how do I create a dist that includes the d3 dependencies? I created my yeoman+d3 app & it works great locally when I run “grunt serve”. However when I try “grunt server: dist”, I get “Failed to load resource: the server responded with a status of 404 (Not Found) , http://localhost:9000/bower_components/d3/d3.js“.

    I thought I could sort it by including the following in index.html:

    and then running “grunt build” before trying “grunt server: dist” again but with no success. I’m trying to prepare my app for pushing to Heroku, any help would be greatly appreciated.

    thanks

    Reply

    1. Hey Eoiny,
      Thanks for comments.
      Did you install d3 via bower? If so did you add --save?
      Normally grunt serve will inject directly into the index.html page (if you have not changed the commented lines <!-- bower:js --> )below
      the comment for bower:js automatically.
      I would try going to your terminal and on your repo doing a bower install d3 --save
      and then make sure your index file is pristine.
      before running grunt build do a grunt serve so that the index file is recreated with the right bower component injected
      then run a grunt build and you should be golden

      Best of luck!

      Reply

      1. Thanks for the super quick response Oscar! So I deleted the directory and started again and this time “bower_components/d3/d3.js” got added to index.html automatically after I added the “–save” to the “bower install d3 –save”… but still no joy. After “grunt:build” and then “grunt serve:dist” I get the same message. This is my github if you had a little time to spare and saw something obviously wrong. 🙂
        https://github.com/eoiny/nilewater/tree/master

      4. Hi Alan, I apologise I’ve been cleaning up my GitHub account and this must have slipped. There really isn’t any issue. It was using angular 1.x and injecting the chart via directives. Data was handled by a service. Now with Angular 2 that is all gone so not sure how much worth it is reliving this.

  2. Oscar it works! Thank you so much for your amazing generosity for taking the time to do this for me. I’m currently juggling a new baby(our 1st) and extremely tight deadlines at work this week ( I mess around with spreadsheets in my day job to pay the bills), the programming is something I love but only get to learn it in the evenings. I have been messing around with JS and d3 for a while now and recently discovered angularjs and completed the “shaping up with AngularJS” on codeschool. I was trying to push this tutorial;

    http://www.robinwieruch.de/?p=6#comment-136

    one step further by deploying it on Heroku. I’m not a 100% why your dist code works and Robin’s doesn’t, I’m guessing maybe something to do with “d3Service.d3()” but I will study your code, along with my new “D3 on AngularJS” book over the coming days (between nappy changes..) . Thanks for your time, you have given me such a positive foundation to move forward and build on now, your help is very much appreciated.

    Reply

Leave a comment