Comment Configurer un Projet Rails avec Esbuild et TailwindCSS

Dans cet article, nous allons explorer comment configurer un projet Ruby on Rails en utilisant Esbuild pour le bundling JavaScript et TailwindCSS pour le stylisme. Cette combinaison moderne vous permettra de créer des applications web réactives et élégantes. Suivez les étapes ci-dessous pour mettre en place votre environnement de développement.

Prérequis

Avant de commencer, assurez-vous d'avoir les éléments suivants installés sur votre machine :

Ruby (version 2.7 ou supérieure)
Rails (version 6.0 ou supérieure)
Node.js (version 14 ou supérieure)
Yarn (pour la gestion des paquets JavaScript)

Étape 1 : Créer un nouveau projet Rails

Pour commencer, ouvrez votre terminal et exécutez la commande suivante pour créer un nouveau projet Rails :

rails new mon_projet --skip-javascript

Nous utilisons l'option --skip-javascript car nous allons configurer Esbuild manuellement.

Étape 2 : Installer Esbuild

Une fois votre projet créé, naviguez dans le répertoire de votre projet :

cd mon_projet

Ensuite, ajoutez Esbuild à votre projet en utilisant Yarn :

yarn add esbuild --dev

Après cela, vous devez créer un fichier de configuration pour Esbuild. Créez un fichier nommé esbuild.config.js à la racine de votre projet :

touch esbuild.config.js

Ouvrez ce fichier et ajoutez le code suivant :

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['./app/javascript/application.js'],
  bundle: true,
  outdir: './app/assets/builds',
  sourcemap: true,
  watch: process.argv.includes('--watch'),
}).catch(() => process.exit(1));

Ce code configure Esbuild pour prendre application.js comme point d'entrée et générer le bundle dans le répertoire app/assets/builds.

Étape 3 : Configurer le fichier JavaScript

Créez le répertoire javascript dans app/assets et un fichier application.js à l'intérieur :

mkdir -p app/javascript && touch app/javascript/application.js

Ajoutez le code suivant dans application.js :

import '../stylesheets/application.css';

Étape 4 : Installer TailwindCSS

Pour installer TailwindCSS, exécutez la commande suivante :

yarn add tailwindcss postcss autoprefixer

Ensuite, initialisez TailwindCSS en exécutant :

npx tailwindcss init -p

Cela créera deux fichiers : tailwind.config.js et postcss.config.js.

Étape 5 : Configurer TailwindCSS

Ouvrez le fichier tailwind.config.js et modifiez-le pour inclure les chemins de vos fichiers :

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

Ensuite, créez un fichier CSS pour Tailwind. Créez un fichier nommé application.css dans app/assets/stylesheets :

mkdir -p app/assets/stylesheets && touch app/assets/stylesheets/application.css

Ajoutez les directives TailwindCSS suivantes dans application.css :

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

Étape 6 : Mettre à jour le fichier layout

Ouvrez le fichier de layout principal, généralement situé dans app/views/layouts/application.html.erb, et ajoutez les lignes suivantes pour inclure le CSS et le JavaScript :

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

Étape 7 : Compiler les fichiers

Pour compiler vos fichiers JavaScript et CSS, exécutez la commande suivante dans votre terminal :

node esbuild.config.js

Si vous souhaitez que le processus de compilation se fasse en continu, vous pouvez ajouter l'option --watch :

node esbuild.config.js --watch

Étape 8 : Démarrer le serveur Rails

Maintenant que tout est configuré, vous pouvez démarrer votre serveur Rails :

rails server

Visitez http://localhost:3000 dans votre navigateur pour voir votre application en action.

Étape 9 : Ajouter des styles avec TailwindCSS

Vous pouvez maintenant commencer à utiliser TailwindCSS dans vos fichiers HTML. Par exemple, modifiez le fichier app/views/welcome/index.html.erb pour ajouter quelques styles :

<h1 class="text-3xl font-bold underline">Bienvenue dans mon projet Rails avec TailwindCSS!</h1>

Conclusion

Félicitations ! Vous avez réussi à configurer un projet Rails avec Esbuild et TailwindCSS. Cette configuration vous permet de bénéficier d'un développement rapide et d'une personnalisation facile de votre interface utilisateur. N'hésitez pas à explorer davantage les fonctionnalités d'Esbuild et de TailwindCSS pour améliorer votre projet.

Si vous avez des questions ou des commentaires, n'hésitez pas à les partager ci-dessous. Bonne programmation !