< mockra >

Brunch, Express, and Ember.JS Guide - Part 1 - 19 Dec 2013


This guide is going to be focused on building a back-end that works with the Ember.JS Getting Started tutorial. The back-end we’re going to build will utilize Express and Mongoose. We’ll also use Brunch and Bower to compile and manage our assets.

This first part of this guide will cover setting up our basic project structure, and libraries. You can find the example application for this tutorial on Github.

Project Setup

Assuming you already have node.js installed, you’ll need to install brunch and bower.

npm install -g brunch
npm install -g bower

We’re going to be using brunch to compile our assets, so that we can serve them through our express application. brunch is similar to the asset pipeline in Ruby on Rails applications.

If we want brunch to watch our app directory and automatically compile our assets when we make changes, we’ll need to run the following command.

brunch watch

Bower will be used to download and manage our client-side libraries, such as bootstrap, ember, and jquery.

Generating our Project

The first step will be generating a basic brunch project. There are a variety of Brunch skeletons available, but we’re going to use a basic skeleton for this project.

A skeleton in brunch is similar to a template; it provides a starting point for your project. Some skeletons will create a project with Express, Ember, and Bootstrap already setup.

brunch new gh:brunch/dead-simple your-project-name
cd your-project-name

Downloading Ember

We now need to download ember and ember-data using bower. Since ember depends on jquery and handlebars, bower automatically installs these libraries for us.

bower install ember --save
bower install ember-data-shim --save

We’ll also need to install ember-handlebars for brunch, so brunch can correctly compile our templates to work with ember.

npm install ember-handlebars-brunch --save

The next step is to configure brunch to properly compile our assets into the public directory. To do this, we need to tell brunch to look in the bower_components directory. We can do this in brunch-config.coffee.

Ember Setup

After we’ve installed our dependencies, we’ll need to create a few files to get Ember working. The first file is app/initialize.js, which will setup our Ember application.

The second file we’re going to create is app/store.js, which will configure our RESTAdapter for Ember-Data. In this file we’re setting a namespace, so we can version our express api. We’re also setting a custom primary key, so that ember will work with MongoDB.

The final file is app/router.js. This includes the basic route you’ll create during the Ember.JS Tutorial.

Express Setup

We now need to install the Express and Mongoose packages, so we can start building out our back-end. Run the following commands to install these libraries.

npm install express --save
npm install mongoose --save

An optional tool you can install is node-dev. node-dev is a development tool that will restart your node process whenever you make changes to your server files. You can install that tool with:

npm install -g node-dev

Now that we have all of our dependencies installed, we can create our server file, server.js.

You can run this file using node-dev by calling:

node-dev server.js

You can then access your application at 0.0.0.0:3333.

That’s everything we’re going to cover in the first part of this tutorial. The second part will dig into the Ember.JS tutorial, as well as setting up our REST API with express.

You can find the second part of this guide, here.