Skip to content

Instantly share code, notes, and snippets.

@cofauver
Last active February 20, 2017 21:09
Show Gist options
  • Save cofauver/ab2c8099653a1ab702d0ce3d9dfba630 to your computer and use it in GitHub Desktop.
Save cofauver/ab2c8099653a1ab702d0ce3d9dfba630 to your computer and use it in GitHub Desktop.

Yeoman logo

What is Yeoman?

Yeoman is like rails new for JS stack applications.

It can scaffold out a complete application from scratch so that you don't need to build all of the boilerplate code.

Why would I want to use it?

If you want to scaffold a JS app from scratch, but don't want to write all of the boilerplate code, you might want to consider using Yeoman. Be aware that using Yeoman to generate your application will give you a lot of code that you didn't write. This can be awesome for saving you time, but it can be really tough if something mysterious starts going wrong.

How do I use it?

First install it!

npm install --global yo

If that doesn't work, check out the more detailed setup page from the Yeoman team.

Create a new directory where you want to put a project and navigate into that directory:

mkdir yo-boilerplate
cd yo-boilerplate

Then you simply ask Yeoman to run:

yo

and a menu will arrive with text something like this.

What would you like to do? 

  Update your generators 
❯ Install a generator 
  Find some help 
  Get me out of here! 

What is a generator?

Where rails new could only generate one folder structure (convention over configuration), Yeoman is capable of building out 5709 different starting setups for your app! Each of those different setups are configured in a generator that somebody has built. Here's the catalog of all of the Yeoman generators!

image

We're going to use the Angular Fullstack generator for the following demo.

npm install -g gulp-cli generator-angular-fullstack

We'll be able to use this generator now that we've installed the Gulp command line interface (gulp-cli) and the generator itself (generator-angular-fullstack).

If you run yo again, your menu will have the option to use the Angular Fullstack generator. Alternatively, you can just run

yo angular-fullstack

After you run that command, Yeoman will ask you a whole load of questions to help you configure your app to your desires. I answered those questions as follows:

image

Then I let the generator run for a long while (about a whole minute).

What does it create!?

A full application!

To get it going:

  1. Run npm install to install server dependencies.

  2. Run mongod in a separate shell to keep an instance of the MongoDB Daemon running

  3. Run gulp serve to start the development server. It should automatically open the client in your browser when ready.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment