Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / All-Topics

Building Frontend App with Yeoman – 1st Part

0.00/5 (No votes)
7 Aug 2015CPOL2 min read 5K  
How to build Frontend app with Yeoman – 1st Part

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 pre-requisites. For that, please refer to my other articles.

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

1st

This is a scaffolding tool for creating boilerplate stuff. 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, I am skipping this step. Therefore, the first step is installing node, then yeoman.

2nd

As you can see, 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 is installed, next I need to install grunt with the below shown command.

5th

Then, the next thing we will do is 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 stuff as shown below:

10th

Upon successful installation, it will show the 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)