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 tofrontend
. -
Go to application.html.erb and replace j
avascript_include_tag "application"
withjavascript_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 withrails s
. For that we need aProcfile
, 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