![\"yeoman-logo\"](\"\/blog\/wp-ttn-blog\/uploads\/2014\/12\/yeoman-logo.png\"){kind=logo}
<\/p>\n<\/p>\n
Ever wondered that the most time consuming tasks are the one you have done numerous times on numerous projects, and why the hell am i doing it again?<\/p>\n
The most basic of examples of this is Scaffolding<\/strong> an app, you have to do a lot of things, repetitive things to get the app structure up to speed. This is an even bigger problem with NodeJS projects, and they do not have a sort of “Pre-defined \/ Fixed structure”<\/em> if i may.<\/p>\n But that may be the thing of the past, because there’s a new sheriff in town, to get the burden off of all your trivial and important task related stuff, and do so with the ease and panache that will make you a believer.<\/p>\n Yeoman<\/strong> is an app scaffolding tool that helps you kickstart new projects, prescribing best practices and tools to help you stay productive. Yeoman provides a workflow to improve productivity and ease of development.<\/p>\n Yeoman itself comprises of three main components:-<\/p>\n In order to use Yeoman<\/strong> you need to have Assuming you have NodeJS<\/strong> Installed, install Yeoman<\/strong> as follows:<\/p>\n [js] The Now, Yeoman<\/strong> is a very versatile tool, i.e. its functionality can be extended by anyone, this is possible because of the integration of something called There are a lot of generators available, for multiple languages and frameworks, Frontend, backend etc.<\/p>\n Since we already have node installed<\/a>, why not scaffold a Generators are the fuel of Yeoman, to build our app we’ll use a generator called Let’s install it now:<\/p>\n [js] This will install your generator to be used by yeoman. Next we need to create a project directory in which Yeoman<\/strong> will scaffold our app.<\/p>\n [js] Let’s generate our app by running the [js] This will launch you into a interactive app configuration setup, where you can easily add\/remove options upon your own requirements.<\/p>\n It will ask you certain configuration for both client and server:<\/p>\n Client<\/strong><\/p>\n # Server<\/strong><\/p>\n # All this will give us a directory structure like following:<\/p>\n [js] [\/js]<\/p>\n With all the required Grunt tasks to The above app structure is really good because we only have a limited number of files within an Now how do i add more entities, surely copying and pasting the files would be one way to do it, but folks at yeoman have this covered as well.<\/p>\n The backend entities are called endpoints, which include the [js] This will create a number of files for us to use directly including In fact there are many commands for us to do a number of tasks, both for generating code templates for Backend as well as the frontend.<\/p>\n Angular Routes<\/strong><\/p>\n [js] create client\/app\/myroute\/myroute.js Angular Controller<\/strong><\/p>\n [js] Directives \/ filters<\/strong><\/p>\n [js] [js] Similar commands for To run our app we dont need to do anything special, Grunt will figure this out .. [js] \/\/DISTRIBUTION\/PRODUCTION ENV This will run our app with desired environment and even open up a browser for us \ud83d\ude09 cool huh!<\/p>\n Running tests<\/strong><\/p>\n To run all our tests run:<\/p>\n [js] \/\/ONLY SERVER TESTS \/\/ONLY CLIENT TESTS Simple \ud83d\ude42<\/p>\n All the code written means nothing if it’s not deployed. Yeoman also provides us extremely simple deployment options.<\/p>\n Yeoman currently provides easy deployment for [js] \/\/OPENSHIFT (Assuming all the configuration is already done once)<\/p>\n All the power Learn more about Yeoman<\/a> and angular-fullstack<\/a>.<\/p>\n Till next time, Yeoman is an app scaffolding tool that helps you kickstart new projects, prescribing best practices and tools to help you stay productive. Yeoman provides a workflow to improve productivity and ease of development.<\/p>\n","protected":false},"author":85,"featured_media":14624,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3},"categories":[1185],"tags":[955,1467,1466,1177,1303,1468,1469],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/14616"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=14616"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/14616\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media\/14624"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=14616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=14616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=14616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Routing<\/code>, Dependency management<\/code>, packaging<\/code>, deployment<\/code> all taken care of by this nifty tool, which should be in every developers tool kit.<\/p>\nWhat is Yeoman?<\/h2>\n
![\"yeoman\"](\"\/blog\/wp-ttn-blog\/uploads\/2014\/12\/yeoman.png\")
<\/p>\n\n
Grunt\/Gulp<\/code><\/strong> : The build system to build\/preview\/test your app<\/li>\nBower<\/code><\/strong> : Frontend dependency management tool<\/li>\nYeoman<\/code><\/strong> : for scaffolding out apps, writing grunt tasks and bower dependencies<\/li>\n<\/ul>\nEnough talk! Show me the code<\/h2>\n
NodeJS<\/code> installed, NodeJS<\/code> comes with the super awesome NPM (Node Package Manager)<\/code> which allows us to use many such tools as Yeoman<\/strong>, Grunt<\/strong> and Bower<\/strong>.<\/p>\n
\nnpm install -g yo
\n[\/js]<\/p>\n-g<\/code> denotes that this module will be installed globally and will be available from the command-line. Sweet.<\/p>\nGenerators<\/code> which allow yeoman to scaffold apps quickly.<\/p>\nNodeJS<\/code> app complete with full AngularJS<\/code> integration.<\/p>\ngenerator-angular-fullstack<\/code> complete with MongoDB<\/code>, Mongoose<\/code>, SocketIO<\/code>, Passport<\/code> integration out of the box \ud83d\ude09<\/p>\n
\nnpm install -g generator-angular-fullstack
\n[\/js]<\/p>\n
\nmkdir my-yeoman-project
\ncd my-yeoman-project
\n[\/js]<\/p>\nangular-fullstack<\/code> with yo<\/code>:<\/p>\n
\nyo angular-fullstack
\n[\/js]<\/p>\nScripts<\/code> – Javascript \/ Coffeescript
\n# Markup<\/code> – HTML \/ Jade
\n# Stylesheets<\/code> – CSS \/ Sass \/ Less
\n# Angular router<\/code> – ngRoute \/ uiRouter<\/p>\nUse MongoDB with Mongoose<\/code> – (Requires mongodb installed and running)
\n# Basic Authentication<\/code> – Add basic Login \/ Register schemes
\n# Additional OAuth Strategies using Passport<\/code> – Google \/ Facebook \/ Twitter
\n# SocketIO<\/code><\/p>\n![\"Configuration](\"\/blog\/wp-ttn-blog\/uploads\/2014\/12\/step8-edit.jpg\")
<\/a><\/p>\n
\n_
\n\u251c\u2500 client
\n\u2502 \u251c\u2500 app – App specific components
\n\u2502 \u251c\u2500 assets – Custom assets: fonts, images, etc\u2026
\n\u2502 \u251c\u2500 components – Our reusable components
\n\u2502
\n\u251c\u2500 e2e – Protractor end to end tests
\n\u2502
\n\u2514\u2500 server
\n \u251c\u2500 api – Our apps server api
\n \u251c\u2500 auth – For handling authentication
\n \u251c\u2500 components – Our reusable or app-wide components
\n \u251c\u2500 config – Where we do the bulk of our apps configuration
\n \u2502 \u2514\u2500 local.env.js – Environment variables
\n \u2502 \u2514\u2500 environment – Configuration specific to the node environment
\n \u2514\u2500 views – Server rendered views<\/p>\ncombine<\/code>, minify<\/code>, building<\/code> etc. and cleanly written angular components<\/code> and services<\/code> to help us quickly get started.<\/p>\nEven more ..<\/h2>\n
Entity<\/code>, there can be multiple entities with separate controllers, models etc.<\/p>\ncontrollers<\/code>, models<\/code> (with full CRUD impemented), and RESTful<\/code> routing. To add more endpoints we simply have to tell yeoman<\/code> to generate it for us, like so:<\/p>\n
\nyo angular-fullstack:endpoint your-endpoint-name
\n[?] What will the url of your endpoint to be? (\/api\/your-endpoint-name)
\n create server\/api\/your-endpoint-name\/index.js
\n create server\/api\/your-endpoint-name\/your-endpoint-name.controller.js
\n create server\/api\/your-endpoint-name\/your-endpoint-name.model.js
\n create server\/api\/your-endpoint-name\/your-endpoint-name.socket.js
\n create server\/api\/your-endpoint-name\/your-endpoint-name.spec.js
\n[\/js]<\/p>\ntests<\/code> and SocketIO<\/code> file (if configured).<\/p>\n
\nyo angular-fullstack:route myroute
\n[?] Where would you like to create this route? client\/app\/
\n[?] What will the url of your route be? \/myroute<\/p>\n
\n create client\/app\/myroute\/myroute.controller.js
\n create client\/app\/myroute\/myroute.controller.spec.js
\n create client\/app\/myroute\/myroute.html
\n create client\/app\/myroute\/myroute.scss
\n[\/js]<\/p>\n
\nyo angular-fullstack:controller user
\n[?] Where would you like to create this controller? client\/app\/
\n create client\/app\/user\/user.controller.js
\n create client\/app\/user\/user.controller.spec.js
\n[\/js]<\/p>\n
\nyo angular-fullstack:directive myDirective
\n[?] Where would you like to create this directive? client\/app\/
\n[?] Does this directive need an external html file? Yes
\n create client\/app\/myDirective\/myDirective.directive.js
\n create client\/app\/myDirective\/myDirective.directive.spec.js
\n create client\/app\/myDirective\/myDirective.html
\n create client\/app\/myDirective\/myDirective.scss
\n[\/js]<\/p>\n
\nyo angular-fullstack:filter myFilter
\n[?] Where would you like to create this filter? client\/app\/
\n create client\/app\/myDirective\/myFilter.filter.js
\n create client\/app\/myDirective\/myFilter.filter.spec.js
\n[\/js]<\/p>\nServices<\/code>, decorators<\/code> etc.<\/p>\nRunning \/ Testing<\/h2>\n
\nwe simply have to do:<\/p>\n
\n\/\/DEVELOPMENT
\ngrunt serve<\/p>\n
\ngrunt serve:dist
\n[\/js]<\/p>\n
\n\/\/RUN ALL THE TESTS
\n grunt test<\/p>\n
\ngrunt test:server<\/p>\n
\ngrunt test:client
\n[\/js]<\/p>\nDeployment<\/h2>\n
OpenShift<\/code> and Heroku<\/code>. To deploy to either of these services just do:<\/p>\n
\n\/\/HEROKU
\nyo angular-fullstack:heroku <\/p>\n
\nyo angular-fullstack:openshift
\n[\/js]<\/p>\nYeoman<\/code> provides us is extremely overwhelming at first, but once you get in the groove, it is a brilliant and nifty little tool in our development workflow which help us save time and energy and allows us to focus on important tasks and problems.<\/p>\n
\nCiao<\/p>\n","protected":false},"excerpt":{"rendered":"