Мотивация

У меня было приложение React on Rails, настроенное с помощью Webpacker и гема react-rails. Настройка позволила мне написать компоненты React для внешнего интерфейса и использовать Rails в качестве внутреннего сервера. Это было здорово, но Webpacker долго скомпилировал код React, что раздражало, поскольку кодовая база увеличивалась, а компиляция замедлялась.

Чтобы сократить время компиляции и улучшить опыт разработки, я решил изучить установку Vite, React и Rails. Раньше я использовал настройки Vite + React и React + Rails, но я не пробовал использовать все три из них. Поэкспериментировав, я обнаружил, что для меня лучше всего работает следующая установка.

Начальная настройка

Чтобы создать приложение Rails, введите команду rails new test-app --minimal. Это устанавливает приложение Rails с минимальным количеством драгоценных камней, поэтому мы можем сосредоточиться на интеграции Rails, React и Vite. (Примечание: при развертывании на Heroku используйте --database=postgresql для настройки приложения с PostgreSQL вместо базы данных SQLite по умолчанию)

Перейдите в каталог проекта с помощью cd test-app и приступим к написанию кода!

Создавать просмотры

Сначала мы отобразим код нашего внешнего интерфейса на странице. Сгенерируйте контроллер с помощью этой команды rails g controller Homepage index. Это создает контроллер домашней страницы с index методом.

В routes.rb свяжите корневой маршрут с методом индекса. Когда пользователь обращается к корневому маршруту, он направляет пользователя в представление app/views/homepage/index.html.erb.

Настроить базу данных

Перед предварительным просмотром нашего приложения на сервере Rails мы должны настроить базы данных. Начните с rails db:create, это создаст базы данных test_app_development и test_app_test для разработки и тестирования соответственно.

Запустите приложение

Чтобы запустить сервер Rails, используйте команду rails s. Затем перейдите на localhost: 3000, и вы должны увидеть что-то вроде этого:

Создание API

У нас есть минимальная настройка, в которую мы можем добавлять API. Чтобы создать API, мы должны создать модели, контроллеры и соответствующие конечные точки API.

Создание моделей

В качестве примера мы создадим приложение для блога со статьями. Во-первых, мы можем добавлять статьи, создав модель для статей: rails generate model Article title:string body:text. Это настраивает таблицы базы данных для статей и добавляет другие файлы для управления моделью в Rails.

Затем выполните миграцию базы данных с помощью rails db:migrate. Выполняйте эту команду каждый раз, когда вы вносите изменения в базы данных, например добавляете или изменяете модели.

Генерация контроллеров

Наш код API будет записан в файлах контроллера. Чтобы создать контроллер для статей, выполните эту команду: rails generate controller api/v1/Articles index --skip-routes. Контроллер имеет пространство имен с api/v1, чтобы указать, что контроллеры предназначены для API и для версии API.

Это генерирует следующие файлы:

create  app/controllers/api/v1/articles_controller.rb
invoke  erb
create    app/views/api/v1/articles
create    app/views/api/v1/articles/index.html.erb
invoke  test_unit
create    test/controllers/api/v1/articles_controller_test.rb
invoke  helper
create    app/helpers/api/v1/articles_helper.rb
invoke    test_unit
invoke  assets
invoke    scss
create      app/assets/stylesheets/api/v1/articles.scss

Откройте app/controllers/api/v1/articles_controller.rb и включите следующее в index метод контроллера:

Это извлекает статьи из базы данных и отображает их в формате JSON.

Добавить конечные точки API

Нашему клиентскому приложению необходимо вызывать API через конечную точку API. В config/routes.rb добавить следующее:

Это добавляет маршрут в api/v1/articles и связывает его с методом index в контроллере Articles. В этом руководстве я буду создавать только index API, но по мере создания большего количества CRUD API не стесняйтесь удалять only: [:index] код для генерации маршрутов для всех операций CRUD.

Добавление тестовых данных

Чтобы добавить тестовые данные в наши базы данных, мы можем добавить несколько статей в db/seeds.rb, как в примере ниже:

Затем добавьте тестовые данные через rails db:seed.

API в действии

Создав наши API, запустите сервер Rails и перейдите по адресу localhost: 3000 / api / v1 / articles, и мы будем отображать список статей в формате JSON.

Теперь мы можем использовать конечную точку api / v1 / articles для нашего кода React, который мы добавим в следующем разделе.

Интеграция Vite

Мы создали API-интерфейсы в нашем приложении Rails и теперь готовы настроить интерфейсное приложение с помощью React и Vite.

Установка Vite

Сначала установите гем vite_rails, включив его в свой Gemfile: gem 'vite_rails'.

Установите драгоценный камень в свой проект с помощью команды bundle install.

Запустите bundle exec vite install, чтобы установить соответствующие зависимости Javascript и файлы примеров.

Для удобства мы определяем скрипт для запуска сервера разработки Vite в нашем package.json:

Перезапустите сервер Rails, затем запустите сервер Vite dev с npm run dev. Откройте Chrome Devtools и убедитесь, что на консоли напечатано «Vite ⚡️ Rails». Это указывает на то, что настроенные Vite и Rails работают.

Написание кода React

Чтобы написать код React, установите соответствующие библиотеки с npm install react react-dom.

В геме vite_rails файлы внутри app/javascript/entrypoints являются точками входа в наше приложение React. Удалите образец файла Javascript в app/javascript/entrypoints/application.js и создайте файл в app/javascript/entrypoints/index.jsx. В этот файл включите следующий код:

Для нашей файловой структуры мы можем разместить компоненты React в app/javascript/components. В качестве примера создайте файл app/javascript/components/App.jsx и добавьте в него следующее:

Включение приложения в Rails

Теперь, когда мы создали наши компоненты React, мы можем интегрировать их в наше приложение Rails. В приложении Rails будет отображаться страница app/views/layouts/application.html.erb, поэтому мы должны связать наши компоненты React с этим файлом. Это похоже на страницу index.html в create-react-app настройках, где страница index.html связывает компоненты React с этой страницей.

Удалите <%= vite_javascript_tag ‘application' %>, как мы удалилиapp/javascript/entrypoints/application.js. Включите этот тег javascript: <%= vite_javascript_tag ‘index.jsx' %>, чтобы загрузить index.jsx файл, который мы определили ранее.

В app/views/homepage/index.html.erb замените существующий код на <div id="root />, чтобы содержимое приложения React могло отображаться в этом теге div.

После внесения изменений ваши файлы должны выглядеть примерно так:

Использование API в компонентах React

Теперь мы можем включить определенные нами API-интерфейсы Rails. Например, если я хочу отобразить все статьи в components/App.jsx, я могу внести следующие изменения:

Перейдите на localhost: 3000, и мы сможем увидеть статьи в базе данных.

Переход с Webpacker

Если у вас есть приложение React on Rails с Webpacker, и вы хотите перейти на использование Vite, вам необходимо удалить гем webpacker и связанные с ним файлы и двоичные файлы.

В Gemfile удалите webpacker и react_rails и включите vite_rails, затем запустите bundle install и bundle exec vite install, чтобы установить Vite.

Удалите файлы конфигурации веб-пакета в config/webpacker.yml и config/webpack.

В package.json удалите пакеты, связанные с Webpack (webpack, @rails/webpacker и webpack-dev-server), и пакеты, связанные с React Rails (react_ujs и @rails/ujs).

Удалите двоичные файлы в bin/webpack и bin/webpack-dev-server.

Переместите файлы из app/javascript/packs в app/javascript/entrypoints и свяжите их через vite_javascript_tag вместо javascript_pack_tag.

Выводы и благодарности

Попытка использовать эту настройку в моих проектах React действительно помогла мне лучше понять Rails и Vite. При написании этой статьи мне очень помогли следующие ресурсы, и я настоятельно рекомендую прочитать их, чтобы лучше понять, о чем здесь говорилось:

Код этого руководства можно найти по адресу https://github.com/C-likethis123/test-app.