Rails 5.2, Webpack and Vue on Raspberry Pi

First, to create vanilla Rails application

$ rails new xmppchat --database=postgresql --skip-bundle
$ git add .
$ git commit -m 'initial commit'

Because my development environment is Raspberry Pi 3 B+, I need to disable bootsnap.

$cat config/boot.rb
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__)
require 'bundler/setup' # Set up gems listed in the Gemfile.
unless File.exists?("/proc/cpuinfo") && File.read("/proc/cpuinfo").include?("ARMv7")
  require 'bootsnap/setup' # Speed up boot time by caching expensive operations.
end

Then install dependencies by bundle install.

Create the database after editing config/database.yml based on your development setup by bundle exec db:migrate.

You can start Rails with bundle exec rails server. My development machine is in private network, thus, I can check the result at http://192.168.10.64:3000. I do see an error cannot render console from 192.168.xxx.xxx from console running rails server. To fix it based on this article, add this into config/environments/development.rb

config.web_console.whitelisted_ips = '192.168.10.0/16'

Now we can add webpacker in Gemfile as gem 'webpacker’ and run bundle install. Then install webpacker by bundle exec rake webpacker:install and bundle exec rake webpacker:install:vue.

Then create a test page

$ bundle exec rails g controller chat index

To make sure Vue is installed successfully, add this into app/view/chat/index.html.erb

<div id='hello'>
  {{message}}
  <app></app>
</div>

Install vue-turbolinks by yarn add vue-turbolinks

Then edit app/javascript/pack/hello_vue.js to have this part work while comment the rest

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
Vue.use(TurbolinksAdapter)
document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '#hello',
    data: {
      message: "Can you say hello?"
    },
    components: { App }
  })
})

Add these two in app/view/layout/application.html.erb

<%= stylesheet_pack_tag 'hello_vue' %>
<%= javascript_pack_tag 'hello_vue' %>

Finally, to fix the security and CORS issues, edit config/initializers/content-security_policy.rb as

Rails.application.config.content_security_policy do |policy|
  policy.font_src    :self, :https, :data
  policy.img_src     :self, :https, :data
  policy.object_src  :none
if Rails.env.development?
    policy.script_src  :self, :https, :unsafe_eval
    policy.default_src :self, :https, :unsafe_eval
    policy.connect_src :self, :https, "http://192.168.10.64:3035", "ws://192.168.10.64:3035" # for webpack-dev-server
  else
    policy.script_src  :self, :https
    policy.default_src :self, :https
  end
policy.style_src   :self, :https
# Specify URI for violation reports
  # policy.report_uri "/csp-violation-report-endpoint"
end

And config/webpacker.yml

development:
  <<: *default
  compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    #host: localhost
    host: 192.168.10.64
    port: 3035
    #public: localhost:3035
    public: 192.168.10.64:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/

Now, execute ./bin/webpack-dev-server in one console and bundle exec rails server in another. Check the http://192.168.10.64:3000/chat/index.html and Vue should work by saying “Hello Vue!”. Browser console will not report any error.