How to Connect an Ember app to a Rails API?

Question

Currently having some trouble understanding how to connect an Ember app to a Rails API in my local dev environment. I'm pretty unfamiliar with this sort of set up, as opposed to just running a purely Rails application.

So run when I'm running these two separate apps, it looks like:

Ember app running on `localhost:4200`
Rails API running on `localhost:3000`

And both applications are in the same directory

Parent Directory
|
|___ API
|
|___ Ember App

When I visit both localhost URLs, both the apps are running. The Rails API seems to be fine, but the Ember app displays the default "There's something wrong" page that was made, and below is the error I receive in the console:

I was hoping someone could explain what might be wrong with my set up, that's causing this error.

Mirza Memic · Accepted Answer · 2016-07-17 06:58:14Z

2

Since you have not posted any files here it how it should be setup

Inside Ember define application adapter that has namespace property:

export default ActiveModelAdapter.extend({
  namespace: 'api'
});

Inside rails config/routes.rb you should have something like this:

namespace :api, defaults: {format: 'json'} do
  resource :companies
end

This resource should be defined inside app/api/companies_controller.rb

module Api
  class CompaniesController < ActionController::Base 
    skip_before_action :verify_authenticity_token

    def index
    ...
  end
end

Once you do this you can start environment like this:

ember server --proxy http://localhost:3000

Note that this is defined by routes not location inside directories. Proxy is also important if it is served separately.

You can check this add-on that helps merge two:

https://github.com/thoughtbot/ember-cli-rails

Hope it helps.

answered Jul 17, 2016 at 6:58

Mirza Memic

8725 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mirza Memic Over a year ago

Note that in my example I am using ActiveModelAdapter. You can use also JSONAPIAdapter. This one has also namespace property: emberjs.com/api/data/classes/…

freddiev4 Over a year ago

Cool. Looks like I had this all set up; the two things I was missing was ember server --proxy http://localhost:3000 (didn't know about proxies) and rails s --binding 0.0.0.0

juliangonzalez · Accepted Answer · 2016-07-17 04:23:13Z

0

You have to keep in mind that Ember routes are different from the Rails API routes. The Ember routes are defined in the routes file whereas rails routes are defined in your app depending if you are using controllers or some gem like Grape. So if you hit your Ember app with some route defined in the Rails app it may not work since that route may not exist for the Ember router unless you map exactly the Rails API routes into the Ember router, which is almost never the case.

I recommend you check what routes you have available in your Ember router.

answered Jul 17, 2016 at 4:23

juliangonzalez

4,4012 gold badges42 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to Connect an Ember app to a Rails API?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related