16

I'm using Ember CLI 0.0.36. When I run ember server in my project folder, my understanding is that a server buried in some Brocoli process gets started. However I would like to program a custom Express server and have my app point to that Node.js code for its backend. How would I go about doing that within the Ember CLI framework?

UPDATE:

Following @user3155277's answer, I added an adapter file like so:

app-name/app/adapters/application.js:

import DS from 'ember-data';

export default DS.RESTAdapter.reopen({ namespace: 'api' });

I created an Express server that I put at the root of my app:

app-name/server.js:

var express = require("express"),
    app = express(),
    path = require("path");

app.get("/api/test", function(req, res) {
    res.json({
        hello: "world"
    });
});

var server = app.listen(8147);

In the Ember app, my index route is defined as so:

app-name/app/routes/index.js:

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
        return Ember.$.getJSON("/api/test").then(function(data) {
            return data;
        });
    }
});

On the command line I then start the server like so:

ember serve --proxy http://localhost:8147/

I get the following error:

version: 0.0.35-master-86abdb11ba
Proxying to http://localhost:8147/
object is not a functionTypeError: object is not a function
    at Class.module.exports.Task.extend.start (D:\ember-cli\lib\tasks\server\express-server.js:41:43)
    at Class.module.exports.Task.extend.run (D:\ember-cli\lib\tasks\serve.js:40:23)
    at Class.module.exports.Command.extend.run (D:\ember-cli\lib\commands\serve.js:35:18)
    at Class.Command.validateAndRun (D:\ember-cli\lib\models\command.js:74:15)
    at CLI.<anonymous> (D:\ember-cli\lib\cli\cli.js:33:20)
    at tryCatch (D:\ember-cli\node_modules\rsvp\dist\commonjs\rsvp\-internal.js:163:16)
    at invokeCallback (D:\ember-cli\node_modules\rsvp\dist\commonjs\rsvp\-internal.js:172:17)
    at publish (D:\ember-cli\node_modules\rsvp\dist\commonjs\rsvp\-internal.js:150:13)
    at flush (D:\ember-cli\node_modules\rsvp\dist\commonjs\rsvp\asap.js:51:9)
    at process._tickCallback (node.js:419:13)Livereload server on port 35729
Community
  • 1
  • 1
cwarny
  • 997
  • 1
  • 12
  • 27
  • Ember-cli is iterating so fast however 0.0.39 makes this less painful. Generate a api-stub from command line and boom. you just have to var express = require('express') but in 0.0.40 will not have too. I had the same problems with api-stubs prior – elrick Jul 16 '14 at 03:05
  • Hey @elrick, I waited for 0.0.40 to come out but I'm still quite confused about how to set up the whole thing. Could you give an example? – cwarny Jul 28 '14 at 20:14

2 Answers2

19

This is actually pretty simple with Ember CLI 0.0.40:

Create folder structure

ember new my-app

Go into the newly created folder

cd my-app

Generate api-stub* (see update)

ember generate api-stub my-server

This latter command creates a server folder with an index.js file and a routes folder with a my-server.js file.

Open my-server.js file and you see:

module.exports = function(app) {
    var express = require("express");
    var myServerRouter = express.Router();
    myServerRouter.get("/", function(req, res) {
        res.send({my-server:"something"});
    });
    app.use("/api", myServerRouter);
};

All you need to do then is to change that file. If the Ember app makes calls to /api/hamsters and /api/project, edit as follows:

module.exports = function(app) {
    var express = require("express");
    var myServerRouter = express.Router();
    myServerRouter.get("/hamsters", function(req, res) {
        res.send({ ... });
    });
    myServerRouter.get("/project", function(req, res) {
        res.send({ ... });
    });
    app.use("/api", myServerRouter);
};

To start the server (from project's root):

ember server

Make sure you have updated node.js to the latest version as well.

Updates

As of Ember CLI 0.0.41 (via this PR) api-stub has been renamed http-mock.

ryanyuyu
  • 6,366
  • 10
  • 48
  • 53
cwarny
  • 997
  • 1
  • 12
  • 27
3

I started playing with ember cli so i'm not sure but i found the following: https://github.com/dockyard/ember-cli-plus-backend/tree/rails-served-html/frontend/api-stub Basically you should proxy your express server to the same port as your ember-cli (so then you don't have to deal with jsonp issue)

Set the method to 'proxy' and define the proxyURL to pass all API requests to the proxy URL.

UPDATE:

1.Generate adapter ember generate adapter application

2.Make api namespace - fill the created file with the following code:

export default DS.RESTAdapter.reopen({ namespace: 'api' });

3.Start the server with ember serve --proxy http://localhost:1337/ (this will proxy all your request to localhost:4200 to 1337

4.Make routes in your express app prefixed by /api

Hope it helps

barczag
  • 741
  • 6
  • 10
  • Thank you. Will give it a try and let you know how it goes. But, before that, and this might be a silly question, do you know how to deal with that when going into production? Using a proxy sounds like a hack. – cwarny Jun 27 '14 at 13:30
  • I tried to implement your suggestions. See my edited question with the issues I encountered. – cwarny Jun 27 '14 at 15:26
  • Please try using the latest version im using 0.0.37 For the hacking question this proxy workaround is only for developing you should use files in dist directory for a production server served by your express app. – barczag Jun 27 '14 at 15:32
  • I made a similar buildpack for using a Node backend rather than Rails. I use a proxy during development, but this in production (which doesn’t proxy anything). https://github.com/andrewbranch/heroku-buildpack-nodejs-ember – Andrew Mar 29 '15 at 05:12