Series: ember-cli-deploy

ember-cli-deploy-Connecting to your API

Published on Jun 08, 2016

Your production app needs to connect to a different host than your development app.

This episode shows you how to set it up so you’ll be able to connect to your API correctly in both situations.


Links

Code

import ActiveModelAdapter from 'active-model-adapter';
import ENV from 'ember-2-0-frontend/config/environment';

export default ActiveModelAdapter.extend({
  host: ENV.host
});
import ENV from 'ember-2-0-frontend/config/environment';

export default Ember.Service.extend({
  login(userName, password){
    return new Promise((resolve, reject)=>{
      Ember.$.ajax({
        method: "POST",
        url: `${ENV.host}/sessions`,
        data: {
          email: userName,
          password: password
        }
      }).then((data)=>{
        //...
      })
    })
  },
  //...
})

Transcript

Hey everyone and welcome back to our series on ember-cli-deploy. The last episode was really long and really got into the nitty-gritty of setting up an s3 account. In this episode, we’re going to do some stuff that’s not quite as specific to s3, so it’ll help you no matter where you’re deploying. And it’s also going to be a little bit shorter to make up for last time.

So in the last episode, we got it deployed, but when we wanted to put anything to the API, it didn’t work because it’s trying to put it to the same url. But we want it to actually go to a different url where our api is. In this case, it’s a heroku app, quiet-castle, and the key to this will be the host property on the adapter. That will let us set the default api location. Our first instinct may be to grab this url and then go directly to the application adapter and put it in the host. But that raises a problem, mainly that in your local host, now you’re connecting to the production server, to the production api, and you do not want that.

So what we’ll do instead is we’ll set it in config environment. And so in production, we’ll set the host to this, and then in our default, we’ll set the host just to a blink string, in our application.js, then we’ll import our environment variables from the name of the project, so ember-2-0-frontend, and config/environment, and then we’ll use this here, so ENV.host. And so we’ll see that this is now working again on our local host.

But before deploying to production, there’s one more thing we need to do. We need to go and find all the places in the app where we’re calling $.ajax. Basically if you’re calling ajax for any other reason outside of ember data, we need to go into the urls and make sure that they’re pointing to the right place. So once again we’ll import ENV, and then we’ll make these into a string template and put in ENV.host before the url that we had before. And we’ll do this to the other one. And with that, that should get us everything we need. We’ll go ahead and check to make sure that those are the only two. It appears they are. So now we’ll go ahead and commit that and we’ll deploy it to production.

So now when I try to log in, it works, and I can look at my monsters, I haven’t put that many in, and this is working great. If you’re getting CORS problems, then make sure to put in something to put in the correct headers. I’m not going to get into much detail on that, but if you’re using Ruby and Ruby on Rails, then rack-cors is a really good library.

So to review, in order to get our application deployed and talking to the correct api and production, we had to define different host variables in production and development in config/environment.js. Then in the application.js adapter, we had to pull in the differential host and assign it to the adapter. Then, in any other times that we called ajax to our main api, then we had to differentiate that host as well.

So that wasn’t quite as quick as I thought it would be, but I hope it was helpful. In the next episode, we’re going to continue the s3 walkthrough, and we’re going to go do some of the more complicated things like adding an index so that you can deploy to different versions and activate different versions. And that’ll help you do things like roll back and go to previous revisions if you need do. Also how to compress files and a way to make your upload process a little bit faster. I’ll see you next time.

ember-cli-deploy

Subscribe to our mailing list