ericclemmons / genesis-skeleton

Modern, opinionated, full-stack starter kit for rapid, streamlined application development.

Genesis Skeleton

v0.4.0

---

Modern, opinionated, full-stack starter kit for rapid, streamlined application development.

• API-ready server powered by Express
• Streamlined workflow using GruntJS
• Instant preview with LiveReload
• Rapid prototyping using Twitter Bootstrap
• Client-side dependency management from Bower
• First-class support for AngularJS & ReactJS
• Simplified testing utlizing Karma
• Resource optimization for production
• Deployment-ready for Heroku & Nodejitsu

Documentation

Visit http://genesis-skeleton.com/ for the latest documentation & features!

Dependencies

1. NodeJS
2. Yeoman
3. Bower
4. Grunt

The NPM dependencies can easily be installed at once via:

• npm install -g yo bower grunt-cli

Installation

If necessary, first install the Yeoman generator for Genesis Skeleton:

• npm install -g generator-genesis

From within any new or existing project directory:

• yo genesis

Usage

• grunt server
• grunt test

Visit http://genesis-skeleton.com/ for in-depth documentation.

License

MIT

genesis-skeleton's Issues

Add error page handling

e.g. 404, 500...

extending base layout

Minimize file copy verbosity?

So. much. visual. clutter...

JS Errors and empty guide page on iOS

Hello guys, awesome work so far! Was just checking out the new guide on my iPhone and noticed a weird bug, to replicate:

• visit genesis-skeleton.com on your iDevice
• navigate to the guide page
• click the issues link (likely works with any link that takes you to a new page)
• press the back button
• Guide page is empty and 2 errors are logged.

See the attached screen shots for the errors. Note I hit forward and back twice so there are 4 errors, but each event seems to log 2.

-Matt

Update `grunt-livereload`

Refs ericclemmons/grunt-livereload#1

server.port should come from environment

This value should come from environment, the same way npm start or node app.js uses port 3000.

Install error in app.less

On running $ grunt server after npm install:

$ grunt server
Running "clean:dist" (clean) task

Running "jshint:files" (jshint) task
>> 12 files lint free.

Running "verbosity:hidden" (verbosity) task

Running "less:app" (less) task
>> NameError: variable @baseLineHeight is undefined in /Users/kevinwhitley/Sites/CMN/code-test/src/client/app/less/app.less:16:17
>> 15   #app {
>> 16     padding-top: @baseLineHeight * 2;
>> 17   }
Warning: Error compiling LESS. Use --force to continue.

Aborted due to warnings.

Switch grunt-reload to extension

Because of issues with gzip & live reload adding the script, use the chrome extension instead.

Cleanup LESS + Bootstrap

The views should not be using Bootstrap classes directly, nor should app.less be including the default styles.

Instead, the main stylesheet should be using mixins & perhaps copy/pasting the styling needed for nav bars & the like.

[RFC] Angular Module Concatenation

This is an issue affecting myself, @seiffert, & @kwhitley.

It seems the problem is that Angular sees the following as an error:

// `app` does not exist yet
angular.module('app').controller(...);

// app is finally created with dependencies (Notice the [])
angular.module('app', ['ngResource', ... ]);

Because of this, we should take the lead from angular-app and namespace each file to avoid conflicts.

Watch fails on lint/jshint errors

Would be awesome if the error was shown and the build process terminated (leaving the existing server instance intact).

[FEATURE] socket.io

It's really useful for pushing data to the client, so might as well make it available by default.

I'll leave this here:

http://socket.io/
https://github.com/btford/angular-socket-io-seed

Rename CSS files to LESS for inclusion

Because LESS won't embed/compile CSS files, there should be a task to rename github-ribbon-css/**/*.css to .less so it can be included in app.less.

Attempt to re-use H5BP

https://github.com/niftylettuce/node-h5bp

It's been updated to 0.0.3, and should remove the need for manually including the compress middleware.

Replace `grunt-verbosity` with `grunt-contrib-copy`

Version ~0.4.1 contains my patch that removed the super-verbose output.

Use H5BP for Node

See the latest code here, which should work via app.use(require('h5bp')).

https://github.com/h5bp/server-configs/blob/master/node/lib/h5bp.js

The problem is NPM has a 10 month old version:

https://github.com/h5bp/server-configs

I dunno if we can just do * rather than 0.0.2 and pull master, but the latest code seems like it should work.

Re-add respond + modernizr

Create sub module structure for app

Create lib/docs, etc.

Error: listen EADDRINUSE

Running "livereload-start" task
... Starting Livereload server on 35729 ...

Running "express-server" task

events.js:71
        throw arguments[1]; // Unhandled 'error' event
                       ^
Error: listen EADDRINUSE
    at errnoException (net.js:770:11)
    at Server._listen2 (net.js:910:14)
    at listen (net.js:937:10)
    at Server.listen (net.js:986:5)
    at Function.app.listen (/Users/kevinwhitley/Sites/status-board/node_modules/express/lib/application.js:529:24)
    at Object.<anonymous> (/Users/kevinwhitley/Sites/status-board/src/server/server.js:3:22)
    at Module._compile (module.js:449:26)
    at Object.Module._extensions..js (module.js:467:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)

This happens... the server appears to continue through it, but won't serve routes, etc.

Folder structure

@kwhitley

• Since components are front-end related, should I move them to src/client/components the same way Yeoman uses app/components? It's trivial to do, and would make pathing easier between app.less and others.
• Should public be moved to src/client/public, or perhaps src/public, or src/server/public?
• Should src/server/lib be cleaned up in any way?

HTML in public folder not accessible on existing browser port...

Appears to be a content decoding issue - perhaps with express static or gzippo?

Only appears to affect the proxy port from grunt-reload. Content length is zero on gzipped html for some reason (on proxy).

How to handle templateUrl in directives.

I just tried making a directive with templateUrl instead of including the template: in the directive itself. Not having much luck... it occurred to me this might not work with how genesis combines partials/template files?

Any suggestions? Thanks!

Convert into simplistic starter-app

It should probably be based on this:

http://twitter.github.com/bootstrap/examples/hero.html

Also, this shouldn't be done until #33 is complete and is pushed to a new repo.

Switch to Jade

TJ Hollawaychuk finds EJS buggy and defaults to Jade for ExpressJS.

I think it's best to use the defaults of the library/tool authors rather than imposing a different requirement for my own convenience.

Express `api` module for `/api/package`

Requires #41 / #33 to be complete

• Create api module
• Respond to /api/package route with the contents of package.json
• Integrate package.title & package.version into Angular views

Error during initial 'npm install'

Hi,
I tried to setup genesis-skeleton but encountered an error during the initial npm install:

<WARN> Error compiling LESS. Use --force to continue. </WARN>

Aborted due to warnings.
npm ERR! [email protected] install: `bower install && ./node_modules/.bin/grunt build`
npm ERR! `sh "-c" "bower install && ./node_modules/.bin/grunt build"` failed with 2
npm ERR! 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is most likely a problem with the genesis-skeleton package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     bower install && ./node_modules/.bin/grunt build
npm ERR! You can get their info via:
npm ERR!     npm owner ls genesis-skeleton
npm ERR! There is likely additional logging output above.

npm ERR! System Darwin 12.2.1
npm ERR! command "/usr/local/Cellar/node/0.8.15/bin/node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Users/seiffert/Projects/genesis-skeleton
npm ERR! node -v v0.8.15
npm ERR! npm -v 1.1.66
npm ERR! code ELIFECYCLE
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/seiffert/Projects/genesis-skeleton/npm-debug.log
npm ERR! not ok code 0

Switch to reloadr

https://github.com/jgallen23/grunt-reloadr/blob/master/tasks/reloadr.js

• This needs to be forked so that watch can call reloadr at the end, which should trigger changes
• Move express.compress back above express.static

template.js

Put them in $templateCache using this script:

https://github.com/angular-app/angular-app/blob/master/client/build/grunt-html2js.js

Convert `express-server` into a grunt-npm task

This should be an external dependency.

http://localhost:3001/#/guide is a 404 page

Seems to be an error, unless this is to demo the 404 page functionality.

Clean up & fix navigation

As Home and Get Started both do the same thing, I'd recommend simplifying to only Get Started (default).

Additionally, highlighting needs to work for Docs and other routes.

[RFC] Stable release

Would like some feedback from @kwhitley on structure & the project in general.

Ideally would like to solve our initial "best practice" requirements for a project rather than recreating grunt files & express views over & over.

HTML5 routes with Angular

If an express app only has a single view, all server-side routes should render the app, and angular should take care of the view.

express-server task does not appear to kill/restart node app properly

Found by changing a registered route after the watch changes are enabled. The watch task triggers, browser reload occurs as required, but the route is left unchanged.

Assuming this is because the original app is left running instead of killed/reloaded...

angular templates break with javascript line comments

See ericclemmons/grunt-angular-templates#12

app.js should use express3 api & modular structure

http://expressjs.com/api.html
http://vimeo.com/56166857

No more app.configure, though it exists for legacy purposes.

Grunt task cleanup/reorg

Missing partials results in infinite loop

When AngularJS tries to load via AJAX a partial (that wasn't compiled via ngtemplates), an angular error page is returned, which causes an infinite loop.

• Copy all partials into dist/ directory as backup, so ngtemplates is optional
• @kwhitley's template|partials|views*.html error bypass in errors/index.js

Test out ResponableCSS

http://responsablecss.com/

Let's see what it takes to compile SCSS and another framework.

Make NPM module

Similar to being able to run express to create a structure, allow the following:

$ npm install -g genesis-skeleton
$ genesis

Static File Support

For easily supporting Github pages, the public folder should be able to have something like:

public/
    about/
        index.html
    features/
        index.html
    index.html

These would reference <link src="build/css/my-project.css"> directly, but the HTML would have no need to be compiled.

Sure, something like usemin may be helpful in this regard, but that would bypass the entire compilation process in grunt and introduce two different workflows for both dynamic & static sites.

Deployment issue, npm start not found.

Hello all,

I tried deploying this morning and its failing. I get the following logs from Heroku:

2013-01-28T18:05:25+00:00 heroku[web.1]: Starting process with command `npm start`
2013-01-28T18:05:25+00:00 app[web.1]: bash: npm: command not found
2013-01-28T18:05:26+00:00 heroku[web.1]: Process exited with status 127
2013-01-28T18:05:26+00:00 heroku[web.1]: State changed from starting to crashed

Any thoughts?

Also, while deploying I began pondering how this works with heroku... In the past I have always deployed simple heroku node apps, make 1 or 2 JS files. With the genesis setup:

• How does Heroku know to run code from the dist folder?
• Does Heroku even run from the dist folder, since the actual node server is never copied over from the src folder.

Thanks all, keep up the great work!

Package audit/cleanup

Complete genesis-skeleton.com + documentation

Genesis Skeleton

Zero to Live in minutes

Description

An opinionated modern application starter using the latest technologies (such as Express, Angular, Bootstrap & Grunt) to help you quickly build your next great app.

Features

• Clear folder structure - Based on both client & server-side convention, every part of your application has a home.
• Automation - Leveraging Grunt, everything from linting your scripts to pre-processing your CSS and images is done for you.
• Live development server - Simply run grunt server and watch your changes instantly via LiveReload.
• Angular-optimized - Templates are automatically pre-loaded so your app loads instantly without extra requests.
• Production-ready - From CSS pre-processing to image optimization, everything is ready to go with a simple grunt build
• Heroku-ready - Even if your live site will be deployed elsewhere, it's a breeze to show off your app to a client with a few keystrokes.

Get Started in 5 Easy Steps

(Keep what we have)

FAQ

Why not Yeoman (or another generator)?

Yeoman is a fantastic generator. This project is not a generator. It's an opinionated starter application meant for you to fork, modify, and use with each project you take on. Generators by design create a limited structure that you immediately have to wrangle to match your own convention and toolset. Genesis Skeleton aims to create a structure for your front-end app that is well-organized and flexible to match each project's needs.

Why Angular (and not another framework)?

For robust applications with a lot of moving parts, Angular has shown to support both rapid prototypes and complex applications requiring well-though architecture.

Don't fret, though! You're only a simple bower install away from having your favorite framework ready to use.

I have a problem! How do I solve it?

Open an issue or contact me on Twitter: @ericclemmons.

Documentation

1. Download or Clone the project
2. Customize to your project
   2.1. Change package.json
   2.2. Change app.'s with YOUR SECRET
3. Adding & Removing client-side dependencies
   3.1. Removing (go into how to delete things from bower & build scripts)
   3.2. Adding (go into how to add things in bower & build scripts)
4. Adding & Removing server-side dependencies (should just be NPM)
5. Optimizing your CSS & JS
6. Deployment to Heroku

Open should not happen automatically

It's annoying as heck when grunt server opens window & a running server, and then you have to restart the server.

Views are cached between LiveReloads

@kwhitley says that 6e08831 was working then.

Getting Error: listen EADDRINUSE

Just tried the a fresh install (comparing it to the new Yeoman skeleton) and I'm getting this error. I've checked to make sure nothing else is listening on 8000 and there isn't even another instance of node running. I'm not 100% sure it's really an issue with your code, but it looks a lot like the server's being run twice.

Running "watch" task
Waiting...Express server listening on port 8000

events.js:71
        throw arguments[1]; // Unhandled 'error' event
                       ^
Error: listen EADDRINUSE
    at errnoException (net.js:770:11)
    at Server._listen2 (net.js:910:14)
    at listen (net.js:937:10)
    at Server.listen (net.js:986:5)
    at Function.app.listen (~/sites/genesis-skeleton/node_modules/grunt-reload/node_modules/connect/lib/proto.js:229:24)
    at Object.module.exports (~/sites/genesis-skeleton/node_modules/grunt-reload/tasks/reload.js:190:54)
    at Object.task.registerTask.thisTask.fn (~/sites/genesis-skeleton/node_modules/grunt/lib/grunt/task.js:58:16)
    at Task.<anonymous> (~/sites/genesis-skeleton/node_modules/grunt/lib/util/task.js:343:36)
    at Task.<anonymous> (~/sites/genesis-skeleton/node_modules/grunt/lib/util/task.js:319:9)
    at Task.<anonymous> (~/sites/genesis-skeleton/node_modules/grunt/lib/util/task.js:346:11)

Move api routes out of app.js

Move the api routes to /lib/api/index.js

Missing components

Hello, really nice work here. Trying to install and start grunt server, but I seem to be missing the components... specifically I'm getting the following error:

`
Running "less:app" (less) task

NameError: variable @gray is undefined in src/client/app/less/app.less:14:14
13 body {
14 background: @gray url("../img/background.jpg") no-repeat top center fixed;
15 background-size: cover;
`

It seems that bootstrap is missing completely?

Update docs to detail removal of `grunt server` and introduction of coffeescript.

Debug toggle on production

To allow non minified js/css files to be used for debugging...

Syntax Suggestion
http://[route]?debug

Also, add grunt server:prod that sets the environment to production and allow for minify task and pointing resources to minified versions (for production checking on dev)