Rails app workflow

rails_app_workflow.md

Rails app with Yarn and Webpack workflow

http://g3ortega.com/rails/2017/05/30/rails-5-1-and-forward-yarn-on-rails.html

https://evilmartians.com/chronicles/evil-front-part-1

RVM install Ruby 2.5.1

$ rvm install 2.5.1

Create .ruby-version and .ruby-gemset files

$ rvm --create --ruby-version 2.5.1@test_app

Skip gems documentation installation

$ echo "gem: --no-document" >> ~/.gemrc

Install fundamentals gems

$ gem install bundler

$ gem install nokogiri

$ gem install rails

Install PosgreSQL server

$ sudo apt-get install postgresql postgresql-contrib libpq-dev

Create user in postgresql and set password

$ sudo -u postgres createuser -s railsdevuser```

$ sudo -u postgres psql

postgres=#\password railsdevuser

postgres=#\q

Install Yarn

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

$ sudo apt-get update && sudo apt-get install yarn

Create new app with webpack

$ rails new test_app --skip-coffee --skip-sprockets --skip-turbolinks --webpack --database=postgresql -T

Create a global config for browserslist, that tools like Autoprefixer are going to need to correctly process your code to be cross-browser compliant.

$ touch .browserslistrc

add this line to file .browserslistrc: > 1%

To skip assets related files generation, open application.rb and add these lines:

# config/application.rb
config.generators do |g|
  g.test_framework  false
  g.stylesheets     false
  g.javascripts     false
  g.helper          false
  g.channel         assets: false
end

• Remove the app/assets folder.

• --webpack option in our rails new had created a folder named app/javascript. Move it to the root of your project and rename it to frontend.

• Go to application.html.erb and replace javascript_include_tag "application" with javascript_pack_tag "application".

• Replace stylesheet_link_tag 'application', media: 'all' with stylesheet_pack_tag 'application'.

• To et webpacker know where to look for files to bundle, edit /config/webpacker.yml:

default: &default
 source_path: frontend
 source_entry_path: packs
 public_output_path: packs
 cache_path: tmp/cache/webpacker

• Inform the controller where to find partials:

# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
 protect_from_forgery with: :exception
 # That's all there is:
 prepend_view_path Rails.root.join("frontend")
end

• As of webpacker 3.0, we no longer need a separate process to compile assets on-demand in development, but if we want to make use of automatic page refresh on every change in JS/CSS code, we still need to run webpacker-dev-server alongside with rails s. For that we need a Procfile, so let’s create one:

$ touch Procfile

Put this inside:

server: bin/rails server
assets: bin/webpack-dev-server

With Procfile in place, you can launch all your processes with a single command using a tool like Foreman.

Install foreman: http://blog.daviddollar.org/2011/05/06/introducing-foreman.html

To start foreman:

$ foreman start