Skip to content

Commit

Permalink
Update to Webpacker from Webpacker Lite
Browse files Browse the repository at this point in the history
* Uses branch on github for now for Webpacker
* gem "webpacker", git: "https://github.com/shakacode/webpacker.git",
     branch: "issue-464-merge-webpacker-lite-into-webpacker"
  • Loading branch information
justin808 committed Sep 7, 2017
1 parent 514910b commit b36ac23
Show file tree
Hide file tree
Showing 20 changed files with 165 additions and 147 deletions.
22 changes: 21 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,31 @@ Changes since last non-beta release.

*Please add entries here for your pull requests.*

### [9.0.0.beta.1]
- Switch over to using Webpacker

- If using the WebpackConfigLoader, you will need to rename the following object properties:
- hotReloadingUrl devServerUrl
- hotReloadingHostname devServerHost
- hotReloadingPort devServerPort

- Find your webpacker_lite.yml and rename it to webpacker.yml
- Add a section like this under your development env:
```
dev_server:
host: localhost
port: 8080
https: false
# Can be enabled by export WEBPACKER_HMR=TRUE in env
hot: false
```
- remove `hot_reloading_host` and `hot_reloading_enabled_by_default`
- rename `webpack_public_output_dir` to `public_output_path`
### [8.0.7]
#### fixed
- Fixes generator bug by keeping blank line at top in case existing .gitignore does not end in a newline. [#916](https://github.com/shakacode/react_on_rails/pull/916) by [justin808](https://github.com/justin808).

### [8.0.6]
#### fixed
- Fixes server rendering when using a CDN. Server rendering would try to fetch a file with the "asset_host". This change updates the webpacker_lite dependency to 2.1.0 which has a new helper `pack_path`. [#901](https://github.com/shakacode/react_on_rails/pull/901) by [justin808](https://github.com/justin808). Be sure to update webpacker_lite to 2.1.0.
Expand Down
3 changes: 2 additions & 1 deletion Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ gem "chromedriver-helper"
gem "launchy"
gem "poltergeist"
gem "selenium-webdriver"
gem "webpacker_lite", "~> 2.1"
gem "webpacker", git: "https://github.com/shakacode/webpacker.git",
branch: "issue-464-merge-webpacker-lite-into-webpacker"

gem "rainbow"
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpac

## Why Webpack?

Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [webpacker_lite](https://github.com/shakacode/webpacker_lite) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly processing your Webpack output via the Webpack config files.
Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [webpacker](https://github.com/rails/webpacker) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly processing your Webpack output via the Webpack config files.

This usage of webpack fits neatly and simply into existing Rails apps. You can include React components on a Rails view with a simple helper.

Expand Down
2 changes: 1 addition & 1 deletion docs/api/ruby-api-hot-reload-view-helpers.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## NOTE: These helpers are NOT needed if using webpacker_lite
## NOTE: These helpers are NOT needed if using webpacker

## Hot Reloading View Helpers
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](https://github.com/shakacode/react-webpack-rails-tutorial/) for a working example.
Expand Down
2 changes: 1 addition & 1 deletion docs/basics/installation-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ The default path: `public/webpack` can be loaded with webpackConfigLoader as sho
1. You create scripts in `client/package.json` per the example apps. These are used for building your Webpack assets. Also do this for your top level `package.json`.

## Rails Steps (outside of /client)
1. Add `gem "webpacker_lite"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](../../spec/dummy/app/views/layouts/application.html.erb)
1. Add `gem "webpacker"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](../../spec/dummy/app/views/layouts/application.html.erb)
1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [spec/dummy/config/initializers/react_on_rails.rb](../../spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files. For more information on hot reloading, see [Hot Reloading of Assets For Rails Development](../additional-reading/hot-reloading-rails-development.md)
Expand Down
11 changes: 9 additions & 2 deletions lib/generators/react_on_rails/base_generator.rb
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ def create_react_directories
def copy_base_files
base_path = "base/base/"
base_files = %w[app/controllers/hello_world_controller.rb
config/webpacker_lite.yml
config/webpacker.yml
client/.babelrc
client/webpack.config.js
client/REACT_ON_RAILS_CLIENT_README.md]
Expand All @@ -72,7 +72,14 @@ def template_package_json
end

def add_base_gems_to_gemfile
append_to_file("Gemfile", "\ngem 'mini_racer', platforms: :ruby\ngem 'webpacker_lite'\n")
gems = <<-GEMS.strip_heredoc
gem 'mini_racer', platforms: :ruby
gem 'webpacker', git: "https://github.com/shakacode/webpacker.git",
branch: "issue-464-merge-webpacker-lite-into-webpacker"
GEMS
append_to_file("Gemfile",
gems)
end

def append_to_spec_rails_helper
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# Note: Base output directory of /public is assumed for static files
default: &default
# Critical to set compile as false for React on Rails projects
compile: false

development:
<<: *default
# generated files for development, in /public/webpack/development
public_output_path: webpack/development

dev_server:
host: localhost
port: 8080
https: false
# Can be enabled by export WEBPACKER_HMR=TRUE in env
hot: false

test:
<<: *default
# generated files for tests, in /public/webpack/test
public_output_path: webpack/test

production:
<<: *default
# generated files for tests, in /public/webpack/production
public_output_path: webpack/production

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ def initialize(
end

def stale_generated_webpack_files
manifest_needed = ReactOnRails::Utils.using_webpacker_lite? &&
!WebpackerLite::Manifest.exist?
manifest_needed = ReactOnRails::Utils.using_webpacker? &&
!Webpacker::Manifest.exist?

return ["manifest.json"] if manifest_needed

Expand Down
22 changes: 14 additions & 8 deletions lib/react_on_rails/utils.rb
Original file line number Diff line number Diff line change
Expand Up @@ -62,25 +62,31 @@ def self.invoke_and_exit_if_failed(cmd, failure_message)
end

def self.server_bundle_js_file_path
# Don't ever use the hashed file name?
# Cases:
# 1. Using same bundle for both server and client, so server bundle will be hashed
# 2. Using a different bundle (different Webpack config), so file is not hashed
bundle_js_file_path(ReactOnRails.configuration.server_bundle_js_file)
end

# TODO: conturbo Write Test for this, with BOTH webpacker_lite installed and not, and
# with case for webpacker_lite, but server file is not in the file
# TODO: conturbo Write Test for this, with BOTH webpacker installed and not, and
# with case for webpacker, but server file is not in the file
def self.bundle_js_file_path(bundle_name)
# For testing outside of Rails app

if using_webpacker_lite? && WebpackerLite::Manifest.lookup(bundle_name)
# If using webpacker_lite gem
# Per https://github.com/rails/webpacker/issues/571, this path might
public_subdir_hashed_file_name = ActionController::Base.helpers.pack_path(bundle_name)
return File.join("public", public_subdir_hashed_file_name)
if using_webpacker?
# Note, server bundle should not be in the manifest
# If using webpacker gem
# Per https://github.com/rails/webpacker/issues/571
path = Webpacker::Manifest.lookup_path_no_throw(bundle_name)
return path if path.present?
# Else either the file is not in the manifest, so we'll default to the non-hashed name.
end

File.join(ReactOnRails.configuration.generated_assets_dir, bundle_name)
end

def self.using_webpacker_lite?
def self.using_webpacker?
ActionController::Base.helpers.respond_to?(:asset_pack_path)
end

Expand Down
3 changes: 2 additions & 1 deletion spec/dummy/Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ gem "sdoc", group: :doc

gem "react_on_rails", path: "../.."

gem "webpacker_lite", "2.1.0"
gem "webpacker", git: "https://github.com/shakacode/webpacker.git",
branch: "issue-464-merge-webpacker-lite-into-webpacker"

gem "mini_racer"

Expand Down
20 changes: 13 additions & 7 deletions spec/dummy/Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,16 @@ GIT
specs:
equivalent-xml (1.0.0)

GIT
remote: https://github.com/shakacode/webpacker.git
revision: afe9c996b6884fd35d7fc1f3f83078b1df409ff8
branch: issue-464-merge-webpacker-lite-into-webpacker
specs:
webpacker (2.0)
activesupport (>= 4.2)
multi_json (~> 1.2)
railties (>= 4.2)

PATH
remote: ../..
specs:
Expand Down Expand Up @@ -108,7 +118,7 @@ GEM
railties (>= 3.0.0)
globalid (0.4.0)
activesupport (>= 4.2.0)
i18n (0.8.4)
i18n (0.8.6)
interception (0.5)
io-like (0.3.0)
jbuilder (2.6.4)
Expand Down Expand Up @@ -137,7 +147,7 @@ GEM
mini_portile2 (2.2.0)
mini_racer (0.1.9)
libv8 (~> 5.3)
minitest (5.10.2)
minitest (5.10.3)
multi_json (1.12.1)
nio4r (2.1.0)
nokogiri (1.8.0)
Expand Down Expand Up @@ -282,10 +292,6 @@ GEM
uglifier (3.2.0)
execjs (>= 0.3.0, < 3)
unicode-display_width (1.2.1)
webpacker_lite (2.1.0)
activesupport (>= 4.2)
multi_json (~> 1.2)
railties (>= 4.2)
websocket (1.2.4)
websocket-driver (0.6.5)
websocket-extensions (>= 0.1.0)
Expand Down Expand Up @@ -333,7 +339,7 @@ DEPENDENCIES
sqlite3
turbolinks (~> 5.0)
uglifier
webpacker_lite (= 2.1.0)
webpacker!

BUNDLED WITH
1.15.3
8 changes: 4 additions & 4 deletions spec/dummy/client/server-rails-hot.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ const webpackConfig = require('./webpack.client.rails.hot.config');

const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
const configPath = resolve('..', 'config');
const { hotReloadingUrl, hotReloadingPort, hotReloadingHostname } = webpackConfigLoader(configPath);
const { devServerUrl, devServerPort, devServerHostname } = webpackConfigLoader(configPath);

const compiler = webpack(webpackConfig);

const devServer = new WebpackDevServer(compiler, {
proxy: {
'*': hotReloadingUrl,
'*': devServerUrl,
},
headers: {
'Access-Control-Allow-Origin': '*',
Expand All @@ -48,9 +48,9 @@ const devServer = new WebpackDevServer(compiler, {
},
});

devServer.listen(hotReloadingPort, hotReloadingHostname, err => {
devServer.listen(devServerPort, devServerHostname, err => {
if (err) console.error(err);
console.log(
`=> 🔥 Webpack development server is running on ${hotReloadingUrl}`
`=> 🔥 Webpack development server is running on ${devServerUrl}`
);
});
6 changes: 3 additions & 3 deletions spec/dummy/client/webpack.client.rails.hot.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const merge = require('webpack-merge');
const config = require('./webpack.client.base.config');
const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
const configPath = resolve('..', 'config');
const { hotReloadingUrl, webpackOutputPath } = webpackConfigLoader(configPath);
const { devServerUrl, webpackOutputPath } = webpackConfigLoader(configPath);

// entry is prepended because 'react-hot-loader/patch' must be the very first entry
// for hot reloading to work.
Expand All @@ -27,15 +27,15 @@ module.exports = merge.strategy(
entry: {
'app-bundle': [
'react-hot-loader/patch',
`webpack-dev-server/client?${hotReloadingUrl}`,
`webpack-dev-server/client?${devServerUrl}`,
'webpack/hot/only-dev-server'
],
},

output: {
filename: '[name].js',
path: webpackOutputPath,
publicPath: `${hotReloadingUrl}/`,
publicPath: `${devServerUrl}/`,
},

module: {
Expand Down
2 changes: 1 addition & 1 deletion spec/dummy/config/initializers/react_on_rails.rb
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ def self.custom_context(view_context)
config.generated_assets_dir = File.join(%w[public webpack], Rails.env)

# Define the files we need to check for webpack compilation when running tests.
config.webpack_generated_files = %w[app-bundle.js vendor-bundle.js server-bundle.js]
config.webpack_generated_files = %w[manifest.json]

# This is the file used for server rendering of React when using `(prerender: true)`
# If you are never using server rendering, you may set this to "".
Expand Down
26 changes: 26 additions & 0 deletions spec/dummy/config/webpacker.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# Note: Base output directory of /public is assumed for static files
default: &default
# Critical to set compile as false for React on Rails projects
compile: false

development:
<<: *default
# generated files for development, in /public/webpack/development
public_output_path: webpack/development

dev_server:
host: localhost
port: 8080
https: false
# Can be enabled by export WEBPACKER_HMR=TRUE in env
hot: false

test:
<<: *default
# generated files for tests, in /public/webpack/test
public_output_path: webpack/test

production:
<<: *default
# generated files for tests, in /public/webpack/production
public_output_path: webpack/production
27 changes: 0 additions & 27 deletions spec/dummy/config/webpacker_lite.yml

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
client/.babelrc
client/package.json
config/initializers/react_on_rails.rb
config/webpacker_lite.yml
config/webpacker.yml
package.json
Procfile.dev].each { |file| assert_file(file) }
end
Expand Down
Loading

0 comments on commit b36ac23

Please sign in to comment.