Hoe een Rails-project op te zetten met Esbuild en TailwindCSS

In de wereld van webontwikkeling zijn Ruby on Rails, Esbuild en TailwindCSS krachtige tools die samen een geweldige ontwikkelervaring kunnen bieden. In dit artikel zullen we stap voor stap door het proces gaan om een nieuw Rails-project op te zetten met Esbuild als bundler en TailwindCSS voor de styling. Of je nu een beginner bent of een ervaren ontwikkelaar, deze gids is ontworpen om je te helpen bij het opzetten van je project op een vriendelijke en informatieve manier.

Wat zijn de vereisten?

Voordat we beginnen, zijn er een paar dingen die je moet hebben geïnstalleerd op je computer:

Ruby: Zorg ervoor dat je Ruby geïnstalleerd hebt. Je kunt dit controleren met het commando ruby -v.
Rails: Installeer Rails als je dat nog niet hebt gedaan met gem install rails.
Node.js: Esbuild vereist Node.js. Controleer of je het hebt geïnstalleerd met node -v.
Yarn: We gebruiken Yarn als pakketbeheerder. Installeer het met npm install --global yarn.

Stap 1: Maak een nieuw Rails-project aan

We beginnen met het aanmaken van een nieuw Rails-project. Open je terminal en voer het volgende commando uit:

rails new mijn_project --skip-javascript

Hiermee maken we een nieuw Rails-project aan met de naam "mijn_project" en slaan we de standaard JavaScript-configuratie over, omdat we Esbuild gaan gebruiken.

Stap 2: Navigeer naar je projectmap

Ga naar de map van je nieuwe project:

cd mijn_project

Stap 3: Installeer Esbuild

Nu gaan we Esbuild installeren. Voer het volgende commando uit in je terminal:

yarn add esbuild --dev

Dit voegt Esbuild toe aan je project als een ontwikkelingsafhankelijkheid.

Stap 4: Configureer Esbuild

Maak een nieuwe map aan voor je JavaScript-bestanden:

mkdir app/javascript

Maak vervolgens een bestand aan genaamd esbuild.config.js in de hoofdmap van je project:

touch esbuild.config.js

Open esbuild.config.js en voeg de volgende configuratie toe:

const esbuild = require('esbuild');

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

Deze configuratie vertelt Esbuild om te kijken naar application.js als het startpunt en de gebundelde bestanden op te slaan in de map app/assets/builds.

Stap 5: Maak het JavaScript-bestand aan

Nu moeten we het JavaScript-bestand aanmaken dat we in de configuratie hebben genoemd. Maak een nieuw bestand aan:

touch app/javascript/application.js

Voeg de volgende regel toe aan application.js om TailwindCSS te importeren:

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

Stap 6: Installeer TailwindCSS

Nu gaan we TailwindCSS installeren. Voer het volgende commando uit:

yarn add tailwindcss postcss autoprefixer

Dit installeert TailwindCSS samen met PostCSS en Autoprefixer, die we nodig hebben voor de configuratie.

Stap 7: Configureer TailwindCSS

Maak een configuratiebestand voor TailwindCSS aan:

npx tailwindcss init -p

Dit maakt twee bestanden aan: tailwind.config.js en postcss.config.js. Open tailwind.config.js en pas het aan zodat het er als volgt uitziet:

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

Deze configuratie vertelt TailwindCSS waar het moet zoeken naar de HTML- en JavaScript-bestanden om de juiste klassen te genereren.

Stap 8: Maak het CSS-bestand aan

Nu moeten we het CSS-bestand aanmaken dat we in application.js hebben geïmporteerd. Maak een nieuw bestand aan:

mkdir app/stylesheets
touch app/stylesheets/application.css

Voeg de volgende regels toe aan application.css om TailwindCSS te initialiseren:

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

Stap 9: Voeg de gebundelde bestanden toe aan je layout

Open het bestand app/views/layouts/application.html.erb en voeg de volgende regel toe in de <head> sectie om de gebundelde CSS en JavaScript in te voegen:

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

Stap 10: Start de ontwikkelserver

Nu alles is ingesteld, kunnen we de ontwikkelserver starten. Voer het volgende commando uit:

rails server

Open je browser en ga naar http://localhost:3000. Je zou nu je nieuwe Rails-applicatie moeten zien met Esbuild en TailwindCSS ingesteld!

Stap 11: Bundelen en kijken naar wijzigingen

Om Esbuild in de watch-modus te draaien, open je een nieuwe terminal en voer je het volgende commando uit:

node esbuild.config.js --watch

Dit zorgt ervoor dat Esbuild automatisch je bestanden bundelt telkens wanneer je wijzigingen aanbrengt.

Conclusie

Gefeliciteerd! Je hebt met succes een Rails-project opgezet met Esbuild en TailwindCSS. Deze combinatie biedt je een krachtige en flexibele manier om moderne webapplicaties te bouwen. Nu kun je beginnen met het ontwikkelen van je applicatie en genieten van de voordelen van snelle bundeling en een geweldige styling-ervaring met TailwindCSS.

Als je vragen hebt of hulp nodig hebt, aarzel dan niet om hulp te vragen in de community of online forums. Veel succes met je project!