Customiser son template rails
Rails arrive avec beaucoup de choses dans la boite mais vous voulez peut-être changer quelques options par défaut Voici quelques unes de mes modifications.
Hypothèses
- Ruby 3.1.0
- Rails 7.0.2
- Vous avez créé votre application avec rails new app_name
Les essentiels
SASS
Run
./bin/bundle add dartsass-rails
./bin/rails dartsass:install
Tailwind CSS
Run
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install
warning : a faire avant de mettre haml et d’effacer application.html.erb
Redis pour Turbo
Turbo est maintenant configuré de base dans une app Rails 7.
Si vous voulez découvrir : Turbo
Vous pouvez utiliser Redis pour TurboStream, qui utilise ActionCable. (le Pourquoi : Turbo-Rails)
run rails turbo:install:redis
Il faut alors aussi lancer Redis avec votre Procfile
# Procfile.dev
redis: redis-server /usr/local/etc/redis.conf
J’assume que vous avez déjà Redis installé. Sinon c’est ici
HAML à la place de ERB
Ajouter le gem haml à votre gemfile
./bin/bundle add haml-rails
les fichiers en .html.haml sont automatiquement reconnus et transcrit
ViewComponent
./bin/bundle add view_component
et pour creer vos component
./bin/rails generate component MyComponent --stimulus --sidecar
personnellement j’utilise ces deux options pour :
- avoir automatiquement le controller stimulus
- tous dans un seul repertoire
il faut penser a modifier config/tailwind.config.js pour prendre en compte les view dans les components
module.exports = {
content: [
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*',
'./app/components/**/*'
],
Ajouter des librairies javascript
rails 7 vient avec le nouveau concept d’importmap pour remplacer les differents webpack, rollup et autres. toutes les explications ici : (https://github.com/rails/importmap-rails) c’est un changement radical dans la gestion de vos packages. si comme moi vous n’êtes pas un spécialiste, c’est beaucoup beaucoup beaucoup moins de travail pour configurer une app optimisée. pour resumer, vous voulez par exemple ajouter swiper.js pour faire de beaux carousels et l’initialiser dans un controller stimulus
./bin/importmap pin swiper
va ajouter swiper dans votre importmap des que vous en avez besoin dans votre controller ou votre js
import Swiper from "swiper"
et voila le tour est joué. pas besoin de babel, uglify et autre.
attention,
-
le package doit être ESM
-
le browser en face doit etre compatible ESM
###Sidekiq ajouter sidekiq a votre gemfile
./bin/bundle add sidekiq
Il y a deux façons de créer des jobs
- A la sidekiq
rails generate sidekiq:job hard
le getting started (https://github.com/mperham/sidekiq/wiki/Getting-Started)
- A la action job
./bin/rails generate job mon_job
il faut alors penser a configurer le backend en ajoutant
# config/application.rb`
config.active_job.queue_adapter = :sidekiq
le détail ici : (https://github.com/mperham/sidekiq/wiki/Active-Job) L’avantage pour moi est la possibilité d’utiliser le Global ID. On peut alors passer des objets en argument alors qu’on est limité à des chaines de caracteres dans la version sidekiq.
Dans tous les cas il faudra lancer sidekiq dans votre procfile en y ajoutant quelque chose du genre
# Procfile.dev
sidekiq: RAILS_MAX_THREADS=3 bundle exec sidekiq
Les Bonus
Kredis
décocher le gem dans votre fichier Gemfile
./bin/bundle add kredis
./bin/bundle install
./bin/rails kredis:install
(https://github.com/rails/kredis)
Rubocop
(https://github.com/rubocop/rubocop)
Le fond c’est d’avoir une app qui fonctionne, la forme c’est qu’elle soit ‘maintenable’ et ‘performante’.
Rubocop réalise une analyse statique de votre code en accord avec les règles de style Ruby et Rails (et plus).
D’ailleurs si vous programmez en Ruby, je vous conseille de lire (https://rubystyle.guide/)
C’est une mine d’information.
FriendlyId
(https://github.com/norman/friendly_id)
Si vous voulez des liens qui soient compréhensibles par le commun des mortels et pas des users/230984/dashboard/13480-fajlsed9.
Alors ce gem est pour vous.
StimulusReflex
ViewComponentReflex
Templates
DaisyUI
(https://daisyui.com/)
C’est une librairie CSS de composants basée sur tailwindcss. C’en est d’ailleurs un plugin.
Pour l’instant (le 28/02/2022) si vous avez fait le choix des importmap dans Rails 7 et de tailwind, comme décrit plus haut, vous ne pourrez pas customiser votre config tailwind avec d’autres plugins venant de npm.
Il faut faire une installation classique avec transpiler / compiler qui va associer le tout :(. Cela veut dire installer webpack ou vite…
L’idéal (pour moi) serait donc de reconstruire une librairie de composants sous forme de ViewComponent. (affaire à suivre)
Tailwind UI Kit
(https://www.tailwind-kit.com/)
Autre librairie de composants.
C’est du pur tailwind / html. Vous allez sur le site et vous copiez/collez le composant qui vous plait. Pas de problème d’importmap ici.
Related readings
(https://hackernoon.com/a-template-for-starting-new-projects-on-ruby-on-rails-t66c36iz)