meanie

Meanie

About

Meanie is a boilerplate for developing full-stack modular javascript applications using the MEAN stack (MongoDB, Express, AngularJS and Node.js) powered by the Gulp task runner.

This package installs the meanie CLI tools.

Installation

# Install meanie CLI globally
npm install -g meanie

# Create a new Meanie project in an empty directory
meanie create

Gulp tasks

Meanie comes with fully configured Gulp tasks for all common development and build tasks.

Note: The gulpfile for Meanie has been configured for use with Gulp version 4. This version is not officially released yet, but you can install and use the alpha version by following these instructions.

Default task

The default task, which you can run by simply typing gulp is to run the thre main tasks, build, watch and start. This is perfect for ongoing development.

$ gulp

Main tasks

You can also run the three main tasks individually:

Build

Build the application and populate the public folder with compiled javascript, stylesheets and static assets.

$ gulp build

Watch

Watch your files for changes and runs linters, unit tests and recompiles the application files as needed.

$ gulp watch

The watch task also comes with livereload, which gets triggered every time the index file is rebuilt. To use it, simply install the Chrome livereload plugin.

Start

Starts the Node server using Nodemon.

$ gulp start

Versioning tasks

There are three versioning tasks which help you bump your version numbers in your package files and automatically update the version in your README file, as well as commit the bump to the repository and tag it with the new version.

This process uses semantic versioning.

Bump patch version

Bump the patch version number (0.1.0 -> 0.1.1)

$ gulp patch

Bump minor version

Bump the patch version number (0.1.0 -> 0.2.0)

$ gulp minor

Bump major version

Bump the patch version number (0.1.0 -> 1.0.0)

$ gulp major

Helper tasks

Some of the helper tasks have also been exposed to the CLI:

Clean

Cleans the public folder.

$ gulp clean

Static

Copy all static assets to the public folder.

$ gulp static

Folder structure

The following is an outline of the folder structure of this boilerplate:

# Client side code and assets
client

  # This is where your client side Angular application resides. Everything in this folder should be explicitly specific to your application.
  |_ app

    # The home module of your application. Feel free to rename to anything that suits better (e.g. index, dashboard, ...)
    |_ home

    # This folder contains the layout module for you application. It's a good place to store all common SASS stylesheets and templates.
    |_ layout

    # This folder contains an Angular mock backend for your application. You can add new mock modules as needed.
    |_ mock

    # The main navigation module, for application wide navigation logic.
    |_ nav

    # An example secured module.
    |_ secure

    # Any application specific, but shared services, directives and filters that don't belong to one specific module can be placed here.
    |_ shared

    # An example user module implementation.
    |_ user

  # Common (non packaged) services, directives and filters are arranged in this folder. Everything in here is not specific to a particular application and could be recycled in other projects.
  |_ common

  # Static assets for your client application go here. This is a good place to store fonts, images, audio files, etc. Anything in here will be copied as-is to the public folder.
  |_ static

  # Vendor resources reside here. Bower is configured to download all 3rd party resources into this folder, and this folder is excluded from the GIT repository.
  |_ vendor

# Server side code and assets
server

  # This is where your server side Node/Express application resides. Everything in this folder should be explicitly specific to your application.
  |_ app

  # Common (non packaged) node modules are arranged in this folder. Everything in here is not specific to a particular application and could be recycled in other projects.
  |_ common

# Environment configuration (shared by client and server)
env

# Public folder for compiled assets (generated by Gulp)
public

  # Compiled CSS stylesheets
  |_ css

  # Compiled Javascript sources
  |_ js

  # Fonts
  |_ fonts

  # Images
  |_ images

FAQ

How is Meanie different from other MEAN boilerplates?

The most important difference between Meanie and other MEAN boilerplates like MEAN.JS, is that Meanie uses a modular approach to folder/file structuring, whereas most others use more of a "sock drawer" approach to organizing files. Meanie thinks that a modular approach is easier to navigate, easier to reuse/refactor, and easier to develop with.

Other differences are:

• Meanie uses Gulp 4 as it's task runner instead of Grunt.
• Meanie doesn't serve the Angular HTML files as views, but instead leverages powerful Gulp tasks to compile and pre-process these files.
• Meanie has a simple overarching environment/configuration system that makes it a breeze to use your specific environment configuration options in your server app, client app, and even in your gulpfile and Karma configuration file.

Why doesn't Meanie use Yeoman?

Yeoman prescribes a particular folder structure (e.g. must have /app in your root), whereas Meanie likes to split your code between server/ and client/ first.

Todo

• Create Meanie CLI tool for easy installation of additional modules and initializing new projects.
• Gulp SASS file linting. Current existing gulp tasks for this purpose depend on a Ruby gem.
• Separate build tasks for development without concatenation/minification? Might not be necessary with the use of source maps, however, it would speed up the build tasks significantly.

Further reading

• Modular vs sock drawer folder structure
• Editor config
• Bower configuration
• JSHint configuration
• Debugging Javascript