diff --git a/Gemfile b/Gemfile index 248171680..09b3b8eff 100644 --- a/Gemfile +++ b/Gemfile @@ -67,7 +67,7 @@ gem 'sprockets-rails', '~> 3.2', require: 'sprockets/railtie' gem 'statsd-instrument', '~> 2.1' gem 'twitter-text', '~> 1.14' gem 'tzinfo-data', '~> 1.2017' -gem 'webpacker', '~> 2.0' +gem 'webpacker', '~> 3.0' gem 'webpush' gem 'json-ld-preloaded', '~> 2.2.1' diff --git a/Gemfile.lock b/Gemfile.lock index 89ee34cb6..73419fd28 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -335,6 +335,8 @@ GEM rack-cors (0.4.1) rack-protection (2.0.0) rack + rack-proxy (0.6.2) + rack rack-test (0.7.0) rack (>= 1.0, < 3) rack-timeout (0.4.2) @@ -510,9 +512,9 @@ GEM addressable (>= 2.3.6) crack (>= 0.3.2) hashdiff - webpacker (2.0) + webpacker (3.0.1) activesupport (>= 4.2) - multi_json (~> 1.2) + rack-proxy (>= 0.6.1) railties (>= 4.2) webpush (0.3.2) hkdf (~> 0.2) @@ -621,7 +623,7 @@ DEPENDENCIES tzinfo-data (~> 1.2017) uglifier (~> 3.2) webmock (~> 3.0) - webpacker (~> 2.0) + webpacker (~> 3.0) webpush RUBY VERSION diff --git a/Procfile.dev b/Procfile.dev index 9084b4263..e75a491c7 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,4 +1,4 @@ web: PORT=3000 bundle exec puma -C config/puma.rb sidekiq: PORT=3000 bundle exec sidekiq stream: PORT=4000 yarn run start -webpack: ./bin/webpack-dev-server --host 0.0.0.0 +webpack: ./bin/webpack-dev-server --listen-host 0.0.0.0 diff --git a/bin/webpack b/bin/webpack index 867550eb8..528233a78 100755 --- a/bin/webpack +++ b/bin/webpack @@ -2,7 +2,6 @@ $stdout.sync = true require "shellwords" -require "yaml" ENV["RAILS_ENV"] ||= "development" RAILS_ENV = ENV["RAILS_ENV"] @@ -20,9 +19,9 @@ unless File.exist?(WEBPACK_CONFIG) exit! end -newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape } -cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV +env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape } +cmd = [ "#{NODE_MODULES_PATH}/.bin/webpack", "--config", WEBPACK_CONFIG ] + ARGV Dir.chdir(APP_PATH) do - exec newenv, *cmdline + exec env, *cmd end diff --git a/bin/webpack-dev-server b/bin/webpack-dev-server index 0beec3175..c9672f663 100755 --- a/bin/webpack-dev-server +++ b/bin/webpack-dev-server @@ -3,6 +3,7 @@ $stdout.sync = true require "shellwords" require "yaml" +require "socket" ENV["RAILS_ENV"] ||= "development" RAILS_ENV = ENV["RAILS_ENV"] @@ -13,7 +14,9 @@ NODE_ENV = ENV["NODE_ENV"] APP_PATH = File.expand_path("../", __dir__) CONFIG_FILE = File.join(APP_PATH, "config/webpacker.yml") NODE_MODULES_PATH = File.join(APP_PATH, "node_modules") -WEBPACK_CONFIG = File.join(APP_PATH, "config/webpack/development.js") +WEBPACK_CONFIG = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js") + +DEFAULT_LISTEN_HOST_ADDR = NODE_ENV == 'development' ? 'localhost' : '0.0.0.0' def args(key) index = ARGV.index(key) @@ -21,23 +24,45 @@ def args(key) end begin - dev_server = YAML.load_file(CONFIG_FILE)["development"]["dev_server"] + dev_server = YAML.load_file(CONFIG_FILE)[RAILS_ENV]["dev_server"] - DEV_SERVER_HOST = "http#{"s" if args('--https') || dev_server["https"]}://#{dev_server["host"]}:#{args('--port') || dev_server["port"]}" + HOSTNAME = args('--host') || dev_server["host"] + PORT = args('--port') || dev_server["port"] + HTTPS = ARGV.include?('--https') || dev_server["https"] + DEV_SERVER_ADDR = "http#{"s" if HTTPS}://#{HOSTNAME}:#{PORT}" + LISTEN_HOST_ADDR = args('--listen-host') || DEFAULT_LISTEN_HOST_ADDR rescue Errno::ENOENT, NoMethodError - puts "Webpack dev_server configuration not found in #{CONFIG_FILE}." - puts "Please run bundle exec rails webpacker:install to install webpacker" + $stdout.puts "Webpack dev_server configuration not found in #{CONFIG_FILE}." + $stdout.puts "Please run bundle exec rails webpacker:install to install webpacker" exit! end -newenv = { - "NODE_PATH" => NODE_MODULES_PATH.shellescape, - "ASSET_HOST" => DEV_SERVER_HOST.shellescape -}.freeze +begin + server = TCPServer.new(LISTEN_HOST_ADDR, PORT) + server.close -cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV +rescue Errno::EADDRINUSE + $stdout.puts "Another program is running on port #{PORT}. Set a new port in #{CONFIG_FILE} for dev_server" + exit! +end + +# Delete supplied host, port and listen-host CLI arguments +["--host", "--port", "--listen-host"].each do |arg| + ARGV.delete(args(arg)) + ARGV.delete(arg) +end + +env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape } + +cmd = [ + "#{NODE_MODULES_PATH}/.bin/webpack-dev-server", "--progress", "--color", + "--config", WEBPACK_CONFIG, + "--host", LISTEN_HOST_ADDR, + "--public", "#{HOSTNAME}:#{PORT}", + "--port", PORT.to_s +] + ARGV Dir.chdir(APP_PATH) do - exec newenv, *cmdline + exec env, *cmd end diff --git a/config/webpacker.yml b/config/webpacker.yml index aa429a1dd..8d8470651 100644 --- a/config/webpacker.yml +++ b/config/webpacker.yml @@ -4,6 +4,15 @@ default: &default source_path: app/javascript source_entry_path: packs public_output_path: packs + cache_path: tmp/cache/webpacker + + # Additional paths webpack should lookup modules + # ['app/assets', 'engine/foo/app/assets'] + resolved_paths: [] + + # Reload manifest.json on all requests so we reload latest compiled packs + cache_manifest: false + extensions: - .js - .sass @@ -17,16 +26,25 @@ default: &default development: <<: *default + compile: true dev_server: - host: 127.0.0.1 - port: 8080 + host: localhost + port: 3035 + hmr: false https: false test: <<: *default + # Compile test packs to a separate directory public_output_path: packs-test production: <<: *default + + # Production depends on precompilation of packs prior to booting for performance. + compile: false + + # Cache manifest.json for performance + cache_manifest: true diff --git a/lib/tasks/assets.rake b/lib/tasks/assets.rake index 92d5aea80..44896afc7 100644 --- a/lib/tasks/assets.rake +++ b/lib/tasks/assets.rake @@ -16,7 +16,7 @@ end if Rake::Task.task_defined?('assets:precompile') Rake::Task['assets:precompile'].enhance do - Webpacker::Manifest.load + Webpacker.manifest.refresh Rake::Task['assets:generate_static_pages'].invoke end end