Building Ember + Grunt into an Express + Node project

I just joined a team that has an Express + Node + MongoDB project with little to no front end framework. I'm looking to build Grunt and Ember into the project. I've never done this before, usually I start from scratch with some kind of stack (whether it is Yeoman or MEAN).

Are there any good tutorials for building Grunt and Ember into an existing project/things I should watch out for? This question is probably too broad (plus it doesn't really have a correct answer...) but I thought I'd shoot it out here and close it in 10 minutes or so if that is the case.

There's very little interlope between your ember and node apps. All you really need from express is to statically serve your index.html and the resources.

The way I handled it was:

  • Create your ember app in a separate directory from your express.js app (so you don't mix up codebases)

  • Directory structure:

    project
|- backend
|  |- ... your node app
|- frontend
|  |- [package.json]
|  |- [Gruntfile.js]
|  |- public
|  |  |- js
|  |  |- styles
|  |  |- images
|  |  |- [index.html]
|  |- dev
|  |  |- vendor
|  |  |- controllers
|  |  |- styles
|  |  |- templates
|  |  |- ... (other Ember folders)
|  |  |- [app.js]
|  |  |- [vendor.js]

  • Your Gruntfile.js tasks should take their sources from dev and compile them into public. Must use modules IMO:

    • grunt-neuter to combine your js sources (recommended outputs: public/js/vendor.js and public/js/app.js)
    • grunt-ember-templates to compile your handlebar templates into functions, so you don't have to drag the entire handlebars.js to the client (recommended output: public/js/templates.js

  • All the sources you will work on should go to the dev folder. This includes:

    • Handlebars templates (eg. dev/templates)
    • Less or sass styles (dev/styles)
    • Vendor libraries (dev/vendor/...)
    • Ember controllers, views, etc.

  • If you're using neuter, put all the includes inside dev/app.js file, in the order you want. You can initialize your main ember app at the end. I like to separate vendor libraries into their own dev/vendor.js file. These will be compiled into their public/js/... counterparts.

  • Your index.html should load all the compiled scripts and styles from the public folder. If you set up your project like described here, it should end up loading 3 javascripts and 1 css.

  • Finally, add a static handler to your express.js app and have it serve folder ../frontend/public. Depending on the config, you might need a separate index.html handler for / route.

This is the pattern I developed before ember-cli became popular. So far, I'm pretty pleased with the results. But you might want to check out ember-cli, just in case they developed a better approach.