generator-espress

an opinionated yeoman generator that scaffolds a mvc express webapp completely in es6

what's included

• good old node
• server via express
• database via mongodb + mongoose
• templating via jade
• logging via winston
• es6 via babel
• linting via eslint
• css pre-processing via libsass
• build automation via gulp
• source control via git

getting started

install

simply run the following to install via npm:

npm i -g yo gulp-cli bower generator-espress

generating!

once installed, simply do yo espress, and you'll be on your way to building your next project!

structure

all of your source code goes in the src folder. anything javascript can (and should) be written in es6. the strucutre is as follows:

src
├── app.js              // express app configuration (es6)
├── config.js           // environment configuration (es6)
├── app
│   ├── controllers     // express routes (es6)
│   ├── helpers         // modules, middlewares (es6)
│   ├── models          // mongoose models (es6)
│   └── views           // jade templates (jade)
├── files               // any files that need to be hosted, e.g. pdfs, text files, etc.
├── fonts               // ttf fonts
├── images              // source images
├── scripts             // client-side javascript (es6)
└── styles              // style sheets (sass)

running gulp build will produce a new directory (build by default) with a slightly different structure:

build
├── app.js              // transpiled express configuration
├── config.js           // transpiled environment configuration
├── app
│   ├── controllers     // transpiled express routes
│   ├── helpers         // transpiled modules, middlewares
│   ├── models          // transpiled mongoose models
│   └── views           // same files as source
└── static
    ├── css             // actual css
    ├── files           // same files as source
    ├── fonts           // webfonts (eot, ttf, woff, woff2) and a font-face stylesheet
    ├── img             // optimized images
    └── js              // transpiled client-side code

tasks

• gulp is the same as gulp serve, which not only starts your express server, but also reloads it whenever server-side code changes
• gulp build creates your production-ready webapp by running the following tasks:
  • images to optimize images
  • styles to compile sass, write sourcemaps, autoprefix, and minify
  • scripts to
• gulp lint will lint all javascript with eslint and rules definted in .eslint.json
• gulp clean will remove any and all files created by any of the above tasks
• many of the tasks have sub-tasks that allow for finer control, for example:
  • gulp build:client will only run the tasks related to the client (images, styles, scripts, files, fonts, bower)
  • gulp transpile:controllers will transpile only the controllers
  • gulp lint:models will lint only the models
• gulp tasks will show you all of the available tasks

what's missing

tests

• while incredibly important, tests are not inlucded in this generator
• it's especially useful to be able to write your own tests, so I'm leaving this as an exercise for the reader 🙃
• if you need help, this is a decent place to start

notes

• this generator was written with my needs in mind; that's why it's opinionated
• i do most of my development on os x + homebrew + osx-jump-start
  • if you do too, then things should go smoothly
• cross-platform compatibility isn't guaranteed
• this is my first yeoman generator, and suggestions are definitely welcome!