CODEWITHSUNDEEP
node.jsember.jsexpressgruntjs
sir_thursday
sir_thursday

Reputation: 5409

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.

Upvotes: 0

Views: 235

Answers (1)

panta82
panta82

Reputation: 2721

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.

Upvotes: 1

Related Questions