Ember, Rails 4, Heroku, asset pipeline, rootElement


#1

I have an issue I am not sure how to solve.

I am trying to deploy a rails 4 app with ember to heroku. I am using the 12factor gem.

But the wrinkle is that I only want to selectively include the ember code on a specific route and page of my rails application. All other pages should just be normal rails an have no knowledge of the ember app.

In development I was using rootElement to attach my ember to a specific div element and then in a very specific view I was doing this

javascript_include_tag “ember/my_ember_app”

The problem now is that because everything is precompiled it seems that I can’t use this approach when deploying to heroku. Basically the ember code does not get compiled with the rest of application js file. But returns 404 when on heroku.

Anybody know a work around? I don’t wan’t my entire application to be a single page application. Just a specific route.


#2

If I got this correctly your problem is that all the javascript is compiled into one file and you would want to be able to require the ember app separately…

in this case you need a separate assets manifest for the ember app so rails know that it has to produce different js files

see http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives

also, I just found this nice introduction http://coderberry.me/blog/2012/04/24/asset-pipeline-for-dummies/

hope this helps!


#3

Figured out a solution that work for this.

In your rails production.rb file include a line that looks like this

config.assets.precompile += %w( my_ember_app.js )

Create a separate file in your assets javascripts folder

my_ember_app.js

It will look roughly something like this (included whatever dependencies specific to ember here. It is assumed that jquery and the other higher level dependencies are already included in application.js)

// A separate manifest for just the ember js app

//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require ./app_name

AppName = Ember.Application.create({
  rootElement: '#my_app_container'  
});

//= require_tree .

Create a separate route in rails to “contain” the ember application. Perhaps

app/views/my_ember_app/index.html.erb

Inside that file create a container div to attach the ember application too and include the ember specific javascript.

<noscript>
 For full functionality of this site it is necessary to enable JavaScript.
 Here are the <a href="http://www.enable-javascript.com/" target="_blank">
 instructions how to enable JavaScript in your web browser</a>.
</noscript>

<div id="my_app_container"></div>
<%= javascript_include_tag "my_ember_app" %>

Note that at runtime ember with inject a class name into this div and inject all its view content inside that tag. E.G.

<div id="my_app_container" class="ember-application">
... various views and metamorph tags with ember identifiers e.g. ember123
</div>

Deploy to heroku. It make take awhile for the compilation step to complete so let the git push run for awhile.


#4

Thanks for the links @ghedamat. I figured it out just had to create a separate manifest and precompile that manifest as a separate thing.


#5

This topic was automatically closed after 3 days. New replies are no longer allowed.