asset configuration and heroku deploy

[janbiedermann]

Example for using Sprockets and Webpacker together

config/initializers/hyperloop.rb

Hyperloop.configuration do |config|
  config.transport = :action_cable
  config.prerendering = :on

  config.cancel_import "react"
  config.cancel_import "react_ujs"
  config.cancel_import "react/react-source-browser"
  config.cancel_import "react/react-source-server"
  config.prerendering_files = ["react-server.js", "react_ujs.js", "client_and_server.js", "hyperloop-prerender-loader.js"]
  config.import "reactrb/auto-import"
end

// => application.js
//= require react
//= require react_ujs
//= require hyperloop-loader

// => config/webpack/custom.js
module.exports = {
  externals: {
    "jquery": "jQuery",
    "react": "React"
  }
};

// => app/javascript/packs/client_only.js
// frontend requires like jQuery

// => app/javascript/packs/client_and_server.js
React = require('react');
// and other components...
RM = require("react-materialize");

# => layout
<%= javascript_include_tag "application" %>
<%= javascript_pack_tag "client_only" %>
<%= javascript_pack_tag "client_and_server" %>

Getting React with Sprockets

reactjs/react-rails#715
get react in the correct version for each environment:

# config/environments/development.rb
MyApp::Application.configure do
  config.react.variant = :development
end

# config/environments/production.rb
MyApp::Application.configure do
  config.react.variant = :production
end

With ActionCable

cable.js must be loaded before hyperloop-loader!

JQuery support

Hyperloop offers some support code for integrating opal-jquery. To activate this code, opal jquery must be required on the client side before hyperloop-loader or hyper-component, example for using app/assets/application.rb: <- .rb

require 'jquery'
require 'opal-jquery'
require 'hyperloop-loader'

if using app/assets/application.js: <- .js

//= require 'jquery'
//= require 'opal-jquery'
Opal.load('opal-jquery');
//= require 'hyperloop-loader'

In General

minification with uglifier, in config/environments/production.rb:

  config.assets.js_compressor = Uglifier.new(
    :harmony => true
  )

For Heroku

something like:

# assets.rb
Rails.application.config.assets.configure do |env|
    env.cache = Sprockets::Cache::MemoryStore.new(40000)
end

this might be helpful:
https://help.heroku.com/18PI5RSY/how-do-i-clear-the-build-cache
also:

• rails assets:clobber
• rake tmp:clear

For Development

because of problems with sprockets cache design and FileStore a MemoryStore cache is recommended, just like for heroku above, maybe larger in size.

Possible Errors:

"#<ExecJS::ProgramError: TypeError: Cannot read property 'serverRender' of undefined>" when prerendering:
cause: react_ujs missing or imported to late

[mpantel]

Getting React with Sprockets:
setting config.react.variant to :production or :development explicitly is not necessary because that is the default behaviour for react-rails: https://github.com/reactjs/react-rails/blob/ec7124148bb82023a111ee801f3d4b52a7bab4bb/lib/react/rails/railtie.rb#L8

[mpantel]

When on webpacker, lap28 edge:
i had to set:
config.assets.compile = true in config/environments/production.rb

no need for:
<%= javascript_pack_tag "client_only" %>
<%= javascript_pack_tag "client_and_server" %>
in app/views/layout/application.html.erb

also no need for:

config/webpack/custom.js

i think that many of those are now handled from hyperloop/config and autoconfig

i can also deploy with capistrano and get react production variant!