Skip to content

Instantly share code, notes, and snippets.

@vcavallo vcavallo/notes.md
Last active Feb 24, 2019

Embed
What would you like to do?
rails + webpacker + webpack-dev-server + vue + remote dev vps and nginx

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";

  }

}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.