Noteworthy Programming Masterpiece
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


    Modern Web Dev Generator

    NPM version Downloads Build Status Coverage Status Dependency Status devDependency Status Gitter License


    ModernWebDevGenerator is a Yeoman generator that will help you quickly get up and running with ModernWebDevBuild.

    Projects created with this Yeoman Generator will be able to directly leverage the awesome Gulp-based build provided by the ModernWebDevBuild project, which includes many tasks and features out of the box (e.g., transpilation of TypeScript/ES2015 to ES5, SASS transpilation to CSS, Minification, Bundling, Code quality & code style checks, Sourcemaps, support for unit testing, ...).

    This project comes with a fully working Angular 2 configuration.

    This generator includes all the folders & files listed by ModernWebDevBuild as mandatory as well as the recommended ones so as to promote good practices. files are placed in multiple locations to describe what to put where, provide some guidance/design guidelines, ...

    The generated projects also include:

    • a working setup of Angular 2 (this might later move to a separate sub-generator)
      • a root component (app/core/boot.ts)
      • a home page (app/pages/home.ts)
      • a basic component router configuration
    • a good HTML5 boilerplate
    • a good SASS & styling starting point
    • an embedded folder structure and design guidelines (componentization, separation of concerns, naming conventions, ...)
    • a set of TypeScript code style/quality rules (tshint.json)
    • a set of ES2015 compliant code style/quality rules (.jscsrc and .jshintrc)
    • ...

    The general idea is that you can remove anything you don't need assuming it's not in the list of mandatory folders/files of ModernWebDevBuild (otherwise you'll break the build ^^).

    Any feedback/contributions are welcome to improve the project so don't hesitate!

    This project is available as an NPM package; check out the usage instructions below.


    Click on this link to see a demo of how to install & use this project and the modern web dev build: ModernWebDev Build and Generator Demo


    Please note that this project is heavily inspired from:

    Status & roadmap

    Check out the issues/labels & milestones to get an idea of what's next. For existing features, refer to the previous sections.

    Check out the change log


    In order to use this generator you first need to install Yeoman:

    npm install --global yo

    Once Yeoman is installed, you can install this generator:

    npm install --global generator-modern-web-dev

    You will also need to install gulp globally:

    npm install --global gulp

    Create a new folder, go into it then invoke the generator by running the following command:

    yo modern-web-dev

    Once you've answered all the questions, the generator will do its thing. Once done, you'll be able to run the development web server and start hacking away using:

    npm start


    Note that the ModernWebDevBuild project has other tricks in store for you; be sure to check out the docs.


    There are two main approaches to use this generator:

    • interactive mode: the generator asks you all the questions
    • batch mode: you provide the information directly to the generator

    In practice nothing prevents you from mixing both though :) If you pass a setting directly to the generator, it will not prompt you for that value.

    You can list all the options with a brief description using yo modern-web-dev --help.

    By default, the generator will install all project dependencies (not the global requirements listed in the 'Usage' section!). You can skip the installation of the project dependencies by passing the --skip-install option.

    The generator will check for updates once in a while but you can disable the update check by passing the following flag: --no-update-notifier.

    Generated projects dev dependencies

    • gulp: JavaScript task runner
    • babel: ES2015 to ES5 transpiler. Needed so that the Gulp configuration file can be written using ES2015 (gulpfile.babel.js)
    • nodemon: monitoring of certain files (used by npm scripts defined in package.json):

    Generated projects runtime dependencies

    The following dependencies are managed by JSPM (in the JSPM section of the package.json file):

    Generated projects configuration files

    The project includes multiple configuration files.

    For more details about the configuration files, check out the ModernWebDevBuild's documentation.

    Here's some high level information about these:

    Adding project dependencies

    As you go along, you'll surely need to add new dependencies for your application. If the dependency you want to add is required at runtime, then you should use JSPM to add it. Installing a dependency with JSPM is as simple as jspm install x. For more information about JSPM, check out the official site:


    Take a look at the project's open issues and milestones.

    If you know what to do then:

    • Fork the project
    • Create a feature branch in your fork
    • Rebase if needed to keep the project history clean
    • Commit your changes & push to GitHub
    • Try and flood me with pull requests :)

    Building from source

    If you want to build from source, you need to:

    • install NodeJS (4.2+) and npm (3+)
    • clone this git repository
    • install gulp: npm install --global gulp
    • run npm run setup
    • start hacking :)

    Releasing a version

    • commit all changes to include in the release
    • edit the version in package.json
      • respect semver
    • update CHANGELOG.MD
    • commit
    • git tag
    • git push --tags
    • draft the release on GitHub (add description, etc)
    • npm publish


    Sebastien Dubois


    This project and all associated source code is licensed under the terms of the MIT License.


    npm i generator-modern-web-dev

    Downloadsweekly downloads








    last publish


    • avatar