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.
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
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.