Мотивация
У меня было приложение 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. При написании этой статьи мне очень помогли следующие ресурсы, и я настоятельно рекомендую прочитать их, чтобы лучше понять, о чем здесь говорилось:
- Документация Vite Ruby, в частности, обзорный раздел: https://vite-ruby.netlify.app/overview.html
- Руководства Rails по конвейеру ресурсов: https://guides.rubyonrails.org/asset_pipeline.html
Код этого руководства можно найти по адресу https://github.com/C-likethis123/test-app.