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!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.