jwhitley / requirejs-rails

RequireJS support for your Rails 3 or 4 application
MIT License
592 stars 201 forks source link

Backbone app not initializing on production #160

Closed kevincolten closed 10 years ago

kevincolten commented 10 years ago

I have a Backbone (1.1.0) on Rails (4.1.0) app using RequireJS (requirejs-rails gem) that works fine on my local machine. But when I precompile assets and run the server, the app, having been compiled/compressed by r.js, does not start. No errors are thrown anywhere. Here are some snippets:

requirejs.yml

paths:
    jquery: "jquery/jquery"
    underscore: "underscore/underscore"
    backbone: "backbone/backbone"
    "jquery-mobile": "jquery-mobile-bower/js/jquery.mobile-1.4.2.min"
    tpl: "requirejs-tpl/tpl"
    "backbone-query-parameters": "backbone-query-parameters/backbone.queryparams"
    serializeJSON: "jquery.serializeJSON/jquery.serializejson"
    "jqm-config": "jqm-config"
    fastclick: "fastclick/lib/fastclick"

shim:
    "backbone-query-parameters":
        deps: ['backbone']
    'jqm-config':
        deps: ["jquery-mobile"]
    'jquery-mobile':
        deps: ["jquery"]

modules:
  - name: 'application' # default

tpl:
    extension: '.html' # default

application.js

define(["backbone", "./router", "jquery-mobile", "jqm-config", "fastclick"],
function(Backbone, Router) {

var BackboneApp = {

    start: function() {
        this.router = new Router();
        Backbone.history.start();
    }
};

return BackboneApp.start();
})

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <%= stylesheet_link_tag "application", :media => "all" %>
  <%= csrf_meta_tags %>
</head>
<body>
    hello
    <%= yield %>
<%= requirejs_include_tag "application" %>
</body>
</html>

Here's my Heroku Logs (don't mind the gaps):

18:57 $ RAILS_ENV=production rails server
=> Booting WEBrick
=> Rails 4.1.0 application starting in production on http://0.0.0.0:3000
=> Run `rails server -h` for more startup options
=> Notice: server is listening on all interfaces (0.0.0.0). Consider using 127.0.0.1 (--binding option)
=> Ctrl-C to shutdown server
[2014-05-06 19:04:01] INFO  WEBrick 1.3.1
[2014-05-06 19:04:01] INFO  ruby 2.1.1 (2014-02-24) [x86_64-darwin12.0]
[2014-05-06 19:04:01] INFO  WEBrick::HTTPServer#start: pid=60796 port=3000
Started GET "/" for 127.0.0.1 at 2014-05-06 19:04:03 -0500
Processing by MainController#index as HTML
  Rendered main/index.html.erb within layouts/application (1.4ms)
Completed 200 OK in 16ms (Views: 13.3ms | ActiveRecord: 0.0ms)

and just to clear up any confusion, here's the html that loads:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="/assets/application-34af7785e9260ce67d287c5a05fc3583.css" media="all" rel="stylesheet" />
  <meta content="authenticity_token" name="csrf-param" />
  <meta content="MjhW2IjblGRfvIsAq/hphJT/WlFckUsQ/jSv8skdysk=" name="csrf-token" />
</head>
<body>
  hello

   <script>var require = {"baseUrl":"/assets","paths":{"application":"/assets/application-4d1052c11b8765cc7707a5f8643e33bf"},"priority":["application"],"shim":{"backbone-query-parameters":{"deps":["backbone"]},"jqm-config":{"deps":["jquery-mobile"]},"backbone":{"deps":["underscore","jquery"],"exports":"Backbone"}}};</script>
   <script data-main="application-4d1052c11b8765cc7707a5f8643e33bf" src="/assets/require-e48b9057622ee54d9d9b4dd773d4f295.js"></script>

</body>
</html>

I am guessing that the mistake is in either how I initialize my app in application.js or in the config in requirejs.yml, but I just can't solve it.

I also asked this on StackOverflow here

kevincolten commented 10 years ago

Solved in issue 70. Used a require call instead of a define call in my top-level javascript (application.js)