Server side proxy for divshot not rendering JSON api in Ember app

Question

I can start my ember/rails server by running ember serve --proxy http://localhost:3000.

I have create a divshot account in order to push this app to a production server but am having trouble passing in the url to my json api.

//divshot.json
{
  "name": "project-name",
  "root": "./dist",
  "routes": {
    "/tests": "tests/index.html",
    "/tests/**": "tests/index.html",
    "/**": "index.html"
  },
  "proxy": {
    "origin": "https://railsapi.herokuapp.com/"
  }
}

//environment.js
/* jshint node: true */

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'project-name',
    environment: environment,
    baseURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      }
    },

    APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
    }
  };

  if (environment === 'development') {
    // ENV.APP.LOG_RESOLVER = true;
    // ENV.APP.LOG_ACTIVE_GENERATION = true;
    // ENV.APP.LOG_TRANSITIONS = true;
    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
    // ENV.APP.LOG_VIEW_LOOKUPS = true;
  }

  if (environment === 'test') {
    // Testem prefers this...
    ENV.baseURL = '/';
    ENV.locationType = 'none';

    // keep test console output quieter
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;

    ENV.APP.rootElement = '#ember-testing';
  }

  if (environment === 'production') {

  }

  return ENV;
};

How can I push an app to divshot and use the api I have hosted elsewhere?

ember-cli 1.8.1 - link to project in question

Answer 1

I totally didn’t realise Divshot had this service. Awesome.

Looking at the docs, it seems you need to put the proxy under a named key.

In their example it’s "api":

{
  "proxy": {
    "api": {
      "origin":"https://api.my-app.com",
      "headers": {
        "Accept": "application/json"
      },
      "cookies": false,
      "timeout": 30
    }
  }
}

And access it via a special URL of the form /__/proxy/{NAME}/{PATH}:

$.ajax({
  url: '/__/proxy/api/users/123',
  type: 'POST',
  dataType: 'json',
  success: function(data) {
    // ...
  }
})

---

EDIT:

I left out the actual configuration of your Ember app.

You’ll want to setup API prefix in config/environment.js.

Working locally in development the prefix will be '' and on Divshot it will be /__/proxy/api.

In config/environment.js I like to do this:

module.exports = function(environment) {
  // Snip...

  ENV.API_PREFIX: process.env.API_PREFIX || '',
};

You can then use this value in app/adapters/application.js like this:

import DS from 'ember-data';
import config from '../config/environment';

export default DS.ActiveModelAdapter.extend({
  host: config.apiUrl
});

And specify API_PREFIX on the command line like this:

$ API_PREFIX="/__/proxy/api" ember build
$ divshot push

---

Hope that helps!