Як налаштувати проект Rails з Esbuild та TailwindCSS

У цьому посібнику ми розглянемо, як налаштувати проект на Ruby on Rails з використанням Esbuild для компіляції JavaScript та TailwindCSS для стилізації. Цей підхід дозволяє створювати сучасні веб-додатки з швидкою продуктивністю та привабливим дизайном. Давайте розпочнемо!

Що таке Rails, Esbuild та TailwindCSS?

Перед тим, як почати, давайте коротко розглянемо, що таке Rails, Esbuild та TailwindCSS:

Ruby on Rails - це фреймворк для веб-розробки, який дозволяє швидко створювати веб-додатки, використовуючи мову програмування Ruby.
Esbuild - це надшвидкий компілятор JavaScript, який дозволяє швидко збирати ваш код, зокрема, модулі ES.
TailwindCSS - це утилітарний CSS-фреймворк, який дозволяє створювати стильні інтерфейси, використовуючи класи CSS безпосередньо в HTML.

Крок 1: Створення нового проекту Rails

Перш ніж почати, переконайтеся, що у вас встановлені Ruby, Rails та Node.js. Якщо все готово, ви можете створити новий проект Rails за допомогою наступної команди:

rails new myapp --skip-javascript

Ця команда створить новий проект Rails з назвою "myapp" і пропустить налаштування JavaScript, оскільки ми будемо використовувати Esbuild.

Крок 2: Встановлення Esbuild

Далі, давайте додамо Esbuild до нашого проекту. Для цього спочатку потрібно додати gem до вашого Gemfile:

# Gemfile
gem 'esbuild', '~> 0.14.0'

Після цього виконайте команду для установки gem:

bundle install

Тепер, коли Esbuild додано до проекту, давайте налаштуємо його. Створіть файл конфігурації для Esbuild:

# config/esbuild.rb
require 'esbuild'

Esbuild.build(
  entry_points: ['app/javascript/application.js'],
  bundle: true,
  outdir: 'app/assets/builds',
  minify: true,
  sourcemap: true
)

Цей файл вказує Esbuild, які файли JavaScript потрібно зібрати, куди їх виводити, а також включає параметри для мінімізації та створення sourcemap.

Крок 3: Встановлення TailwindCSS

Тепер давайте додамо TailwindCSS до нашого проекту. Для цього спочатку потрібно встановити TailwindCSS через npm:

npm install tailwindcss postcss autoprefixer

Після установки створіть файл конфігурації для TailwindCSS:

npx tailwindcss init -p

Ця команда створить два файли: tailwind.config.js та postcss.config.js.

Налаштування TailwindCSS

Тепер відкрийте файл tailwind.config.js і налаштуйте його, щоб вказати, де TailwindCSS повинен шукати ваші шаблони:

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Це дозволить TailwindCSS згенерувати стилі лише для класів, які ви використовуєте у ваших шаблонах.

Крок 4: Додавання TailwindCSS до вашого CSS

Тепер давайте створимо файл CSS, в якому ми імплементуємо TailwindCSS. Створіть файл app/javascript/stylesheets/application.css і додайте до нього наступний код:

@tailwind base;
@tailwind components;
@tailwind utilities;

Цей файл імплементує базові стилі, компоненти та утиліти TailwindCSS.

Крок 5: Налаштування JavaScript

Тепер відкрийте файл app/javascript/application.js і імплементуйте ваш CSS файл:

import './stylesheets/application.css';

Це дозволить Esbuild зібрати ваш CSS разом з JavaScript.

Крок 6: Додавання скриптів до вашого шаблону

Тепер, коли все налаштовано, давайте додамо скрипти до вашого шаблону. Відкрийте файл app/views/layouts/application.html.erb і додайте наступний код перед закриваючим тегом </body>:

<%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>
<%= stylesheet_link_tag 'application', 'data-turbo-track': 'reload' %>

Це підключить ваші зібрані файли JavaScript та CSS до вашого додатку.

Крок 7: Запуск проекту

Тепер, коли все налаштовано, ви можете запустити ваш проект Rails:

rails server

Відкрийте браузер і перейдіть за адресою http://localhost:3000. Ви повинні побачити ваш новий проект Rails, готовий до роботи з Esbuild та TailwindCSS!

Крок 8: Додаткові налаштування

Ви можете налаштувати TailwindCSS відповідно до ваших потреб, додаючи нові кольори, шрифти та інші стилі у файл tailwind.config.js. Також, ви можете використовувати плагіни TailwindCSS для розширення функціональності.

Висновок

У цьому посібнику ми розглянули, як налаштувати проект Rails з Esbuild та TailwindCSS. Цей підхід дозволяє створювати швидкі та стильні веб-додатки, використовуючи сучасні інструменти. Тепер ви готові розпочати свій проект і експериментувати з можливостями, які надають ці технології!

Не забувайте, що спільнота Ruby on Rails та TailwindCSS завжди готова допомогти вам у вашій подорожі. Успіхів у розробці!