Repository navigation
asset configuration and heroku deploy #12
Description
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
Activity
mpantel commentedon Aug 22, 2018
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 commentedon Aug 28, 2018
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!