Building Frontend app with Yeoman – 1st Part

Hi Friends,

In this section, we’ll see how to use Yeoman (http://yeoman.io/) to create a next generation app. Here, in this entire session, we will be using tons of angular stuffs, node, bower, grunt, bootstrap and many more things. Therefore, this is not for those who don’t know the basics of other per-requisites. For that, please refer my other articles.

Below is yeoman website which is getting very popular these days.

1st

This is scaffolding tool for creating boiler plate stuffs. After installing Yeoman, you can install generators. These generators will help create project templates for you. There are many generators which have generators embedded in it. We will see the same. But, let us go ahead and install the yeoman first. Since, I have already installed node. Hence, i am skipping this step. Therefore, first step step is installing node, then yeoman.

2nd

As, you can see that i am installing the same from command line and installing yeoman as a global so that we can use the same from command line.

3rd

Once, it got installed, next install bower.

4tth

Once, bower installed, next i need to install grunt with below shown command.

5th

Then, next thing we will do, we will install angular generator as shown below.

6th

Since, we have installed all the required components, hence now we can go ahead and launch yeoman as shown below.

7th

Upon, successful launch it will show the below confirmation message and will start a questionnaire session, for other required components.

8th

9th

I said ok means i am ok with default selection and hit enter. Then, it started installing all the required stuffs as shown below.

10th

Upon successful installation, it will show below message

11th

At this stage, everything is installed. Hence, i can launch the template with grunt command as shown below.

12th

After doing all the initial check successfully

13th

It will launch the landing page of the screen.

14th

Thanks for joining me.

Thanks,
Rahul Sahay
Happy coding