add rack middleware to proxy webpack dev server

Gemfile

@@ -312,6 +312,8 @@ group :development, :test do
   gem 'activerecord_sane_schema_dumper', '0.2'
 
   gem 'stackprof', '~> 0.2.10'
+
+  gem 'rack-proxy', '~> 0.6.0'
 end
 
 group :test do

Gemfile.lock

@@ -544,6 +544,8 @@ GEM
       rack (>= 1.1)
     rack-protection (1.5.3)
       rack
+    rack-proxy (0.6.0)
+      rack
     rack-test (0.6.3)
       rack (>= 1.0)
     rails (4.2.7.1)
@@ -943,6 +945,7 @@ DEPENDENCIES
   rack-attack (~> 4.4.1)
   rack-cors (~> 0.4.0)
   rack-oauth2 (~> 1.2.1)
+  rack-proxy (~> 0.6.0)
   rails (= 4.2.7.1)
   rails-deprecated_sanitizer (~> 1.0.3)
   rainbow (~> 2.1.0)

config/application.rb

@@ -84,6 +84,8 @@ module Gitlab
     config.webpack.config_file = "config/webpack.config.js"
     config.webpack.output_dir  = "public/assets/webpack"
     config.webpack.public_path = "assets/webpack"
+
+    # Webpack dev server configuration is handled in initializers/static_files.rb
     config.webpack.dev_server.enabled = false
 
     # Enable the asset pipeline

config/gitlab.yml.example

@@ -505,6 +505,16 @@ production: &base
     # Git timeout to read a commit, in seconds
     timeout: 10
 
+  ## Webpack settings
+  # If enabled, this will tell rails to serve frontend assets from the webpack-dev-server running
+  # on a given port instead of serving directly from /assets/webpack. This is only indended for use
+  # in development.
+  webpack:
+    # dev_server:
+    #   enabled: true
+    #   host: localhost
+    #   port: 3808
+
   #
   # 5. Extra customization
   # ==========================

config/initializers/1_settings.rb

@@ -409,6 +409,15 @@ Settings.rack_attack.git_basic_auth['bantime'] ||= 1.hour
 Settings['gitaly'] ||= Settingslogic.new({})
 Settings.gitaly['socket_path'] ||= ENV['GITALY_SOCKET_PATH']
 
+#
+# Webpack settings
+#
+Settings['webpack'] ||= Settingslogic.new({})
+Settings.webpack['dev_server'] ||= Settingslogic.new({})
+Settings.webpack.dev_server['enabled'] ||= false
+Settings.webpack.dev_server['host']    ||= 'localhost'
+Settings.webpack.dev_server['port']    ||= 3808
+
 #
 # Testing settings
 #

config/initializers/static_files.rb

@@ -12,4 +12,25 @@ if app.config.serve_static_files
     app.paths["public"].first, 
     app.config.static_cache_control
   )
+
+  # If webpack-dev-server is configured, proxy webpack's public directory
+  # instead of looking for static assets
+  if Gitlab.config.webpack.dev_server.enabled
+    app.config.webpack.dev_server.merge!(
+      enabled: true,
+      host: Gitlab.config.gitlab.host,
+      port: Gitlab.config.gitlab.port,
+      https: Gitlab.config.gitlab.https,
+      manifest_host: Gitlab.config.webpack.dev_server.host,
+      manifest_port: Gitlab.config.webpack.dev_server.port,
+    )
+
+    app.config.middleware.insert_before(
+      Gitlab::Middleware::Static,
+      Gitlab::Middleware::WebpackProxy,
+      proxy_path: app.config.webpack.public_path,
+      proxy_host: Gitlab.config.webpack.dev_server.host,
+      proxy_port: Gitlab.config.webpack.dev_server.port,
+    )
+  end
 end

lib/gitlab/middleware/webpack_proxy.rb

+# This Rack middleware is intended to proxy the webpack assets directory to the
+# webpack-dev-server.  It is only intended for use in development.
+
+module Gitlab
+  module Middleware
+    class WebpackProxy < Rack::Proxy
+      def initialize(app = nil, opts = {})
+        @proxy_host = opts.fetch(:proxy_host, 'localhost')
+        @proxy_port = opts.fetch(:proxy_port, 3808)
+        @proxy_path = opts[:proxy_path] if opts[:proxy_path]
+        super(app, opts)
+      end
+
+      def perform_request(env)
+        unless @proxy_path && env['PATH_INFO'].start_with?("/#{@proxy_path}")
+          return @app.call(env)
+        end
+
+        env['HTTP_HOST'] = "#{@proxy_host}:#{@proxy_port}"
+        super(env)
+      end
+    end
+  end
+end