vue-rails.sh

#!/bin/bash

set -e
set -o pipefail

# Kill all backgorund process started in this script
#trap "kill 0" EXIT
#trap "exit" INT TERM ERR
# run background process
# wait

project_name=${1:-vuejs-rails-5-starterkit}

echo "======================================================="
echo ""
echo "Generate project: $project_name"
echo ""
echo "======================================================="

rails new $project_name -M -C -S --skip-turbolinks --webpack=vue -d postgresql
cp README.md $project_name/
cd $project_name

# Create schema.rb
bin/rails db:create db:migrate

sed -i -e "s/\# system('bin\/yarn')/system('bin\/yarn')/g" bin/setup
sed -i -e "s/\# system('bin\/yarn')/system('bin\/yarn')/g" bin/update

DISABLE_SPRING=1 bin/rails runner "exit"
DISABLE_SPRING=1 bin/rails test
bin/webpack

cat >> config/initializers/content_security_policy.rb <<-EOT

Rails.application.config.content_security_policy do |policy|
  if Rails.env.development?
    policy.script_src :self, :https, :unsafe_eval
    policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035'
  else
    policy.script_src :self, :https
  end
end

EOT


git add .
git commit -m "Generate rails application with webpack and vue.js"

echo "======================================================="
echo ""
echo "Upgrade webpacker"
echo ""
echo "======================================================="
# editor Gemfile
sed -i -e "s/gem 'webpacker'/gem 'webpacker', '>= 4.0.x'/g" Gemfile
bundle update webpacker

echo "Y" | bin/rails webpacker:install
bin/rails webpacker:install:vue

yarn add @rails/webpacker@next
yarn upgrade webpack-dev-server --latest
yarn install

bin/webpack
DISABLE_SPRING=1 bin/rails test

git add .
git commit -m "Upgraded webpacker to 4"

yarn add @vue/babel-preset-app
# editor .babelrc
sed -i -e "s/@babel\/preset-env/@vue\/app/g" .babelrc
bin/webpack

git commit -am "Installed vue.js default preset for babel"

# editor app/views/layouts/application.html.erb
sed -i -e "s/link\|include/pack/g" app/views/layouts/application.html.erb
sed -i -e "s/application/hello_vue/g" app/views/layouts/application.html.erb

DISABLE_SPRING=1 bin/rails g controller Landing index --no-javascripts --no-stylesheets --no-helper --no-assets --no-fixture
# editor config/routes.rb
sed -i -e "s/  get/root 'landing\#index'\n  get/g" config/routes.rb
DISABLE_SPRING=1 bin/rails s &
sleep 5

xdg-open http://localhost:3000

DISABLE_SPRING=1 bin/rails test

git add .
git commit -m "Added page with vue.js hello commoponent"

yarn add --dev jest vue-jest babel-jest @vue/test-utils jest-serializer-vue 'babel-core@^7.0.0-bridge' @babel/core
yarn install
# editor package.json
sed -i '/  "private": true,/ {

r ../jest_package_json.updates
d
}' package.json

# editor .babelrc

sed -i '/  "plugins": \[/ {

r ../jest_babelrc.updates
d
}' .babelrc

mkdir test/javascript
# editor test/javascript/test.test.js
cat > test/javascript/test.test.js <<EOT
test('there is no I in team', () => {
  expect('team').not.toMatch(/I/);
});

EOT
yarn test

# editor test/javascript/app.test.js
cat > test/javascript/app.test.js <<EOT
import { mount, shallowMount } from '@vue/test-utils'
import App from 'app';

describe('App', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(App)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })

  test('matches snapshot', () => {
    const wrapper = shallowMount(App)
    expect(wrapper.html()).toMatchSnapshot()
  })
});

EOT
yarn test
DISABLE_SPRING=1 bin/rails test

git add .
git commit -m "Added jest tests"

echo "======================================================="
echo ""
echo "Deploy on Heroku"
echo ""
echo "======================================================="

RAILS_ENV=production \
NODE_ENV=production \
RAILS_SERVE_STATIC_FILES=true \
SECRET_KEY_BASE="7aa51097e982f34be02abe83528c3308768dff3837b405e0907028c750d22d067367fb79e2b223e3f223fea50ddf2d5dc9b3c933cf5bc8c7f2a3d3d75f73c4a7" \
bin/rails assets:precompile

heroku create
heroku buildpacks:add heroku/ruby
heroku config:set RAILS_ENV=production NODE_ENV=production

#git add .
#git commit -m 'Added simple example page to run Vue.js component'
git push heroku master
heroku apps:open


echo "Install serviceworker-rails"
cp ../install_sw.patch ./
git apply install_sw.patch
rm install_sw.patch

bin/update
bin/rails assets:precompile

git add .
git commit -m 'Add example how to use serviceworker for caching and offline fallback'

git push heroku master
heroku apps:open

echo "Install Turbolinks"
cp ../0001-Add-Turbolinks.patch ./
git apply 0001-Add-Turbolinks.patch
rm 0001-Add-Turbolinks.patch

bin/update
bin/rails assets:precompile

git add .
git commit -m 'Install Turbolinks'

git push heroku master
heroku apps:open

echo "Add github origin"
git remote add origin git@github.com:jetthoughts/vuejs-rails-5-starterkit.git

kill `cat tmp/pids/server.pid`