SOLVED: How to deploy Ember App? Errors on everything.

[jenweber]

SCROLL DOWN TO THE LAST COMMENT IN THIS CHAIN TO SEE THE SOLUTION

I got the build to work. I was trying to specify the env url in the wrong place, at the top of the file instead of in the production if. But, I'm still running into issues. I'm not sure where to specify the heroku database url, and also heroku is complaining that I'm missing the secret key base.

I'm following the steps here for the back end, and here & here for the front end Ember to gh-pages.

In environment.js:

  if (environment === 'production') {
    ENV.baseURL = '/earthwars';
    ENV.locationType = 'hash';
   // what else?
  }

Heroku Error:

Internal Server Error
Missing secret_token and secret_key_base for 'production' environment, set these values in config/secrets.yml

despite the fact that I set the secrets using rake secret and
heroku config:set SECRET_KEY_BASE=numbersandletters
I used heroku config to determine if I successfully set the secret key:

DATABASE_URL:             <a url>
LANG:                     en_US.UTF-8
RACK_ENV:                 production
RAILS_ENV:                production
RAILS_SERVE_STATIC_FILES: enabled
SECRET_KEY_BASE:          numbersandletters

[jrhorn424]

Missing secret_token and secret_key_base for 'production' environment, set these values in config/secrets.yml

[faetea]

Look in your .gitignore

The following lines are present, which are preventing your secrets from being committed to github and heroku.

# TODO Comment out these rules if you are OK with secrets being uploaded to the repo
config/initializers/secret_token.rb
config/secrets.yml

[jrhorn424]

@faetea's advice is good. The way we recommended handling this is actually leaving the .gitignore file alone and git add --force config/secrets.yml. Antony and I are thinking about changing this next time around.

[jenweber]

It seems that the front end is hitting the heroku api now, but no data is being exchanged. I am not able to create organizations, sign in, etc. Did I miss something in on the ember side? Was there something else I was supposed to put in the adapter besides the import?

I added this to app/application/adapter.js
import config from '../config/environment';

My config/environment.js

var ENV = {
    modulePrefix: 'earthwars',
    environment: environment,
    baseURL: '/',
    locationType: 'auto',
    host: 'http://localhost:3000',
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      }
    },
..............
  if (environment === 'production') {
    ENV.baseURL = '/earthwars';
    ENV.locationType = 'hash';
    ENV.host = 'https://earth-wars-api.herokuapp.com/';
  }

  return ENV;
};

On the landing page there is a form that has open create. This is the error on the front end (excerpt):

POST http://jenweber.github.io/organizations 405 (Method Not Allowed)
Error: Ember Data Request POST /organizations returned a 405
Payload (Empty Content-Type)

An error on the back end heroku logs, unsure if related to the post action:

Started GET "/" for 74.118.24.163 at 2016-04-07 18:31:12 +0000
ActionController::RoutingError (No route matches [GET] "/"):

[jrhorn424]

    ENV.baseURL = '/earthwars';
    ENV.locationType = 'hash';

Move those lines out of the production conditional.

[jenweber]

I still have the same errors.

POST http://jenweber.github.io/organizations 405 (Method Not Allowed)
Error: Ember Data Request POST /organizations returned a 405
Payload (Empty Content-Type)

[jenweber]

We tried removing the trailing slash in ENV.host = 'https://earth-wars-api.herokuapp.com/' but there was still the same error.

[jenweber]

I deployed the front end to Heroku as well, with the same issue. Here's the latest error message:

POST https://shrouded-reaches-73557.herokuapp.com/organizations 405 (Not Allowed)
vendor-492aea7….js:12 Error: Ember Data Request POST /organizations returned a 405
Payload (text/html)

[jenweber]

Here are the steps I followed for the heroku app deployment.

I also commented out the env variables:

  // ENV.baseURL = '/earthwars';
  // ENV.locationType = 'hash';

[jenweber]

I am able to run a localhost:4200 for the front end, and access the heroku api successfully, so it seems that this is an Ember deployment problem. James has the same 405 error, and can also use a localhost front end to make requests to heroku api.

[jenweber]

I re-deployed to Heroku with the dist folder included. Unfortunately the same error appears. I am going to stop working on this tonight and just finish up my README.

[jenweber]

I followed Matt's steps for deployment, however I am still encountering the same error, where the ember app seems to be placing CRUD requests to the front end url instead of the proper API url. What do I need to do in order for it to be placing requests to my heroku api? I know that heroku works because my presentation was given using localhost for the front end and heroku for the back end.

Follow this link to see a live example of the error. The sign up form contains a GET request to create a list of all registered organizations, which fails like this:

GET http://jenweber.github.io/organizations 404 (Not Found)
Error: Ember Data Request GET /organizations returned a 404
Payload

The home page of the live deployment to gh-pages
My gh pages repo

My config/environment file used during ember build:

  if (environment === 'production') {
    ENV.host = 'https://earth-wars-api.herokuapp.com';
    ENV.baseURL = '/earthwars/';
    ENV.locationType = 'hash';
  }

[GA-MEB]

@jenweber, I just updated my sample app to reference the Organization resource from your API, and my app seems to be loading the Organization names correctly. I wonder if the problem might be with something in the ember-auth template. I'll try to make another repo based on ember-auth and verify if I can get that working.

[GA-MEB]

Hey @jenweber, I made a second app based on the ember-auth template, and I was able to duplicate your issue.

It seems that the problem stems from the ember-ajax service -- the default host is different in development and production environments. While I'm not entirely clear on why this is the case, I was able to circumvent it by specifying a custom host for the service, as specified in the official ember-ajax documentation.

Here's the content of my ajax/service.js file:

export default AjaxService.extend({
  auth: Ember.inject.service(),
  host: 'https://earth-wars-api.herokuapp.com',
  headers: Ember.computed('auth.credentials.token', {
    get() {
      let headers = {};
      const token = this.get('auth.credentials.token');
      if (token) {
        headers['Authorization'] = `Token token=${token}`;
      }
      return headers;
    }
  })
});

This should fix your issues with auth.

This should fix your auth issues.

[jenweber]

EDIT- removed my comment, ember version was not the issue

[jenweber]

SOLUTION:
We fixed it!!!!!!!! In addition to Matt's steps for deployment and the ajax service, you need to add the host to the adapter, add the put method that Ember uses in your Rails API, and make sure you are using https everywhere that you are using the link (config/environment, ajax service, and the adapter). Stack Overflow that led me to the solution

Below has everything you need to do, I think:

Add a host to your adapter:

import Ember from 'ember';
import ActiveModelAdapter from 'active-model-adapter';
import config from '../config/environment';

export default ActiveModelAdapter.extend({
  auth: Ember.inject.service(),
  host: 'https://earth-wars-api.herokuapp.com',
  headers: Ember.computed('auth.credentials.token', {
    get() {
      let headers = {};
      const token = this.get('auth.credentials.token');
      if (token) {
        headers['Authorization'] = `Token token=${token}`;
      }
      return headers;
    }
  })
});

Add a host to your ajax service:

export default AjaxService.extend({
  auth: Ember.inject.service(),
  host: 'https://earth-wars-api.herokuapp.com',
  headers: Ember.computed('auth.credentials.token', {
    get() {
      let headers = {};
      const token = this.get('auth.credentials.token');
      if (token) {
        headers['Authorization'] = `Token token=${token}`;
      }
      return headers;
    }
  })
});

Follow Matt's Gist instructions to update your config/environment with a host and deploy to gh pages. Don't forget to commit.

And finally, in order for your UPDATE actions to work, add ":put" to the Cors methods in Rails back end, in the config/application.rb file, commit, and push to heroku. Solution by @seatuna

config.middleware.use Rack::Cors do
      allow do
        origins '*'
        resource '*',
                 headers: :any,
                 methods: [:options, :get, :put,
                           :post, :patch, :delete]
      end
    end

[natdjerf]

*In addition to the above: to have the URL stored in only one location, you can store in the config/environment file & import the ENV file on the adapter & ajax files.
https://guides.emberjs.com/v2.0.0/configuring-ember/configuring-your-app/

Config/ environment:

module.exports = function(environment) {
  var ENV = {
    modulePrefix: '<module-name>',
    environment: environment,
    baseURL: '/',
    locationType: 'auto',
    apiHost: 'http://localhost:3000',

Ajax / service & application/adapter

import Ember from 'ember';
import AjaxService from 'ember-ajax/services/ajax';
import ENV from '<module-name>/config/environment';

export default AjaxService.extend({
  host: ENV.apiHost,
  auth: Ember.inject.service(),

[faetea]

I tweaked mine. I am declaring my heroku server host in the production variables still.

config/environment.js

  if (environment === 'production') {
    ENV.API_HOST = 'https://shielded-bayou-70737.herokuapp.com';
    ENV.baseURL = '/';
    ENV.locationType = 'hash';
  }

application adapter

import Ember from 'ember';
import ActiveModelAdapter from 'active-model-adapter';
import ENV from 'ember-imagegallery/config/environment';

export default ActiveModelAdapter.extend({
  auth: Ember.inject.service(),
  host: ENV.API_HOST,
});

ajax service

import Ember from 'ember';
import AjaxService from 'ember-ajax/services/ajax';
import ENV from 'ember-imagegallery/config/environment';

export default AjaxService.extend({
  auth: Ember.inject.service(),
  host: ENV.API_HOST,
});