Automating Your Front-End Workflow With Yeoman 1.0

Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build …


#codango #developer #development #coder #coding

We're happy to share this resource that we found. The content displayed on this page is property of it's original author and/or their organization.


25 Replies to “Automating Your Front-End Workflow With Yeoman 1.0”

  1. It's a Yeoman tutorial using Angular 🙂 We had to pick one framework and generator to demonstrate. I'm happy to walkthrough how to build something using Backbone, Ember or one of our other generators if there's interest.

  2. We don't currently have support for Zurb Foundation in that generator specifically, but have added it to generator-mobile (a mobile-first web app generator). We'll see what we can do to make it easier to scaffold out projects using Zurb, Pure, TopCoat and a few of the other options available these days.

  3. What are you specifically trying to do with Phantom? If you're running into a particular set of errors could you post them on the Yeoman issue tracker and we'll try our best to help?

  4. Apologies about that. It looks like karma config editing somehow slipped through editing. Open karma.conf.js and comment out the line with 'test/mock/**/*.js', when you run grunt the error you're getting should no longer be there.

  5. One of the challenges with showing people how to build an app from scratch is that you can't assume they know how to use the framework. It was necessary to explain some of the Angular concepts while going through to try making sure no one got lost. Sorry about that!

  6. Nice video, just a little fast.FYI, when running the 'grunt test' as a windows user, the path for the Google Chrome launcher was incorrect. To set the env variable CHROME_BIN, open ..mytodonode_moduleskarma-chrome-launcherindex.js and change the path from (line 25) win32: process.env.LOCALAPPDATA + '\Google\Chrome\Application\chrome.exe' to 'C:\Program Files (x86)\Google\Chrome\Application\chrome.exe'. Likely obvious to actual developers, but might help other noobs 🙂

  7. Is there a tutorial on how to use yeoman with a j2ee webapp in Netbeans ? What would the workflow be ? Testing with grunt server then grunt build to the webapp to test against the j2ee resources ? I can run the unbuild app in the webapp, but how to handle when you want to build the frontend ?

  8. [00:30] Install Yeoman
    [00:48] Install Angular Generator
    [01:03] Scaffold AngularJS Application
    [01:33] Grunt Server
    [01:52] Declaring TODOs
    [02:06] Defining template for TODOs
    [02:49] Button for Adding TODOs
    [02:49] Functionality for Adding TODOs
    [04:30] Button for Removing TODOs
    [04:58] Functionality for Removing TODOs

  9. Could someone tell me why do I need all of this? I assume there is a perfectly good reason why I would want to install all of these packages, but it's not readily apparent to me.

    I always build stuff with bare minimum dependencies, so it feels weird to install bunch of stuff that I have no idea what it even does.

  10. ui-sortable ain't functioning! why?!?
    i have the appropraite dependencies… i've installed angular-ui and referenced it in index.html, i've included jquery and jquery-ui cdn and styles, even installed jquery-ui via bower, i reference it in bower_components dir (not components dir, as shown in video).
    i followed video to the 't'… still cannot get it workin.
    *console showing 'Error: element.sortable is not a function…"
    any idears? please?

Leave a Reply

Your email address will not be published. Required fields are marked *