As an up-to-date webdeveloper, you might have some problems following every new trend, framework and building tool. But there is a solution which will eliminate all your problems and give you the power to develop great apps, clean code and solid architecture in nearly no time: Yeoman!
What is Yeoman?
Yeoman is a command line tool for scaffolding your web projects. It uses modern toolkits and combines them in great way to enhance your development process and reduce time. Awesome! Or as you might later think: yo.
So if your just about to set up a new project, please don’t start to copy&paste all that bootstrap, jQuery and other stuff in your folders and take a minute to setup yeoman, you won’t regret it.
yo is the command to start all actions with yeoman. You can start a clean project including a git file if you wish to set it up later, and later you can generate even more code to keep things clean.
Grunt is a easy way to test your code. With the grunt build system you can test and preview your webapp easy on your local machine without needing a webserver.
The beautiful little bird Bower has its strengths when it comes to dependency management. Having all dependencies in one file and installing and updating with no effort is a must have in nowadays web development.
Yeoman is based on node.js, so make sure to install it before trying to get yeoman running. If you got node, you can simply install yeoman via the command line using npm. Additional, install bower aswell to have everything ready(-g is for global installation):
npm install -g yo bower
Finished! Have fun, yo.
Creating a small webapp
At this point you have not seen any benefit in using yeoman? Seems legit, but wait. Let’s try to start a small webapp, therefore we install another yeoman tool via npm:
npm install -g generator-angular
Generators are yeoman packages aimed to create a new project or add classes/controllers/whatever to your project without the need to copy stuff in 5 different classes, only to fail because you missed to copy it in 1 more file. The command above install the yeoman generator for an angular project.
You can find all the generators on yeoman.io
So create a new folder, and try the magic:
mkdir my-project cd my-project yo angular
You should see a message like that, asking whether you would like to install Sass(no) and Bootstrap(yes). Finally, yeoman asks which angular modules you would like to include. For now, leave the default and press enter and yeoman will load A LOT of files. It might take some time depending on your bandwidth, so you could grab a coffee for sure. If you are familiar with angular, obviously you can select whatever you need for your new project. If you don’t select it right now, no worries, you can still add everything later on.
I won’t cover the details about everything in this folder in this post(maybe in the next time), but as you can see:
- .gitignore for the most annoying files you don’t need to commit
- bower.json including all your dependencies like bootstrap and angular
- package.json including your npm dependencies
- Gruntfiles.js to setup all the grunt task for an easy start
Start the local server to see what you got with nearly no effort:
The nice man should greet you from localhost:9000 with a beautiful starting point for your angular webapp!
Congratulations on your first yeoman project! To setup a project with everything you need in minutes is awesome for developers and yeoman can do even more for you. The next time I will show you an easy way to expand your angular app with some controllers generated with yeoman. If you like yeoman, give the team some credit and recommend their work, because they deserve it!
Don’t forget to sign up for the newsletter on devdactic to never miss the latest stuff going on!
Get the free 7 day Ionic 4 Crash Course to learn how to:
- Get started with Ionic
- Build a Tab Bar navigation
- Make HTTP calls to a REST API
- Store Data inside your app
- Use Cordova plugins
- Style your Ionic app
The course is free, so there's nothing you can lose!