diff --git a/Procfile.dev b/Procfile.dev
index ba917b7c6..18d7c1e49 100644
--- a/Procfile.dev
+++ b/Procfile.dev
@@ -1,3 +1,3 @@
 web: bin/rails s -p 3000 -b 0.0.0.0
-webpacker: ./bin/webpack-dev-server --listen-host 0.0.0.0 --host 0.0.0.0
+webpacker: ./bin/webpack-dev-server
 sidekiq: bundle exec sidekiq
diff --git a/config/initializers/0_application_config.rb b/config/initializers/0_application_config.rb
index f577dd526..a265973ba 100644
--- a/config/initializers/0_application_config.rb
+++ b/config/initializers/0_application_config.rb
@@ -1,7 +1,15 @@
 ENVied.require(*ENV["ENVIED_GROUPS"] || Rails.groups)
 
 class ApplicationConfig
+  URI_REGEXP = %r{(?<scheme>https?://)?(?<host>.+?)(?<port>:\d+)?$}.freeze
+
   def self.[](key)
     ENVied.send(key)
   end
+
+  def self.app_domain_no_port
+    app_domain = self["APP_DOMAIN"]
+    match = app_domain.match(URI_REGEXP)
+    match[:host]
+  end
 end
diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb
index b7901328a..2b3f7e09c 100644
--- a/config/initializers/content_security_policy.rb
+++ b/config/initializers/content_security_policy.rb
@@ -16,7 +16,11 @@ Rails.application.config.content_security_policy do |policy|
   #   # policy.report_uri "/csp-violation-report-endpoint"
 
   # allow webpack-dev-server host as allowed origin for connect-src
-  policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
+  if Rails.env.development?
+    webpack_host = "#{ApplicationConfig.app_domain_no_port}:3035"
+    policy.connect_src :self, :https,
+                       "http://#{webpack_host}", "ws://#{webpack_host}"
+  end
 end
 
 # If you are using UJS then enable automatic nonce generation
diff --git a/config/webpacker.yml b/config/webpacker.yml
index 5becf2537..383729bba 100644
--- a/config/webpacker.yml
+++ b/config/webpacker.yml
@@ -56,9 +56,9 @@ development:
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
-    host: localhost
+    host: 0.0.0.0
     port: 3035
-    public: localhost:3035
+    public: 0.0.0.0:3035
     hmr: false
     # Inline should be set to true if using HMR
     inline: true
diff --git a/spec/initializers/application_config_spec.rb b/spec/initializers/application_config_spec.rb
new file mode 100644
index 000000000..ad0ac8f3f
--- /dev/null
+++ b/spec/initializers/application_config_spec.rb
@@ -0,0 +1,39 @@
+require "rails_helper"
+
+describe ApplicationConfig do
+  describe ".app_domain_no_port" do
+    it "handles plain subdomain only name" do
+      setup_app_domain("renner")
+
+      expect(described_class.app_domain_no_port).to eq "renner"
+    end
+
+    it "handles plain domain name" do
+      setup_app_domain("renner.ngrok.io")
+
+      expect(described_class.app_domain_no_port).to eq "renner.ngrok.io"
+    end
+
+    it "handles domain with port" do
+      setup_app_domain("renner:3000")
+
+      expect(described_class.app_domain_no_port).to eq "renner"
+    end
+
+    it "handles domain with schema and port" do
+      setup_app_domain("http://renner:4000")
+
+      expect(described_class.app_domain_no_port).to eq "renner"
+    end
+
+    private
+
+    def setup_app_domain(app_domain)
+      # No #and_return for #have_received.
+      # rubocop:disable RSpec/MessageSpies
+      expect(ApplicationConfig).to receive(:[]).with("APP_DOMAIN").
+        and_return(app_domain)
+      # rubocop:enable RSpec/MessageSpies
+    end
+  end
+end