The env_javascript_include_tag
and env_stylesheet_link_tag
support the usage of a webpack dev server for providing the JS and CSS assets during development mode. See the shakacode/react-webpack-rails-tutorial for a working example.
The key options are static
and hot
which specify what you want for static vs. hot. Both of these params are optional, and support either a single value, or an array.
static vs. hot is picked based on whether ENV["REACT_ON_RAILS_ENV"] == "HOT"
<%= env_stylesheet_link_tag(static: 'application_static',
hot: 'application_non_webpack',
media: 'all',
'data-turbolinks-track' => true) %>
<!-- These do not use turbolinks, so no data-turbolinks-track -->
<!-- This is to load the hot assets. -->
<!-- Note, you can have multiple files here. It's an array. -->
<%= env_javascript_include_tag(hot: ['http://localhost:3500/webpack-bundle.js]') %>
<!-- These do use turbolinks -->
<%= env_javascript_include_tag(static: 'application_static',
hot: 'application_non_webpack',
'data-turbolinks-track' => true) %>
See application.html.erb for usage example and application.html.erb
Helper to set CSS and JS assets depending on if we want static or "hot", which means from the Webpack dev server.
In this example, application_non_webpack
is simply a CSS asset pipeline file which includes styles not placed in the webpack build. The same can be said for application_non_webpack
for JS files. Note, the suffix is not used in the helper calls.
We don't need styles from the webpack build, as those will come via the JavaScript include tags.
The key options are static
and hot
which specify what you want for static vs. hot. Both of
these params are optional, and support either a single value, or an array.
<%= env_stylesheet_link_tag(static: 'application_static',
hot: 'application_non_webpack',
media: 'all',
'data-turbolinks-track' => true) %>