Налаштування нового додатка Rails 8 з Vite, React і TypeScript

Під час налаштування нового додатка Rails з Vue та TypeScript я зіткнувся з кількома труднощами. Щоб спростити процес для інших, я вирішив створити цей покроковий посібник по налаштуванню Hello World React додатку з Rails.

Чому обирати Vite замість інших бандлерів?

Vite вирізняється своєю швидкістю, простотою та ефективністю. На відміну від традиційних бандлерів, Vite пропонує:

• Автоматичну заміну гарячих модулів (HMR): Миттєве оновлення лише змінених компонентів без перезавантаження всієї сторінки.
• Неймовірно швидкий старт і компіляція: Vite оптимізує процес розробки, оновлюючи лише змінені файли, а не перебудовуючи весь додаток.

Попередні вимоги

Перед налаштуванням додатку переконайтесь, що у вас встановлене наступне:

• Rails 8
• Ruby 3.4.2
• Node.js v20

Цей посібник допоможе налаштувати і конфігурувати React з Vite у вашому додатку Rails.

Створіть новий додаток Rails за допомогою стандартної команди rails new:

rails new rails-vite-application --skip-javascript

Ця команда повинна налаштувати новий додаток зі стандартними налаштуваннями. Ви можете вказати базу даних, таку як MySQL або Postgres, якщо це необхідно. Ми використовуємо SQLite на даний момент. Оскільки Vite не є підтримуваним бандлером для налаштування Rails new, ми пропускаємо частину з JavaScript.

Після завершення налаштування перейдіть до кореневої папки додатку, щоб додати залежності Vite до додатку. Ця команда додасть гем до Gemfile і також встановить його локально.

bundle add vite_rails  
bundle install

Далі виконайте команду налаштування Vite для встановлення залежностей гему.

bundle exec vite install

Ця команда встановлює необхідні js залежності для роботи Vite, включаючи конфігураційні файли vite.config.ts та config/vite.json. Також вона автоматично додає тег viteclienttag та vitejavascripttag з точкою входу Vite до application.html.erb.

Перемістіть фронтенд до папки app:

mv frontend app/

Змініть vitejavascripttag на application.tsx, щоб точніше вказати ім’я файлу.

Далі встановіть TypeScript за допомогою команди:

yarn add -D typescript @vitejs/plugin-react

Ініціалізуйте конфігураційний файл ts:

yarn tsc -init

Змініть розширення фронтенду з js на tsx:

mv app/frontend/entrypoints/application.js app/frontend/entrypoints/application.tsx

Додайте бібліотеку React до додатку:

yarn add react react-dom   
yarn add -D @types/react @types/react-dom

Оновіть tsconfig, щоб підтримувати jsx, додавши наступне в tsconfig.js (скопіюйте весь вміст):

{  
 "compilerOptions": {  
 "jsx": "react-jsx", // Дозволяє підтримку JSX для React  
 "esModuleInterop": true, // Забезпечує сумісність з модулями CommonJS  
 "allowJs": true, // Дозволяє JavaScript файли, якщо це необхідно  
 "resolveJsonModule": true, // Дозволяє імпорт JSON  
 "strict": true // Необов’язково, але рекомендується для безпеки типів  
 }  
}

На цьому етапі ми налаштували Vite, TypeScript, React та точку входу до додатку.
Тепер створимо функціональний компонент "Hello World", щоб переконатися, що інтеграція працює належним чином..!

Очистіть вміст файлу frontend/entrypoints/application.tsx і замініть його наступним:

Файл — frontend/entrypoints/application.tsx

import React from "react";  
import ReactDOM from "react-dom/client";  

const App = () => {  
 return 
Hello, Vite + React + TypeScript!
;   };      // Знайти кореневий елемент у вашому Rails view  
document.addEventListener("DOMContentLoaded", () => {  
 const rootElement = document.getElementById("react-root");  
 if (rootElement) {  
   const root = ReactDOM.createRoot(rootElement);  
   root.render();  
 }  
});

Щоб відобразити React компонент, необхідно створити точку монтування для React додатку. Ми можемо використовувати існуючий application_controller і створити новий шаблон index.html.erb для монтування React div, або створити окремий home_controller і перемістити всю логіку головної сторінки в цей контролер. Оскільки ми надаємо перевагу другому варіанту, створимо новий контролер за допомогою наступної команди з методом index:

bin/rails generate controller Home index

Це згенерує новий home_controller з методом index, новий маршрут та файл представлення в app/views/home/index.html.erb.

Додайте наступний div для монтування React в home view, замінивши вміст на:

<div id="react-root"></div>

На цьому етапі наш додаток повинен працювати, коли відвідується маршрут localhost:3000/home. Тепер зробимо так, щоб стандартний маршрут “/” завантажував це представлення. Оновіть файл config/routes.rb, щоб вказати, що стандартний маршрут веде до методу index в home_controller. Додайте наступне як перший маршрут:

root "home#index"

Переконайтеся, що файл “config/vite.json” містить sourceCodeDir:app/frontend як директорію для обслуговування, або скопіюйте наступне в цей файл:

{  
 "all": {  
   "sourceCodeDir": "app/frontend",  
   "watchAdditionalPaths": []  
 },  
 "development": {  
   "autoBuild": true,  
   "publicOutputDir": "vite-dev",  
   "port": 3036  
 },  
 "test": {  
   "autoBuild": true,  
   "publicOutputDir": "vite-test",  
   "port": 3037  
 }  
}

Нарешті, тестуємо додаток, запускаючи його в кількох терміналах:

bin/rails s  
bin/vite dev  

Відвідайте http://localhost:3000, щоб переконатися, що додаток працює.

І ось наш перший додаток працює з Rails, React і TypeScript. Ура..!!

Налаштуємо Foreman для управління кількома процесами Rails та Vite, щоб монітор процесів запускав і зупиняв сервери. Використовуйте гем Foreman або npm пакет. Ми використаємо гем Rails. Додайте його до групи розробки за допомогою команди:

bundle add foreman --group "development"  
bundle install

Створіть файл Procfile.dev у корені проєкту з наступними даними:

web: bin/rails server -p 3000  
vite: bin/vite dev

Використовуйте нижче команду для запуску додатку:

foreman start -f Procfile.dev




Перекладено з: [Setting up a new Rails 8 Application with Vite, React, and TypeScript](https://medium.com/@shriharikulkarni07/setting-up-a-new-rails-application-with-vite-react-and-typescript-ts-c7c99715546c)