Quickest Backend API for Ember

You just got started with a new Ember app and have no backend server.

“Should I create a Rails project for this API? Maybe a PHP server? How about node.js with Express?”

You know you can start a server process listening on some port, and hook it up via the Ember CLI --proxy option.

Whether the goal is a full-fledged app or simply a proof of concept, you want to be lean and get started quickly…

Tip! For slightly more complex setups, you might be interested in mocking a JSON API backend with Ember CLI Mirage.

Leveraging Ember CLI

We are going to use an Ember CLI feature that lets us create an Express API within the same ember server process.

Let’s create a server:

$ ember generate server

Which will generate the following:

// server/index.js

module.exports = function(app) {
  var globSync   = require('glob').sync;
  var mocks      = globSync('./mocks/**/*.js', { cwd: __dirname }).map(require);
  var proxies    = globSync('./proxies/**/*.js', { cwd: __dirname }).map(require);

  // Log proxy requests
  var morgan  = require('morgan');
  app.use(morgan('dev'));

  mocks.forEach(function(route) { route(app); });
  proxies.forEach(function(route) { route(app); });

};

All these highlighted lines basically set up the stage for including mock files, useful in testing. Mocks can be created by executing, for example, ember generate http-mock hamsters.

This quick server technique will only work in development and testing. Ember CLI will not output any of the contents under /server to a production build.

That said, if node.js and Express end up being our choices for a production setting, we can simply move the app onto its own environment.

This is how one of my apps’ API looks like. It’s yet another Express app.

// server/index.js

// other dependencies installed via `npm install --save-dev`
var bodyParser = require('body-parser');

module.exports = function(app) {

  app.use(bodyParser.json({ type: "application/json" }));

  app.get('/api/items/:item', function(req, res) {
    const item = localdb.find('item', req.params.item);
    res.send({ item: item });
  });

  // other API endpoints

}

Now we can launch the server… for both front- and backend!

$ ember server
Livereload server on http://localhost:49152
Serving on http://localhost:4200/

All Express endpoints (e.g. http://localhost:4200/api/items/1) will have priority over Ember routes. It’s a good idea to use the /api namespace!

Read JSON from a local static file

Let’s say we have a JSON file we want to feed to our Ember app. The solution is really simple:

const fs = require('fs');

// ...

app.get('/api/items', function(req, res) {
  const json = JSON.parse(fs.readFileSync('/path/to/items.json'));
  res.send(json);
});

Best alternative

If you are looking for a fully-featured mock server, Ember CLI Mirage is extremely useful for testing as well as development.

Enjoyed this article? Don't miss my next one!

Leave me your e-mail for content that will help you master Ember:

Do you want to master Ember fast?

Leave me your e-mail for helpful updates delivered straight to your inbox.

(A few e-mails per month. No BS. Unsubscribe anytime!)