Deploying an Ember.js and Rails API Bookcase

I followed this tutorial: https://semaphoreci.com/community/tutorials/test-driving-ember-js-models to build a bookcase with an Ember.js front-end and a Rails API backend.

The tutorial is great, I strongly recommend it, but it stops short of deploying it. I have found that a lot of issues pop up when you try to deploy an app to the real world. What I really loved about this tutorial is that it uses Test/Behavior Driven Development. I have somewhat of a love affair with TDD and one of the best things about it is that you write your tests as you go along, so you always have a tested app.

Here is what I had to do to get both the API and the front-end deployed in Heroku and talking to each other:

  • Make sure to use Postgresql — If you (like me) started it all out following the tutorial and got deploying with a sqlite3 db, follow the directions here to get the db changed.
  • Follow the directions that Heroku provides when you deploy — they are pretty detailed. In particular, pay attention to Puma. You can find the directions here.
  • I got this error — No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin http://localhost:4200 is therefore not allowed access — there is some good explanation on this Stack Overflow answer. This gets a little tricky. If you want to be the only front-end accessing the API, you need to make sure to specify in your Rails app the “Access-Control-Allow-Origin”. This is what I did:
  • First, I added the following lines to my application.rb file and deployed to Heroku:
  • Now, knowing the URL of my API, I went to the Ember side and added the url to the apiHost property on config/environment.js:
  • I ran the ember app locally, to make sure I could talk to the API
  • I deployed the ember app to Heroku, which provided me with a real URL.
  • I went back to the Rails app and changed my application.rb file to:
  • Make sure to use https on both files so you don’t get a mixed content error.

And voila! The bookcase ember app with a rails 5 back end works! You can see them in action by going to: https://damp-oasis-27007.herokuapp.com . You can also see the API in github: https://github.com/samgrimm/rails-api-bookcase/

There are a few improvements I want to work to do the app:

  • Allowing books to be added by users
  • Create a versioning system for the API
  • Create a rating system for the books

Stay tuned for the improvements!