Using ember-cli as a component in a Rails app

Ember CLI
1

I have an existing Rails app, and I’d like to add an Ember app as a component of it. I grabbed ember-cli and init’d an app in a subdir of the Rails app, then tried to set everything up so the Rails view would do everything the generated index.html did. Most of it was easy:

-# app/views/kepler/index.html.haml
- content_for :stylesheets do
  = stylesheet_link_tag "http://kepler.tycho.dev/assets/vendor.css"
  = stylesheet_link_tag "http://kepler.tycho.dev/assets/kepler.css"

- content_for :javascript do
  = javascript_include_tag "http://kepler.tycho.dev/assets/env.js"
  = javascript_include_tag "http://kepler.tycho.dev/assets/vendor.js"
  = javascript_include_tag "http://kepler.tycho.dev/assets/kepler.js"
  :javascript
    window.KeplerApp = require('frontend/app')['default'].create(KeplerENV.APP);

The issue that I’ve run into is pulling in that ENV. The generated index.html has a {{ENV}} that gets replaced with content from the ember-cli EmberApp Broccoli tree generator.

I’ve made a env.js for Rails to load:

// env.js
window.KeplerENV = @@ENV;
window.EmberENV = window.KeplerENV.EmberENV;

I’ve modified my Brocfile.js to be able to replace that with the JsonEnv from the EmberApp:

// Brocfile.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var replace = require('broccoli-replace');
var mergeTrees = require('broccoli-merge-trees');

var app = new EmberApp();

var envjs = replace('config', {
  files: [ "env.js" ],
  patterns: [
    {
      match: "ENV",
      replacement: JSON.stringify(app.options.getEnvJSON(app.env))
    }
  ]
});

// module.exports = app.toTree();
module.exports = mergeTrees([app.toTree(), envjs]);

When I set the “source” of that replace directive to “config” and put my env.js in “config/env.js”, running ember build works great, and I end up with a dist/env.js that looks exactly like I expect. When I run ember server, however, when the Rails app tries to pull in assets/env.js, it 404s.

When I move it to app/env.js and set the source dir in the Brocfile, then ember build complains that the @@ in the replace string is a syntax error, I guess because the EmberApp#toTree() sees the env.js as a file its supposed to compile.

Build failed.
Line 1: Unexpected token ILLEGAL
File: frontend/env.js
Error: Line 1: Unexpected token ILLEGAL

If fairly new to the wild world of javascript packaging frameworks, so whats the best way to get around this? Is there a way to make ember-cli EmberApp ignore that file? Or is there a place I can put it that ember server will still be able to see and serve it?