Kickstarting Node.js Projects with
patrickbuergin.com
2014-12-04

xkcd.com/910
2

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
…
No Consensus
TL; DR
3

Yeoman
Overview
yeoman.io
Yeoman helps you kickstart new
projects, prescribing best practices
and tools to help you stay productive.
Weekly #downloads @ npm
4

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

Front-End Example
Launching a Generator
$ npm install -g yo
$ npm install -g generator-webapp
7

Front-End Example
Generator Output
+ Minification, Testing, Linting, …
$ grunt serve
8

Front-End Example
Workflow
Scaffolding Package Management Build System
yo Bower & npm Grunt
9

Yeoman Isn’t Limited to Front-End
10

Yeoman Isn’t Limited to Front-End
10

Some Related Concepts
Express Generator Archetypes
Eclipse (Java)
&
new
&
generate
11

Popular Node Generators
express
kraken
node
Weekly #downloads @ npm
“based on the express command line tool”
builds upon Express and enables
environment-aware, dynamic configuration,
advanced middleware capabilities, security,
and app lifecycle events.
12

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

Demo
generator-node + generator-express
After a number of questions, it initializes a suitable project structure

Demo
generator-node + generator-express
After a couple of seconds we’re ready to go.

Demo
generator-node + generator-express
Among other things, it created a README template, as well as a build
script that runs a linter (JSHint) and tests (Mocha)

Demo
generator-node + generator-express
This is where you would add the module functions…

Demo
generator-node + generator-express
…and this is the corresponding test

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

Demo
generator-node + generator-express
Let’s adapt the test accordingly…

Demo
generator-node + generator-express
…and implement a suitable generate function

Demo
generator-node + generator-express
We’re good to go.
Let’s run the build script and pack the module

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

Demo
generator-node + generator-express
This, again, only takes a couple of seconds and initializes a basic express
project structure for us

Demo
generator-node + generator-express
By default, the build script starts the server and will automatically restart it
whenever you change the code

Demo
generator-node + generator-express
This is what the server returns by default

Demo
generator-node + generator-express
Let’s stop the server and integrate the node module we’ve just created…

Demo
generator-node + generator-express
Here you see the generated project structure, as well as the app.js file.

Demo
generator-node + generator-express
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

Demo
generator-node + generator-express
That should do.

Demo
generator-node + generator-express
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
REST API socket.io
Angular.js
HTML / CSS
server
client
MongoDB Wire
Mongoose ODM
32

The MEAN Stack
Node.js + Express
REST API socket.io
Angular.js
HTML / CSS
server
client
MongoDB Wire
Mongoose ODM
+ Testing, Authentication, Preprocessors, …
32

Popular MEAN Generators
angular-fullstack
meanjs
mean-seed
meanstack
Weekly #downloads @ npm
33

Demo
generator-meanjs
You know the deal…

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

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

Demo
generator-meanjs
…then run grunt to build and start it

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

Demo
generator-meanjs
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).

Demo
generator-meanjs
After logging in, you can find some menu items to manage your profile

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

Demo
generator-meanjs
The generated code is structured in a comprehensible manner. In the
foreground, you see a part of the default schema for users (Mongoose)
/app (back-end)
Express components, Mongoose Schemas
/config (back-end)
Authentication Strategies, API Keys, Addresses, …
/public (front-end)
AngularJS modules, view templates, …

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

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

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

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

Demo
generator-meanjs
Let’s add a new job…

Demo
generator-meanjs
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

Demo
generator-meanjs
Here is an excerpt of the generated code — a great starting point

Other Back-End Generators
jhipster
skinny
Total #downloads ’14 @ npm Weekly #downloads @ 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.

Building Generators
51
Well documented @ yeoman.io/authoring
…and there is a generator for that :)

Discussion
Bloat
Outdated Generators
Doesn’t fit your needs
Agility
Inspiration
Focus on issue at hand
Helping others
Not invented here