Kickstarting Node.js Projects with Yeoman

patrickbuergin.com2014-12-04

Kickstarting Node.js Projects with

http://patrickbuergin.com

xkcd.com/910

2

http://xkcd.com/910/

It Can Be Hard to Get Started

‣ Naming things

‣ Searching for best practices

‣ Settling for a project structure

‣ Setting up build scripts

‣ Managing dependencies

‣ Writing boilerplate code

…TL; DR

No Consensus

3

Yeoman Overview

Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive.

yeoman.io

Weekly #downloads @ npm

4

http://yeoman.io

Yeoman It’s a Workflow…

Scaffolding Package Management Build System

yo Bower & npm Grunt / Gulp

5

Yeoman …and an Ecosystem of Generators

6

Yeoman …and an Ecosystem of Generators

6

$ npm install -g yo $ npm install -g generator-webapp

Front-End Example Launching a Generator

7

Front-End Example Generator Output

+ Minification, Testing, Linting, …

$ grunt serve

8

Scaffolding Package Management Build System

yo Bower & npm Grunt

Front-End Example Workflow

9

Yeoman Isn’t Limited to Front-End

10

Yeoman Isn’t Limited to Front-End

10

Some Related Concepts

Eclipse (Java)

ArchetypesExpress Generator

&

new & generate11

Popular Node Generators

express

kraken

node


builds upon Express and enables environment-aware, dynamic configuration, advanced middleware capabilities, security, and app lifecycle events.

“based on the express command line tool”

12

Demo generator-node + generator-express

Let’s create a small node module with the help of generator-node…


After a number of questions, it initializes a suitable project structure


After a couple of seconds we’re ready to go.


Among other things, it created a README template, as well as a build script that runs a linter (JSHint) and tests (Mocha)


This is where you would add the module functions…


…and this is the corresponding test


For the sake of demonstration, let’s implement a module function that generates fancy job titles — just like this page does


Let’s adapt the test accordingly…


…and implement a suitable generate function


We’re good to go.Let’s run the build script and pack the module


Let’s use this opportunity to check out generator-express as well.I choose the most basic options…


This, again, only takes a couple of seconds and initializes a basic express project structure for us


By default, the build script starts the server and will automatically restart it whenever you change the code


This is what the server returns by default


Let’s stop the server and integrate the node module we’ve just created…


Here you see the generated project structure, as well as the app.js file.


Let’s edit the index page, so that it returns a list of fancy job titles.The corresponding files are just where you would expect them


That should do.


And here’s the result. This example was kinda far from practice, but I guess you got the idea of what Yeoman generators can do for you.

The MEAN Stack

Node.js + Express

Angular.js

HTML / CSS

REST API socket.io

server

client

MongoDB Wire

Mongoose ODM

32

The MEAN Stack

Node.js + Express

Angular.js

HTML / CSS

REST API socket.io

server

client

MongoDB Wire

Mongoose ODM

+ Testing, Authentication, Preprocessors, …

32

Popular MEAN Generators

angular-fullstack

meanjs

mean-seedmeanstack


33

Demo generator-meanjs

You know the deal…


After we answer a number of questions, the generator initializes a fairly complex project structure


Let’s start a MongoDB server so that we can check out the application…


…then run grunt to build and start it


This is the default page. As you can see on the upper right, the scaffold already includes some basic user management functionality


Let’s register a new user. In order to use an external identity provider, we would have to add API keys and host the server on the internet (callbacks).


After logging in, you can find some menu items to manage your profile


The generated code is structured in a comprehensible manner. In the foreground, you see a part of the default schema for users (Mongoose)


The generated code is structured in a comprehensible manner. In the foreground, you see a part of the default schema for users (Mongoose)

/config (back-end) Authentication Strategies, API Keys, Addresses, …

/app (back-end) Express components, Mongoose Schemas

/public (front-end) AngularJS modules, view templates, …


generator-meanjs also offers a number sub-generators in order to speed up your development — for example :crud-module


It creates both AngularJS and Express files, supporting full CRUD (create, read, update, delete) functionality, as well as basic test generation (Karma & Mocha).


This is what our new CRUD module looks like in the front-end


As promised, there is a list view, a detail view and views for adding/editing objects


Let’s add a new job…


There it is — it has also been written to our database by means of a POST request to the corresponding API endpoint provided by Express


Here is an excerpt of the generated code — a great starting point

Other Back-End Generators

jhipster

skinny

Weekly #downloads @ npmTotal #downloads ’14 @ npm

“Skinny framework’s concept is Scala on Rails”49

Using Yeoman to Help Others Get Started

50

As we looked for a way to help the community build and deploy production level MEAN applications, we decided to go with a Yeoman generator. […] provides a powerful, easy to maintain, and open solution for scaffolding applications.

http://yeoman.io/index.html

Building Generators

51

Well documented @ yeoman.io/authoring

…and there is a generator for that :)

http://yeoman.io/authoring/

Discussion

Bloat

Outdated Generators

Doesn’t fit your needs

Agility

Focus on issue at hand

Helping others

Inspiration

Not invented here

Kickstarting Node.js Projects with Yeoman

Software

help of generator

g generatorwebappfront

node module weve

small node module

build scripts

generated project structure

best practices

couple of seconds