stefanpenner / ember-app-kit

deprecated: see https://github.com/stefanpenner/ember-cli

Deprecated

this project has been deprecated in-favour of the ember-cli project:

• https://github.com/ember-cli/ember-cli
• http://www.ember-cli.com/

Migrating to Ember CLI

First, run npm install -g ember-cli to install Ember CLI. Now, on top of your existing EAK project, run ember init. Ember CLI will then migrate your project, showing you a diff of its overrides, and letting you edit them, as it goes along.

Ember Init Overrides

• tests/.jshintrc
• Let ember-cli overwrite this.
• app/index.html
• Since managing vendor assets is now handled via the Brocfile, you should let ember-cli overwrite this file.
• app/app.js
• Ember Configuration is now handled in the config directory.
• app/router.js
• The Router's location is now handled via environment configuration. Change this to config.locationType.
• app/routes/index.js
• This will attempt to replace your Index Route with a stub. Usually, you wont't want Ember CLI to override this file.
• Brocfile.js
• Move your dependencies from app/index.html into this file by calling app.import().
• Example: app.import('vendor/ember-data/ember-data.js')
• app/templates/application.hbs
• This will attempt to replace your application template with a stub.
• app/styles/app.css
• Another stub.
• tests/index.html
• Let ember-cli add this file. Include any test depencies you had in `app/index.html'.
• bower.json
• package.json

Ember CLI Migrator

The Ember CLI Migrator can help you migrate your files to the standard ember-cli structure, while preserving your Git history. This tool can help you get 90% of the way there when working with EAK.

Importing Ember and Ember Data

You now have to explicitly import Ember and Ember Data. Add import Ember from "ember and import DS from "ember-data" anywhere you declared a route, controller, model, and so on.

Migrating your API Stub

To work with the API stub again, run ember generate server. This command generates a server directory for your mocks and proxies where you can then migrate your routes accordingly.

You may also want to look into Ember CLI Rest API Blueprint which generates DS.RESTAdapter compatible express routes for a given Model.

Custom Environments

Support for custom environments like staging is currently still in progress, see Ember CLI PR #1520

Using The Express Server

The Express server has been exposed and now lives under this directory. You can now customize it any way you want, from enhancing the static file server, to simply using it as an API stub. You may even develop it further and turn it into a full-stack solution.

Cleanup

You can remove the Gruntfile and tasks folder since we won't be needing them anymore.

For now, you can check the app blueprint to see what other files you no longer need.

Troubleshooting

• Ember CLI now picks up your app namespace. Change the import to reference the name of your project.

• If you never changed your application namespace from the default appkit then running ember init will break any import statements you already have

• Index Route doesn't exist

• You may need to refresh your dependencies. Run rm -rf npm_modules && npm install && npm cache clean && bower install

• Tests

• Import tests/helpers/start-app into each acceptance test file.

• import startApp from 'your-app/tests/helpers/start-app

• resolver and startApp still live in test/helpers/ but module-for is now its own package.

• If you were using ember-testing-httpRespond

• This has now been replaced by Pretender.

  • You can use it in your project with ember-cli-pretender

• Import it and its dependencies in your Brocfile by using app.import()

Ember App Kit

Ember App Kit aims to be the foundation for ambitious web applications built with Ember. It's been replaced by an executable ember-cli which dramatically improves buildtimes (via broccoli) and provides sane-upgrade paths, feel free to check that project out. We intend to provide a sensible upgrade path.

This project has been extracted out of several real world applications and is actively used. Currently it covers the basics fairly well, but much still needs to be done. As we learn and as more contributors join in it continues to evolve. If you encounter any bugs, clunky features or missing documentation, just submit an issue and we'll respond ASAP.

At the very least, it helps setup your Ember.js applications directory structure.

We welcome ideas and experiments.

Getting Started

• Project Documentation Site
• Getting Started Guide
• ember-app-kit-todos - the Emberjs todos using Ember App Kit
• ember-app-kit-bloggr - bloggr demo
• Safari Books Online Blog - Introduction to Ember App Kit for more experienced Ember developers by @mixonic
• Ember Sherpa - Introduction to Ember App Kit for those who are new to the Grunt workflow by @taras

Features

• Sane project structure
• ES6 module transpiler support (easy, future-proof modules)
• Module system-aware resolver (see Referencing views and Using Ember loaders)
• Transparent project compilation & minification for easy deploys via Grunt
• Package management via Bower
• Optional support for CoffeeScript, SASS, LESS or Stylus
• Testing via QUnit, Ember Testing and Testem (with examples)
• Linting via JSHint (including module syntax)
• Catch-all index.html for easy reloading of pushState router apps
• Generators via Loom (to generate routes, controllers, etc.)

Special Thanks

Some ideas in ember-app-kit originated in work by Yapp Labs (@yapplabs) with McGraw-Hill Education Labs (@mhelabs) on yapplabs/glazier. Thanks to Yapp and MHE for supporting the Ember ecosystem!

License

Copyright 2013 by Stefan Penner and Ember App Kit Contributors, and licensed under the MIT License. See included LICENSE file for details.

ember-app-kit's Issues

Somehow globalize vendor includes

Currently whenever we add a new bower component, we have to go into 3 files to include it: tests/index.html, public/index.html and karma.conf.js. Has anyone found a way to make this a little easier?

need a proper global lock, that can be shared between processes.

Adding an export for easy sharing with JSBin, gist, etc

How much effort would it take to have ember-app-kit export in a format that is easy to share or drop into a JSBin example?

Or even better work on integration with the folks building
http://www.embersandbox.com/

Use case is is that it would be handy to take transpiled source code and quickly dump to a paste bin type tool.

If there were hook to auto deploy or post from command line that would be great too.

Document using Ember loaders instead of `import`

• this.controllerFor()
• this.routerFor()
• this.container.lookup()
• this.container.lookupFactory()
• needs property in controllers

see #87 (comment)

Wiki for how to debug the development version app from browser console

In vanilla ember app, I can easily perform
App.Blog.find() or App.Blog.create().
But after using EAK. Unable to find App or AppKit ....

How to debug from browser console?

Nested controller naming convention in `needs`

How to refer posts.post controller in the following cases.

• needs: ['posts.post']
• {{controllers.posts.post.}}
• this.get('controllers.posts.post')

Right now it looks something like controllers/posts instead of controllers/posts/post

rebuilding everything every time is slow

idea:

store intermediate files so we can jshint + transpile only what changed, fallowed by a concat.

Document the grunt installer steps

I am having the kinds of issues with grunt and npm that everybody complains about with ruby, rvm and gems.

So can you node guys please refrain from creating, albeit unintentionally, the illusion that the node workflow is "easier". It is just different, and can be just as frustrating if you don't know some of the tricks already. Anyway, sorry for the rant. Trust me there is a point here, with a smidge of trolling.

I am having some issues getting this running, still new to node js stuff.

I had previously installed grunt-cli globally but with sudo because that was the only way I could get it to install. But perhaps this was a mistake.

To reset and try again I did

sudo npm uninstall -g grunt
sudo npm uninstall -g grunt-cli

now

npm list
/Users/gpotter
└── (empty)

grunt-cli  
zsh: command not found: grunt-cli

grunt    
grunt-cli: The grunt command line interface. (v0.1.9)

Fatal error: Unable to find local grunt.
...

OK where is grunt?

which grunt
/usr/local/bin/grunt

go to https://github.com/gruntjs/grunt/wiki/Getting-started

read the docs, find

npm uninstall -g grunt
npm WARN uninstall not installed in /usr/local/lib/node_modules: "grunt"

Uggh!!!
Rage starts to bubble up...

Chillax this is unix we are talking about there is a way. Maybe the global flag is the issue.

npm uninstall grunt   
npm WARN uninstall not installed in /usr/local/bin/node_modules: "grunt"

Ugh ok so what is going on

cd /usr/local/bin/node_modules
no such file or directory: /usr/local/bin/node_modules

ok makes sense

cd /usr/local/lib/node_modules
ls
grunt-cli npm

Ahh we have something.

npm uninstall grunt-cli       
unbuild [email protected]
npm ERR! Error: EACCES, unlink '/usr/local/lib/node_modules/grunt-cli'
npm ERR!  { [Error: EACCES, unlink '/usr/local/lib/node_modules/grunt-cli']
npm ERR!   errno: 3,
npm ERR!   code: 'EACCES',
npm ERR!   path: '/usr/local/lib/node_modules/grunt-cli' }
....

more rage, but remembers I had used sudo before. Bad Gordon, bad Gordon, just let some untrusted installer root your box while you are at.

Not quite sure if I should just rm the /usr/local/bin/grunt maybe that will break some other strange dependency I am not thinking about at the moment. I know I have run npm install more than once.

rage is tapering off... calmer heads are prevailing, this is unix after all there is a fix.

sudo npm uninstall grunt-cli  
Password:
unbuild [email protected]

ok check again

which grunt                 
grunt not found

Success!

Peers over at Taikado project, maybe go troll @wycats, no! We must learn Node stuff because the cool ember kids say it is good.

But have doubts when I hear @stefanpenner is afraid to run npm install in a live demo at an ember talk. Fully justified of course.

Takes a break...

OK ready to start again based on the ember-app-kit user guide...

npm install -g grunt-cli

outputs

npm http GET https://registry.npmjs.org/grunt-cli
npm http 304 https://registry.npmjs.org/grunt-cli
npm ERR! Error: EACCES, mkdir '/usr/local/lib/node_modules/grunt-cli'
npm ERR!  { [Error: EACCES, mkdir '/usr/local/lib/node_modules/grunt-cli']
npm ERR!   errno: 3,
npm ERR!   code: 'EACCES',
npm ERR!   path: '/usr/local/lib/node_modules/grunt-cli',
...

Seems like a permission error. So thus encouraged to run sudo. Bad practice node people, bad practice.

rage, rage!, rage! Hope nobody is looking, keyboard not broken yet.

Decide to go troll github, and here I am.

Not sure how to proceed. Guess I need help on how setting this up with only local user permissions. Have not tried homebrew yet.

Tips? I can help amend the user guide if someone can help straighten me up on what is going on here.

Even good getting started resources with grunt, npm and node.

I am on OS X Mountain Lion.

Thanks

By the way what started these shenanigans was this error message

grunt server
>> Local Npm module "grunt-cli" not found. Is it installed?

Karma by default?

Should we stick with using Karma for testing, or make it optional? Karma's not too complicated and has some nice benefits, but is also a somewhat large dependency. On the other hand, making it optional introduces another layer of complexity to the Gruntfile, as we'd have to add a grunt-contrib-qunit task for CI, as well as set the npm test script to not use Karma by default.

"dist" builds in a development version of ember.

How do I keep my app built with ember-app-kit up to date?

We need to figure out how users are supposed to keep their application's tasks up to date. My thinking was ember-app-kit should actually be an NPM module rather than an "app skeleton".

dist/vendor folder is not needed

with env PORT set, karma test:server stops working

Globals exported by testing libs in .jshintrc

Do we really need to list these globals?

https://github.com/stefanpenner/ember-app-kit/blob/master/.jshintrc#L9-L34

These are exported by testing libraries, and we are running jshint only for app/**/*.js, not for tests/**/*.js

My thoughts on EAK as I consider using it for ember-tools

Just random thoughts after spending an hour with it:

• Can't be part of a bigger rails or express app (like discourse), might not be a goal of the project and that's fine.
• Move app.js, routes.js into config/app.js, etc. Its also a great place for store.js, i18n, etc.
• Don't inline script tags from vendor, require them like anything else.
• Use almond to load the modules so we can load everybody's stuff (anybody who supports amd anyway)
• app namespaces in module loading seems lame, but maybe smart
• Make the module resolver a dependency, put on bower
• Precompile only the templates that changed, make them modules
• Don't want to ship with coffeescript, then we have to support it, which is a huge pain when it comes to generators
• Need source maps for concat build, having a giant app.js is no good
• Need a production build
• Get all of ember in es6, so it depends on handlebars rsvp, backburner, etc. straight from bower

EWUT sass rubygem dep?

use new es6 syntax

Question: Using a View from inside another

Hi all,

I'm feeling a bit dumb as this has me completely beat. I've checked the docs (https://github.com/stefanpenner/ember-app-kit/wiki/Referencing-Views) but this doesn't seem to work for me.

Without going into too much detail im trying the following.

in controllers/index.js

import Someview from 'appkit/views/some_view'

in views/some_view.js

var SomeView = Ember.View.extend({
   init: function(){
      console.log('Hi from the sub view');
   }
});

in templates/index.hbs

{{view App.SomeView}}

The errors I receive are:

Assertion failed: Unable to find view at path 'App.SomeView' ember.js:361
Assertion failed: You must pass a view to the #view helper, not App.SomeView () ember.js:361
Uncaught TypeError: Cannot read property 'proto' of undefined 

I added a breakpoint into the compiled app.js and SomeView is certainly not in scope at all.

Compiled code looks like:

define("appkit/views/index",
  ["appkit/views/some_view"],
  function(__dependency1__) {
    "use strict";
    var SomeView = __dependency1__.SomeView;

    var IndexView = Ember.View.extend({
      ...blah

What am i doing wrong? :(

grunt server keeps dying

Should be pretty easy to reproduce, I have to constantly restart it.

experiment with the karma test running

Experiencing extreme Finder hang when rebuild happens

Whenever grunt server rebuilds after detecting a file change, Finder suffers from extreme hangs (beach ball of death) where it becomes unusable for 10+ seconds.

My best initial guess is it's being caused by the files being locked and Finder of course trying to access these files meta data to update the window.

Software: OS X 10.8.4 (12E55)
Model Name: MacBook Air
Model Identifier: MacBookAir4,1
Processor Name: Intel Core i5
Processor Speed: 1.6 GHz
Number of Processors: 1
Total Number of Cores: 2
L2 Cache (per Core): 256 KB
L3 Cache: 3 MB
Memory: 4 GB

Installed:
Node v0.10.12 (via NVM)
Total Finder
Dropbox
Google Drive
CS5
VMWare
Parallels
VirtualBox
XCode
etc
Time Machine is DISABLED, no other backup software, no antivirus (duh)

Maybe it would be better to copy the files temporarily instead of locking them, if you can't keep them in memory otherwise?

build lock, leaves a short window between file change and the start of the build task(which locks)

QUnit tests failing in the browser

When running the tests by going to http://0.0.0.0:8000/tests/ they fail.

Running tests using karma in all its variations works.

Is the intention to keep the browser-based test flow working, or switch over to just supporting terminal-based testing out of the box?

fails hard on linux

• chrome being default test runner
• karma-safari-launcher: https://github.com/stefanpenner/ember-app-kit/blob/master/package.json#L42
• maybe more?

Adding new deps is still a mega pain in the ass.

currently one needs to muck with.

• public/index.html
• test/index.html
• karma config
• bower / vendor / ...

How to reference Views in Handlebars helper?

I can't seem to do a very common use case for my Ember apps:

{{view App.SomeView}}

I don't see any app kit code added to resolve these, and the AMD modules aren't appended to the application namespace obviously. My best guess is that this just isn't something appkit supports yet?

Even though I didn't think they'd work, I also tried:

{{view some}}
{{view SomeView}}
{{view views/SomeView}}
{{view app/views/SomeView}}
{{view appkit/views/SomeView}}
{{view appkit.views.SomeView}}

Importing other libraries

Ember-App-Kit does a great job of allowing you to write modular Ember code..

I'm just struggling to understand how to import other libraries. For example, I would like use SockJS or SocketIO for websocket communications and twitter bootstrap.

I can include them as bower dependencies, importing the scripts directly in index.html and access them through the global namespace, but jshint complains that it can find the classes that I'm referring to in my routes and controllers.

Previously I've always relied on the Rails asset pipeline to organise my imports into the global namespace.. so just not quite sure how to do this. If anyone could steer me in the right direction it would be very much appreciated.

Problems using Ember-data models

I'm getting an error message from Ember:

Assertion failed: Your model must not be anonymous. It was (subclass of DS.Model) 

My model looks as follows:

var Project = DS.Model.extend({
  name: DS.attr('string') 
});
export default Project;

I also find that in my controllers / routes, I cannot simply import 'models/project' but need to use the fully qualified name 'appkit/models/project'

Not clear how to handle environment-specific configuration

Just saw this question on stack-overflow.

http://stackoverflow.com/questions/18220577/how-can-i-set-up-a-node-app-ember-app-kit-on-heroku-that-reads-env-variables-a

Anyone know of a good solution?

use handlebars.runtime for index.html and test.html

#37 was a quickfix, bower handlebars build doesn't provide handlebars.runtime this prevents us from easily bundling handlebars.runtime

fingerprint assets for deploy (also allow local preview of finger printed assets)

Support resolving from subdirectories.

/controllers/users/new.js
/controllers/users/edit.js

/templates/users/new.hbs
/templates/users/edit.hbs

etc should work.

(cc: @ghempton)

Nested routes not working

routes.js

function Routes() {  
  this.resource('persons', {path: '/persons'}, function(){
    this.route('new', {path: '/new'});
  });
}
export default Routes;

routes/persons.js

var PersonsRoute = Ember.Route.extend({});
export default PersonsRoute;

templates/persons.hbs

<h3>Persons</h3>

Error in console:

Uncaught Error: There is no route named persons ember.js:23900
RouteRecognizer.handlersFor ember.js:23900
createNamedTransition ember.js:24535
doTransition ember.js:25113
Router.handleURL ember.js:24295
Ember.Router.Ember.Object.extend.handleURL ember.js:25385
Ember.Router.Ember.Object.extend.startRouting ember.js:25362
Ember.Application.Ember.Namespace.extend.startRouting ember.js:29004
Ember.Application.Ember.Namespace.extend.didBecomeReady ember.js:28962
DeferredActionQueues.flush ember.js:4901
Backburner.end ember.js:4591
Backburner.run ember.js:4630
Ember.run ember.js:5112
Ember.Application.Ember.Namespace.extend.scheduleInitialize ember.js:28708
jQuery.Callbacks.fire jquery.js:1037
jQuery.Callbacks.self.fireWith jquery.js:1148
jQuery.extend.ready jquery.js:433
completed

templates should be separate modules

Currently templates are bundled into a single templates module, they should instead each be in there own module.

Documentation

I'm working on documentation here. At some point it might get merged into the readme, but I wanted to keep it separate for now so that there's not a ton of tiny commits to the repo while it's being worked on.

Stuff to add:

• Testing
• Building/compiling/distribution
• Using LESS/SASS/CoffeeScript/Karma/Travis/other extras

Deploying as per Getting Started guide is wrong or broken

Followed the instructions laid out here: https://github.com/stefanpenner/ember-app-kit/wiki/Getting-Started but even with a fresh checkout (and npm install), if you do grunt build:dist then grunt server:dist, as the guide suggests, when you pull up localhost a bunch of the files are 404 presumably because vendor is in the project root but the server is mounted in tmp/public. Briefly looking to the grunt setup, it looks like build:debug has copy:vendor but build:dist does not?

GET http://localhost:8000/vendor/jquery/jquery.js 404 (Not Found) localhost/:12
GET http://localhost:8000/vendor/handlebars/handlebars.runtime.js 404 (Not Found) localhost/:12
GET http://localhost:8000/vendor/ember/index.js 404 (Not Found) localhost/:12
GET http://localhost:8000/vendor/loader.js 404 (Not Found) 

Maybe I am or the guide is missing a step?

Source maps

Two parts to this:

1. Line-to-line source maps in ES6 transpiler.
2. File-to-chunk source maps in the concatenated output.

• file maps
• 1:1 mappings

convention for helpers

obviously app/helpers/**/*.js

but we need to make ember's helper lookup container aware, and then EAK should just work.

make EAK: prod + dev ember build aware

.jshintrc: set browser:false

As in this PR ..

emberjs/ember.js#2953

How do I easily deploy the production assets to Heroku, GitHub pages, or S3?

I think for most of us these are the most common places we're hosting our Ember applications. I want it to be dead simple for me to push my app to these hosting providers.

es6 aware jshint

JSHint errors cause compilations to stop

It appears everytime I add a 'debugger' to my code, my files stop getting compiled and I have to restart the server.

Improve the Load/DefaultResolver:

Rather then an explicit map, we should pluralize these. This would us to easily map container.lookup('foo:bar') to 'foos/bar.js'

https://github.com/stefanpenner/ember-app-kit/blob/master/vendor/loader.js#L57-L63

likely just a simple + s

ApplicationView resolution may not be working correctly. (likely more of an ember thing)

explain naming conventions

Single file output

Is it possible to export a project down to a single HTML file, with magnification, and all JS and CSS resources inline? Are there some flags or preprocessor tasks I could configure to do this?

Use case:

Contemplating trying to develop a HTML + JS app that needs to be sent to C pre-parser and compile to C code that goes into an embedded system.

Would like to make the source file as streamline and small as possible (under 2 MB for total project).

Embedded system developer environment is a bit of a hassle to work with and so would like to not have to deal with a large number of output files before moving them over to the project to be converted to C code.

Update dependency to RC6.1

I'm currently trying to get the maintainer of the component for ember to pull in components/ember#32 which will update its dependency to RC6.1. If we want this automated in the future, I assume someone on the core team would need push access to the component repo. Who would that be?

Can't override nested routes

Hi,

Awesome work on Ember-App-Kit.. Really exciting project. I'm just struggling to override the nested routes automatically generated by Ember. My routes.js looks like:

function Routes() {

  this.route('bob');
    this.resource('projects', function() {
      this.route('index');
   });
} 
export default Routes;

I'm able to override the ApplicaitonRoute, BobRoute and ProjectsRoute, however I'm unable to override the ProjectsIndex route.

I've tried files named projectsIndex.js and index.js. I've placed them in the routes folder and in the routes/projects folder. I've tried a few other permuations of this.

Could anyone give me a pointer on how to name the .js file and where to put it in the directory structure. I'm assuming the actual route will be defined as:

var ProjectsIndexRoute = Ember.Route.extend({
init: function() {
  console.log('hello pr index');
}
});
export default ProjectsIndexRoute;

improve build:dist

should clean the unminified output & tests from tmp/public so it can be easily deployed