From 0 to 100 with Yeoman

Yeoman – „to boldly go where no man has gone before“

If a survey by Ashley Nolan is to be believed, Yeoman does not yet enjoy widespread use among web developers. Many have indeed already heard of it but almost 50 percent have not yet used it themselves. This really should change! That is why, in this article, I am going to address what this ominous Yeoman is all about, describe the advantages it brings with it and how one can ultimately pull an AngularJS application out of a hat.

Webapps to go!

Yeoman is a command line application based on Node.js and NPM which provides generators for special technology stacks and automatically configures the most important things (scaffolding). No matter whether dependency management, unit tests or the local development server. After Yeoman has done its job, it is possible to begin with development right away in most cases. This results in enormous savings in time in the initial configuration of the project and also aids in adhering to “best practices”.

Yeoman the guard – let’s start!

In order to be able to make use of the king’s bodyguard, NPM must be installed first. NPM is included in the Node.js package and can simply be downloaded from the official website. The NPM version can subsequently be updated to be on the safe side. To be accessible with npm –v, the version should be no later than 2.1.8.

npm install npm –g
npm –v

With this, all provisions have been made and Yeoman can be installed. Furthermore, the packages for gulp (Build System), bower (Package Manager) and nodemon (Live-Reload) should also be installed. These tools are used in many projects, which is why they are often required.

npm install -g yo
npm install –g bower gulp nodemon

And that was it! Now you can work your magic. As already mentioned at the beginning, we will not bestow our full attention on generating an AngularJS application. Various generators with the key word angular can be found in the generator list on the Yeoman website. The one recommended and used for this example is the Hottowel generator. This generator is based on the AngularJS style guide by John Papa and was also developed by the same.

npm install -g generator-hottowel

Once the installation is finished, a new folder should be created in which the generator can then be executed.

yo hottowel [App-Name]

After it has been run, the project structure in the folder should follow the following structure:

/src
    /client
        /app
        /content

The finished application is then launched using the gulp task builder.

gulp serve-dev

If everything has gone according to plan, the finished application should look like this:

Conclusion

Yeoman is one of the most sensible tools in the world of 1001 web development tools. It makes project set-up super simple and harbours enormous time-saving potential. Moreover, Yeoman already has a large OpenSource community which is providing new generators for a myriad of technology stacks. The fact that Google is behind this project as an initiator also improves Yeoman’s chances of establishing itself in the day-to-day life of developers.

Share this article

Christoph Wolfes
(Junior) Software Developer
As a digital native and web development expert, he is saving the world!