Meaniscule = miniscule + MEAN stack generator
Meaniscule is a basic MEAN stack wireframe for quickstarting your ideas.
Meansicule focuses on only providing the bare minimum framework to get you up and running quickly in a MEAN stack environment.
Use it for:
- mini apps/hackathons
- brainstorming/proof-of-concept
- sandboxing early new features
You can see what the generated app looks like at meaniscule.ashryanbeats.com.
Meaniscule owes a heavy debt to fsg, which offers a more robust environment with features like auth built right in.
Note: Meaniscule currently doesn't support non-POSIX systems (e.g. Windows). See this issue for details. If you would like to fix this issue, you are very welcome to submit a pull request! All you need is Node fs (and love).
- Installing or updating Meaniscule
- Generating your Meaniscule app
- Initial building tasks
- File structure
- Making Meaniscule yours
- Examples
- Contributing
- Further reading
- Digital Ocean Deployer
- Avoiding mojibake with Angular Translate
Install or update Meaniscule globally:
npm install -g meaniscule
The global installation gives you access to the terminal command meaniscule:
mkdir my-app && cd my-app
meaniscule
The meaniscule command will populate the directory my-app with the newly generated app.
Add the nodb flag if you want to generate an app without a database:
mkdir my-app && cd my-app
meaniscule nodb
This will save your installation the trouble of connecting to a database if you know you won't need one. It also makes the generated Meaniscule app even smaller by removing files related to the database.
After generating the app, run:
npm install
npm start
In a separate terminal tab, run:
gulp seedDB // No need for this if you used the `nodb` flag to generate the app
gulp
Gulp is tool to automate part of our workflow. When you type gulp in the terminal while inside your Meaniscule app, Gulp will:
- build all client-side JS
- compile all Sass files into CSS
- watch all client-side JS and CSS files for changes and rebuild on the fly when there are changes
- run your tests
- (optionally) live-reload your browser when you make client-side changes (no more manual refreshes!)
You must have the LiveReload Chrome extension for live reload to work.
Make sure you activate the LiveReload extension each time you start coding, or live reloading won't happen. The LiveReload extension's icon makes it a bit hard to spot if it's running or not, so be sure to double-check.
At the highest level, Meaniscule files are divided into client and server directories.
The contents of both of these directories are fractal:
- On the client side, Meaniscule groups front-end components by directories in
/client/pre-build. - In these directories, include all related HTML, Sass, and Angular JavaScript (controllers, states, factories, and directives)
- On the server side, Meaniscule groups APIs by directories in
/server/api. - In these directories, include all routes, controller functions, models, and test specs.
.
├── client
│ └── pre-build
│ ├── app.js
│ ├── app.scss
│ ├── home
│ │ ├── home.controller.js
│ │ ├── home.html
│ │ ├── home.scss
│ │ └── home.state.js
│ ├── modules
│ │ ├── modules.controller.js
│ │ ├── modules.factory.js
│ │ ├── modules.html
│ │ ├── modules.scss
│ │ └── modules.state.js
│ └── navbar
│ ├── navbar.directive.js
│ ├── navbar.html
│ └── navbar.scss
├── gulpfile.js
├── package.json
├── seed.js
└── server
├── api
│ └── modules
│ ├── index.js
│ ├── nodemodule.controller.js
│ ├── nodemodule.model.js
│ └── nodemodule.model.spec.js
├── app.js
├── db.js
├── images
│ └── favicon.ico
├── index.html
└── start.js
* The build directory and its contents will be created upon running gulp
.
├── client
│ └── pre-build
│ ├── app.js
│ ├── app.scss
│ ├── home
│ │ ├── home.controller.js
│ │ ├── home.html
│ │ ├── home.scss
│ │ └── home.state.js
│ └── navbar
│ ├── navbar.directive.js
│ ├── navbar.html
│ └── navbar.scss
├── gulpfile.js
├── package.json
└── server
├── app.js
├── images
│ └── favicon.ico
├── index.html
└── start.js
* The build directory and its contents will be created upon running gulp
Many of the files in the generated Meaniscule app are there as an example of how to construct your new app.
You can remove the following directories if you don't need them:
client/pre-build/homeclient/pre-build/modulesclient/pre-build/navbarclient/pre-build/wikipediaserver/api/modulesserver/api/wikipedia
Note: Before you remove these directories, be sure to note their organization and naming conventions, as Meaniscule will expect the same structure. You may need to refactor other files that reference these directories, but the work should be fairly minimal.
The server port is set in a varible called port in start.js.
The name "Meaniscule" is referenced in the following files:
package.json(app name and description)server/db.js(dbName)server/index.html(in the<title>and<body>)server/api/modules/nodemodule.model.spec.js(dbURI)client/pre-build/app.js(Angular module name)client/pre-build/home/home.html(in the<h1>)client/pre-build/navbar/navbar.html(.navbar-brand)
I'm happy to post links to live sites that use Meaniscule. Get in touch if you have something.
Sweet examples by 3rd party developers:
Basic examples by Ash:
Pull requests to the GitHub repo are welcome, as are new issues.
Please do keep in mind that Meaniscule aims to keep a fairly small (miniscule!) footprint. If you have an idea that will require adding a lot of new code or features, it might not be right for Meaniscule. Feel free to get in touch before you get started on new features.
Thanks to all developers who have contributed so far.
Digital Ocean Deployer: A script that greatly simplifies deploying a Meaniscule site to Digital Ocean. I hope you love it.
Avoiding mojibake with Angular Translate: Advice on how to avoid mojibake in non-European languages when using angular-translate. Links to the Meaniscule demo site repo as an example.