rails + webpacker + webpack-dev-server + vue + remote dev vps and nginx

notes.md

Process goes something like this:

bundle update webpacker
rails webpacker:binstubs
yarn upgrade @rails/webpacker@4.0.0-pre.2 # or 'add' instead of upgrade
yarn upgrade webpack-dev-server@"'3.1.4'  # or 'add' instead of upgrade
yarn add webpack-cli

bundle exec rails webpacker:install # don't do this! the scrpit seems to overwrite the @rails/webpacker version to 3.5.3

Contents of files in result:

# gemfile
gem 'webpacker', github: 'rails/webpacker', branch: 'master'
# or gem 'webpacker', '>= 4.0.x' # since we don't always know what 'master' will be on

# gemfile.lock
GIT
  remote: https://github.com/rails/webpacker.git
  revision: 191099e682b7c0d8a64effd14f31e9ee7423eb27
  branch: master
  specs:
    webpacker (4.0.0.pre.pre.2)

# config/initializers/content_security_policy.rb
# maybe both of these needed?
policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" # for webpack-dev-server
policy.connect_src :self, :https, "http://REMOTE_URL_HERE", "ws://REMOTE_URL_HERE" # for webpack-dev-server

// config/webpack/loaders/vue.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')

environment.plugins.append('VueLoaderPlugin',
  new VueLoaderPlugin()
);

# config/webpacker.yml
   dev_server:
     https: false
     host: '0.0.0.0'
     port: 3035
     #hot: true
     public: REMOTE_URL_HERE
     hmr: false
     hot: false
     #poll: true
     # Inline should be set to true if using HMR
     inline: true # set to false to disable hmr
     overlay: true
     compress: true
     disable_host_check: true

# package.json

   "dependencies": {
     "@rails/webpacker": "4.0.0-pre.2",
     "tailwindcss": "^0.5.3",
     "vue": "^2.5.16",
     "vue-loader": "^15.2.4",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.16",
     "vuex": "^3.0.1",
     "webpack-cli": "^3.0.6"
   },
   "devDependencies": {
     "webpack-dev-server": "^3.1.4"
   }
 }

# add the following upstream somewhere in your nginx config:

upstream arbitrary_upstream_name {
  server 127.0.0.1:3035;
}

# either add this entire server block, or...
server {
  listen       80;
  server_name REMOTE_URL_HERE;

# ...add just this location to an existing server block.
  location /sockjs-node {
    proxy_pass http://arbitrary_upstream_name;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header    Upgrade $http_upgrade;
    proxy_set_header    Connection "upgrade";

  }

}