So richten Sie ein Rails-Projekt mit Esbuild und TailwindCSS ein

In der heutigen Webentwicklung sind Rails, Esbuild und TailwindCSS beliebte Werkzeuge, die Entwicklern helfen, leistungsstarke und ansprechende Anwendungen zu erstellen. In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie ein neues Rails-Projekt mit Esbuild und TailwindCSS einrichten können. Egal, ob Sie ein erfahrener Entwickler oder ein Neuling sind, dieser Leitfaden wird Ihnen helfen, die Grundlagen zu verstehen und Ihre Anwendung schnell zum Laufen zu bringen.

Was sind Rails, Esbuild und TailwindCSS?

Bevor wir mit der Einrichtung beginnen, lassen Sie uns kurz die drei Technologien vorstellen:

Rails: Ruby on Rails ist ein beliebtes Webanwendungs-Framework, das die Entwicklung von Datenbankanwendungen erleichtert. Es folgt dem MVC-Architekturmuster (Model-View-Controller) und bietet viele integrierte Funktionen.
Esbuild: Esbuild ist ein extrem schneller JavaScript-Bundler und -Minifier. Es ist bekannt für seine Geschwindigkeit und Effizienz, was es zu einer großartigen Wahl für moderne Webanwendungen macht.
TailwindCSS: TailwindCSS ist ein Utility-First-CSS-Framework, das es Entwicklern ermöglicht, benutzerdefinierte Designs schnell zu erstellen, ohne sich um die Erstellung von CSS-Klassen kümmern zu müssen.

Schritt 1: Ein neues Rails-Projekt erstellen

Um ein neues Rails-Projekt zu erstellen, benötigen Sie Ruby und Rails auf Ihrem System installiert. Wenn Sie dies noch nicht getan haben, können Sie die offizielle Ruby-Website besuchen, um Ruby zu installieren, und dann Rails mit dem folgenden Befehl installieren:

gem install rails

Nachdem Sie Rails installiert haben, können Sie ein neues Projekt mit dem folgenden Befehl erstellen:

rails new mein_projekt

Wechseln Sie in das neu erstellte Verzeichnis:

cd mein_projekt

Schritt 2: Esbuild installieren

Um Esbuild in Ihrem Rails-Projekt zu verwenden, müssen Sie es als Abhängigkeit hinzufügen. Fügen Sie die folgende Zeile zu Ihrer Gemfile hinzu:

gem 'esbuild', '~> 0.14.0'

Führen Sie dann den folgenden Befehl aus, um die Abhängigkeiten zu installieren:

bundle install

Jetzt müssen wir Esbuild konfigurieren. Erstellen Sie eine Datei namens esbuild.config.js im Stammverzeichnis Ihres Projekts und fügen Sie den folgenden Code hinzu:

const esbuild = require('esbuild');

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

Um Esbuild auszuführen, fügen Sie das folgende Skript zu Ihrer package.json hinzu:

"scripts": {
  "build": "node esbuild.config.js"
}

Jetzt können Sie Esbuild mit dem folgenden Befehl ausführen:

npm run build

Schritt 3: TailwindCSS installieren

Um TailwindCSS in Ihrem Projekt zu verwenden, müssen Sie es ebenfalls installieren. Führen Sie die folgenden Befehle aus, um TailwindCSS und seine Abhängigkeiten zu installieren:

npm install tailwindcss postcss autoprefixer

Erstellen Sie dann eine Konfigurationsdatei für TailwindCSS:

npx tailwindcss init -p

Dies erstellt zwei Dateien: tailwind.config.js und postcss.config.js. Öffnen Sie die tailwind.config.js und fügen Sie die folgenden Inhalte hinzu:

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

Jetzt müssen wir TailwindCSS in unsere CSS-Datei importieren. Erstellen Sie eine Datei namens application.css im Verzeichnis app/assets/stylesheets und fügen Sie die folgenden Zeilen hinzu:

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

Schritt 4: Anwendung starten

Jetzt, da wir alles eingerichtet haben, können wir unsere Rails-Anwendung starten. Führen Sie den folgenden Befehl aus:

rails server

Öffnen Sie Ihren Webbrowser und navigieren Sie zu http://localhost:3000. Sie sollten die Standard-Rails-Startseite sehen.

Schritt 5: TailwindCSS verwenden

Um TailwindCSS in Ihrer Anwendung zu verwenden, können Sie einfach die Utility-Klassen in Ihren HTML-Dateien verwenden. Hier ist ein einfaches Beispiel für eine Komponente, die Sie in Ihrer app/views/layouts/application.html.erb hinzufügen können:

<div class="bg-blue-500 text-white p-4">
  <h1 class="text-2xl font-bold">Willkommen zu meiner Rails-Anwendung!</h1>
  <p>Dies ist ein Beispiel für die Verwendung von TailwindCSS.</p>
</div>

Speichern Sie die Datei und aktualisieren Sie die Seite in Ihrem Browser. Sie sollten die Änderungen sofort sehen!

Schritt 6: Automatisierung der Builds

Um den Entwicklungsprozess zu erleichtern, können Sie Esbuild so konfigurieren, dass es automatisch bei Änderungen an Ihren JavaScript- oder CSS-Dateien neu gebaut wird. Fügen Sie das folgende Skript zu Ihrer package.json hinzu:

"scripts": {
  "build": "node esbuild.config.js",
  "watch": "node esbuild.config.js --watch"
}

Jetzt können Sie den Befehl npm run watch ausführen, um Esbuild im Überwachungsmodus zu starten. Es wird automatisch neu gebaut, wenn Sie Änderungen an Ihren Dateien vornehmen.

Fazit

Herzlichen Glückwunsch! Sie haben erfolgreich ein Rails-Projekt mit Esbuild und TailwindCSS eingerichtet. Diese Kombination ermöglicht es Ihnen, moderne, reaktionsschnelle Webanwendungen schnell und effizient zu entwickeln. Experimentieren Sie mit TailwindCSS, um Ihre Designs zu verfeinern, und nutzen Sie die Geschwindigkeit von Esbuild, um Ihre JavaScript-Dateien zu optimieren.

Wir hoffen, dass dieser Leitfaden hilfreich war und Ihnen den Einstieg erleichtert hat. Viel Spaß beim Programmieren!