Update rails 5.0 to 5.1 + yarn + webpack

Aktualizacja Railsów do wersji 5.1 jest łatwiejsza niż może się wydawać. Osobiście spodziewałem się kilku godzin konfigurowania tak aby uzyskać wsparcie dla webpacka.
Nic z tych rzeczy. Wszystko jest latwe szybkie i intuicyjne

Testy

Aby zaktualiować cokolwiek konieczne są testy. Im więcej, tym lepiej. Jeśli ich nie ma lub jest mało, warto dopisać je przed aktualizacją. Bez nich wszystko staje się mocno ryzykowne.

Przygotowanie Gemfile do aktualizacji

Aby kontrolować to, do jakiej wersji zaktualizują nam się gemy, powinniśmy stosować następującą notacje w Gemfile.

  gem 'sample-gem', '~> 0.3.6'

Powyższa notacja pozwala bundlerowi na automatyczne zaktualizowanie wersji tylko na ostatniej cyfrze. Czyli jeżeli znajdzie wersje 0.3.7 to zaktualizuje do niej, ale nie zaktualizuje już do wersji 0.4.0 . Ostatnia cyfra oznacza bugfixy, więc jeśli gem jest poprawnie wersjonowany, to nie powinny pojawić się żadne błędy. Jeśli podczas aktualizacji wystąpią konflikty wersji, wtedy trzeba rozwiązać je ręcznie. Dobrym rozwiązaniem, chociaż płatnym jest gemnasium które wyświetla nam informacje o wersjach użytych przez nas gemów

Kiedy już poprawiliśmy Gemfile polecam wykonać bundle update i sprawdzić czy nadal wszystko działa

Upgrade Rails

Jeśli w poporzednim kroku wszystko poszło poprawnie, testy przechodzą i aplikacja działa zmieniamy wersje railsów w gemsile i wykonnujemy bundle update rails

Najlepiej zmieniać wersje o “jeden: do góry, czyli jesli mamy np rails 5.0.0 to najlepiej upgradować do wersji rails 5.0.5, sprawdzić czy wszystko działa i póżniej znów to samo.
W moim przypadku zmieniłem w gemfile

  # gem 'rails', '5.0' it was 5.0.5 version
  gem 'rails', '~> 5.1.0' # it install 5.1.3 version

Dodanie wsparcia dla webpack-a

Czy musimy dodawać wsparcie dla webpacka? Jesli mamy tylko Api, bez widoków to nie jest to potrzebne, ale w przeciwnym razie odpowiedz brzmi zdecydowanie TAK.

  • Webpack jest dużo szybszy od assets-pipeline
  • Webpack może być dodany jednoczesnie z assets-pipeline
  • Webpack jest wygodniejszy w dodawaniu paczek js
  • Webpack umożliwia hot-reloading przy zmianie assetów

Nie musimy wszystkich assetów przepisywać na nowo. Dalej mozemy korzystać z asset-pipeline, natomiast nowe funkcjonalności dodajemy juz z uwzględnieniem webpack-a

Aby dodać wsparcie dla webpacka dodajemy do Gemfile

    gem 'webpacker', '~> 2.0'

Następnie bundle install

i dalej polecenie ktore doda potrzebna konfiguracje

    ./bin/rails webpacker:install

Powyższe polecenie samo upomni się o brakujące rzeczy. W moim przypadku było to zaktualizowanienode, oraz dodanie yarn

Import plików webpacka

Pozostało nam już tylko dodanie odpowiednich wpisów w naszym layoucie, które zaimportuja pliki w katalogu app/javascript/packs

!!!
%html
  %head
    %meta{content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title my app
    = csrf_meta_tags
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'


    # add line below to use import webpack
    = javascript_pack_tag 'application'
    = stylesheet_pack_tag 'application'

Oczywiście musimy dodać odpowiednie pliki do app/javascript/packs oraz w pliku application.js musimy podać ścieżkę do styli

 //app/javascript/packs/application.js

  import './stylesheets/application.scss';
  console.log('Hello World from Webpacker');

 //app/javascript/packs/stylesheets/application.scss

 @import 'import_here_in_scss_syntax'

 body {
   background-color: #999999;
 }

Uruchomienie, tryb developerski

Aby uruchomić aplikacje trzeba oprócz standardowej komendy rails s wykonać dodatkowo

   ./bin/webpack-dev-server

Powyższe polecenie odpali serwer webpacka na porcie 8080. Serwer chodzi sobie w tle i nie musimy się nim zbytnio przejmować. Development prowadzimy standardowo na porcie 3000 na który serwer webpacka podaje assety. Zmiany w css/javascript są widoczne niemal natychmiast na ekranie bez przeładowania strony.

Uruchomienie produkcja

W trybie produkcyjny trzeba pamiętać o dodaniu opcji:

   config.public_file_server.enabled = true

Podsumowanie

Jeśli jeszcze nie zdecydowałeś się na upgrade i wsparcie dla webpacka, to najwyższy czas to zrobić. Praca z webpackiem to prawdziwa przyjemność. Wszystko działa duuużo szybciej, oraz bardzo łotwo dodaje się js/css biblioteki