Настройка React + Rails никогда не была проще

От переводчика: Оригинал статьи

От переводчика: Я всегда стараюсь как можно точнее переводить статьи для своего блога, но в данном случае чтобы предоставить наиболее свежую и точную инструкцию мне пришлось поправить некоторые моменты. Я уже писал о технологиях применяемых в данном туториале, прежде чем начать вы можете ознакомиться с этими записями:

• Деплоим Rails + Webpack приложение на Heroku
• React.js - tutorial для Rails разработчиков (часть 1)
• React.js - tutorial для Rails разработчиков (часть 2)

Буквально несколько дней назад была выпущена Бета 1 Rails 5.1, которая принесла кучу новых функций. Наиболее заметной из них является добавление Webpack. Для тех кто не в курсе, Webpack это инструмент для сборки вашего JavaScript. Вместе с ним также был добавлен Yarn - менеджер зависимостей для Node пакетов. Эти два инструмента решительно упрощают настройку Rails приложений совместно с React (ныне главная головная боль), Angular, Vue или другими JavaScript фреймворками. В релизе также присутствует такое заметное изменение как удаление jQuery, больше он не является частью Rails по умолчанию.

Я продемонстрирую очень простую установку Rails + React.

Код приложения шаблона React+Rails доступен на Github.

Чтобы начать, нам нужно получить самую последнюю версию Rails. К счастью, есть очень простой способ для этого. Вместо того чтобы вручную выбирать версию и возиться с Gemfile, мы просто выполним команду

$ gem install rails --pre

От переводчика: Для управления разными версиями Ruby и наборами гемов я использую RVM, например вот в этой статье я описал как создать отдельный gemset (набор гемов) и закрепить его за проектом.

После того как с этим покончено, мы можем создать Rails проект используя инструкцию ниже. В данном конкретном случае мы не будем устанавливать CoffeeScript и Turbolinks, так как приложение их не использует.

$ rails new test_app - dev - force --webpack --skip-coffee --skip-turbolinks

Обратите внимание, что Yarn должен быть установлен в системе до запуска данной команды, чтобы Rails мог сконфигурировать все правильно, однако если вы запустили команду выше в тот момент когда Yarn не был установлен, вы можете доустановить все требуемые пакеты позже.

Установить Yarn на macOS можно с помощью Homebrew командой brew install yarn. А доустановить все требуемые пакеты вот так

$ yarn add --dev babel-core babel-loader babel-preset-latest babel-preset-react babel-preset-env coffee-loader coffee-script glob path-complete-extname rails-erb-loader webpack webpack-dev-server webpack-merge

Yarn скачает все необходимые зависимости и сохранит статус в lock файл.

Затем мы установим React используя наш локальный бинарный файл Rails и новую утилиту командной строки webpacker.

$ bin/rails webpacker:install:react

Эта команда автоматически подтянет всё что нужно чтобы использовать React. Вы заметите новые каталоги/файлы, в том числе webpack, webpack-dev-server и yarn внутри bin, а также множество других конфигурационных файлов, с которыми вам стоит разобраться в будущем, если планируете использовать данную связку.

Согласно новой структуре внутри папки app появится каталог javascript, внутри которого, в свою очередь, появится папка packs. Это будет место где нужно складывать наши пакеты (packs) чтобы Webpack узнал о их существовании.

Теперь сделаем необходимые вещи на стороне Rails. Чтобы объединить Rails и React в одно целое, мы будем использовать новые webpack теги внутри наших шаблонов. Для начала создадим минимальый контроллер, конечно же

$ rails g controller Main index

Теперь, внутри нашего шаблона app/views/main/index.html.erb заменим содержимое на

<%= javascript_pack_tag 'hello_react' %>

hello_react - это пакет (pack) который уже существует по пути app/javascript/packs/hello_react.jsx благодаря Webpack React генератору встроенному в Rails.

Однако, этого недостаточно чтобы наша связка React+Rails заработала. Что же нам делать? Открыть файл config/environments/development.rb и раскомментировать 3 строку содержащую следующий параметр

...
config.x.webpacker[:dev_server_host] = "http://localhost:8080"
...

Теперь мы можем запустить webpack-dev-server c помощью команды

$ ./bin/webpack-dev-server

А Rails сервер стандартной командой

$ bundle exec rails s

Чтобы запускать оба сервера одновременно в одной вкладке можно воспользоваться утилитой Foreman. После установки необходимо создать Procfile c содержанием:

rails: bundle exec rails s
webpack: ./bin/webpack-dev-server

Это позволит использовать команду foreman s для запуска. После чего можно открыть страницу в браузере http://localhost:5000/main/index на которой должен быть текст Hello React!.

P.S. Версии Ruby и Rails использованные в данной статье:

$ ruby --version
ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-darwin16]
$ rails version
Rails 5.1.0.beta1