npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

generator-klei

v0.4.3

Published

A Yeoman generator for generating awesome module or app boilerplates! MEAN-stack (all parts optional) with scalability in mind and with Grunt and Bower sweetness..

Downloads

11

Readme

Klei Generator Build Status

A Yeoman generator for generating awesome module or app boilerplates! MEAN-stack (all parts optional) with scalability in mind and with Grunt and Bower sweetness..

Differences from similiar generators

The Klei generator is built with scalability in mind. Which means that it doesn't have one file per object type (think AngularJS directives e.g) and neither one directory per object type, which is really common but not particularly good in the long run.

Instead the Klei generator advocates (and creates, particularly the subgenerators) one directory per module. Here's a great read on scalable code organization with AngularJS.

Great experience for developers

The goal with the Klei generator is to create a great, easy to use and maintainable project structure and development environment for web development with full stack Javascript.

Getting Started

Install Yeoman

$ npm install -g yo

Install the Klei Generator

$ npm install -g generator-klei

Install Bower

This is only needed if "Client APP" or "Stylesheets" are to be chosen in the generator.

$ npm install -g bower

Do the magic:

$ yo klei

Run the app:

$ grunt serve

Don't forget that your mongodb server should already be running! (if you chose MongoDB in the generator)

Run in production

The generator doesn't yet generate a fully production ready configuration following all best practices, but at least you must do the following steps:

Without REST API's

Build everything and run the static resource server (a connect server) with:

$ grunt serve:dist

With REST API's

First build everything for distribution:

$ grunt dist

Then run the server:

$ NODE_ENV=production node src/index.js

N.B. You should be using something like Forever or similar to keep the server up and running.

What can the Klei Generator do?

The Klei Generator asks you what type of module you want to build, then you pick the parts you want from:

What you'll get:

  • A scalable directory structure (Todo list example included)
    • Not one directory per object type, which doesn't scale well, but instead one per REST mount point (backend) and one per view (frontend)
  • A fully configured Gruntfile with livereload, serverreload, linting, concatenation, minification, testing etc.
  • Automounting of API routes using exctrl
  • No more editing of your html layout when adding scripts and stylesheets to your project, thanks to grunt-injector
    • This includes Bower installed components (which have a main section in their bower.json)
  • Both frontend and backend unit testing with Mocha and Chai!
    • Frontend tests is run with Karma
    • All necessary files are injected automatically into your karma.conf.js with the grunt-injector
  • Subgenerators to easy add new API's, etc. (see Subgenerator section below)
  • and more.. There's even more to come!

Try it out!

Subgenerators

klei:api

Usage:

$ yo klei:api "<you new api name here>"

Or just:

$ yo klei:api

And follow the guide. The name you give to your new API will be camelized and used as: ./src/api/<newApiNameHere>/<newApiNameHere>.controller.js which in turn will be mounted at the url: /api/<newApiNameHere>.

The generator will ask if you want to create a new Mongoose model as well.

More to come...

Contribute

Please feel free to contribute and help with building the best boilerplate for a great developer experience! I gladly accept pull requests!

License

MIT License