Yeoman is a Node module to automate your front-end project build process, so that all we as a developer only need to worry about is to code and test. Think of it as a Maven for your next JS based project. It does scaffolding of your project, manage your dependencies and then does the building. To perform these tasks, Yeoman is made up of three tools:
- yo: For scaffolding the application. That means you don’t worry about creating all those directory structures, writing basic JS file to get a project up and running. It magically creates all directory as per industry best practice, along with executable code to get the application up.
- bower: Managing all JS/CSS based dependencies. So next time when you need to include UI-Router in your angular JS application, instead of manually downloading the latest JS file, just update the bower config file and run
- grunt: Building the project to make it production ready. This may include running JSHint, Test Cases, Minifying your JS, CSS files, Uglifying JS files and many other plugin based features.
Let’s Get Started
Since Yeoman comes as a Node module, before we can install Yeoman make sure you have Node installed on your system. If not, it’s a good time to install Node as most of industries front-end framework are now available as a Node Module, and it’s really easy to install new modules once you have Node. To install Node, just go to http://nodejs.org/ and follow the Install instruction.
Back to Business
Assuming you now have Node and Node Package Manager (NPM) installed (NPM automatically gets installed along with Node), let’s install Yeoman. To do so use below command:
npm install -g yo
or if you don’t have sufficient permission, you may need to run it using
sudo npm install -g yo
SideNote: If you are behind a proxy, you might need to first configure npm
npm set config proxy http://proxy-address.com:8000 npm set config https-proxy https://proxy-address.com:8000
After installation, before you can scaffold the application we need to install Yeoman Generators. Yeoman scaffolds different types of application through different Generator (which again are distributed through npm). So for example, if you want to start a AngularJs application you will install generator-angular using npm. There are many Official and Community based generators available, or if you don’t find one which you need… you can create a Generator of your own.
Let’s create a simple AngularJs and Twitter Bootstrap based application
First, install Angular-Bootstrap Generator:
npm install -g generator-angular-bootstrap
You will see many GET and REDIRECT requests. On completion, you will see a message like below:
[email protected]0.4.3 /usr/local/lib/node_modules/generator-angular-bootstrap ├── [email protected]2.3.1 ├── [email protected]2.2.2 ├── [email protected]0.7.2 ([email protected]0.6.6, [email protected]0.4.3) └── [email protected]0.17.1 ([email protected]0.1.0, [email protected]0.1.1, [email protected]1.0.8, firstname.lastname@example.org, email@example.com, firstname.lastname@example.org, email@example.com, firstname.lastname@example.org, email@example.com, firstname.lastname@example.org, email@example.com, firstname.lastname@example.org, email@example.com, firstname.lastname@example.org, email@example.com, firstname.lastname@example.org, email@example.com, firstname.lastname@example.org, email@example.com, firstname.lastname@example.org, email@example.com, firstname.lastname@example.org, email@example.com, firstname.lastname@example.org, email@example.com, firstname.lastname@example.org)
All Set! Create Yeoman Project
Ok great, we have Yeoman! and we have its AngularJs-Bootstrap Generator! Let’s kick-start our project.
Create a project directory, name it ‘YoProject’.
mkdir YoProject cd YoProject
In this new directory, just execute below “yo” command:
During executing of above command, Yeoman will ask you couple of questions required to set up your project. I answered them as below:
[?] What version of angular would you like to use? 1.3.0-beta.15 [?] Which official angular modules would you need? animate, resource, route [?] Any third-party component you might require? twbs/bootstrap (3.2.0), fortawesome/font-awesome (4.1.0), angular-ui/ui-router (0.2.10) [?] What build system would I use? grunt [?] Should I set up one of those HTML preprocessors for you? none [?] Should I set up one of those JS preprocessors for you? none [?] Should I set up one of those CSS preprocessors for you? sass [?] Would you want me to support old versions of Internet Explorer (eg. before IE9)? no [?] What's the base name of your project? YoProject
After answering all question, it will download required libraries and scaffold the application. Once done check the directory content, you will see that every thing you need to get started is already there.
[email protected]:~/eclipse_ws/YoProject$ tree . . +-- app ¦ +-- index.html ¦ +-- scripts ¦ ¦ +-- app.js ¦ ¦ +-- controllers ¦ ¦ ¦ +-- main.js ¦ ¦ +-- directives ¦ ¦ ¦ +-- sample.js ¦ ¦ +-- filters ¦ ¦ ¦ +-- sample.js ¦ ¦ +-- services ¦ ¦ +-- sample.js ¦ +-- styles ¦ ¦ +-- main.css ¦ +-- views ¦ +-- contact.html ¦ +-- features.html ¦ +-- home.html ¦ +-- partials ¦ +-- footer.html ¦ +-- header.html +-- bower.json +-- Gruntfile.js +-- npm-debug.log +-- package.json +-- README.md 9 directories, 17 files
Once your application is created, install bower dependencies using:
These dependencies are downloaded under app/bower_components directory. Next, you can run below grunt command to include these dependencies in index.html file.
[email protected]:~/eclipse_ws/YoProject$ grunt bowerInstall Running "bowerInstall:app" (bowerInstall) task app/index.html modified. Done, without errors.
This command updates the index.html file to include all the dependencies. After change, my
index.html file has these new lines:
Code language: HTML, XML (xml)
.... <!-- build:css styles/components.min.css --> <!-- bower:css --> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" /> <!-- endbower --> <!-- endbuild --> .... <!-- build:js scripts/components.min.js --> <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <!-- endbower --> ....
You can now open up ‘app/index.html’ in browser and see application is up and running and you are all set to start making changes.
You may take a look at the code generated using above steps on GitHub.
To cut-short above process, we first installed Yeoman and its angular-bootstrap Generator. Then we scaffolded the application using ‘yo angular-bootstrap’, installed its dependencies using ‘bower install’ and then built is using ‘grunt bowerInstall’. Once familiar, this process becomes very easy to kickstart and maintain projects as compared to downloading individual dependencies and updating index.html each time.
There are many interesting and powerful generator available which can build and manage not only client side of application but also full application stack. For example, an application with Stack as ‘Twitter Bootstap – AngularJs – NodeJs – ExpressJS – MongooseJs – MongoDB’ can be generated using a popular community generator: generator-angular-fullstack
That’s it, hope that was helpful!