Nouveau projet Rails – Démarrer un nouveau projet Ruby ou React

Introduction à Webpack

Avant de démarrer un nouveau projet dans Rails, attardons-nous un peu sur l’outil Webpack. Il est ce que l’on appelle un bundler, il construit des paquets qui forment l’application Web.

Les bundles sont des fichiers Javascript.

Avant la version 5.1 de Ruby on Rails, on peut dire que les développeurs avaient une relation controversée avec l’utilisation de Javascript. C’était avant l’arrivée de l’ES6 où le langage à simplifier certains aspects dans la programmation Javascript.

Depuis la version 5.1 et l’intégration de Webpack dans Rails, vous avez le choix d’utiliser Ruby, React, Angular et Vue.js

Pour consulter la documentation de Wepack de Rails, cliquez ICI

Démarrons notre nouveau projet Ruby on Rails

Créez votre nouveau projet en utilisant l’option –webpack

$ rails new helloworld --webpack

Allez dans votre nouveau projet

$ cd helloworld

Finalisez l’installation

$ bundle exec rake webpacker:install

Une fois l’installation terminée, voici les répertoires et fichiers qui viennent d’être créés

nouveau projet rails : fichiers créés par Webpack

Vous pouvez déjà tester avec la commande rails s depuis votre terminal et ouvrez votre navigateur web pour entrer localhost:3000 dans l’url. Vous pouvez constater que dans votre nouveau projet Rails fonctionne

$ rails s
nouveau projet rails : premier lancement

Afficher un Hello World

Éditez votre code à l’aide d’un éditeur de code. Pour installer l’éditeur de code Sublime Text, cliquez ICI

Remplacez les lignes suivantes du fichier application.html.erb depuis app/views/layout

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

par :

<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>

Avant de continuer, je vais brièvement vous expliquer comment fonctionne l’application :

  • Chaque requête de l’application web est servit par une méthode ou action (CRUD, pour Create, Read, Update et Delete). Elles sont définit dans le fichier controllers.
  • Les méthodes ou actions exécutées définissent ce qui doit être retourné sur la page HTML ( par exemple, un objet JSON )
  • Les routes définissent la requête (GET, POST, PUT/PATCH, DELETE) associée à la méthode ou action du controller depuis le fichier routes.rb

Créez votre contrôleur nommé messages

$ spring stop
$ rails generate controller messages home

La règle est de mettre toujours au pluriel le nom de votre contrôleur et j’ajoute à la fin de la commande “home” pour qu’il créé automatiquement la méthode dans le contrôleur. Ouvrez le fichier messages_controller.rb pour vérifier depuis app/controllers/

Vous avez pu constater que le fichier pages_controller.rb vient d’être créé depuis app/controllers

Les fichiers créés suite à la génération du controleur

Ouvrez le fichier messages_controller.rb pour avoir le code suivant :

# app/controllers/messages_controller.rb
class MessagesController < ApplicationController
     def home
         @message = "Hello World from controller"
     end
 end

Créez le fichier home.html.erb depuis app/views/messages/

# app/views/messages/home.html.erb
<h1><%= @message %></h1>

Pour finir, ouvrez le fichier routes.rb depuis config/

# config/routes.rb
Rails.application.routes.draw do
   root 'messages#home'
end

Affichez les routes grâce à la commande rails routes depuis votre terminal

Pour vérifier les routes configurées dans votre application, depuis votre terminal, tapez rails routes

$ rails routes
rails routes
HTTPCheminControleur#ActionUtilisé pour
GET /messages#homeAfficher une liste de tous les messages

Pour aller plus loin dans le système de routage de Rails, cliquez ICI

Vous pouvez vérifier le résultat à l’aide de rails s et localhost:3000 depuis navigateur

Hello World sous Ruby on Rails
Gif Ruby on Rails applaudissement

Démarrons notre nouveau projet React on Rails

Créez votre nouveau projet mais cette fois-ci avec React

$ rails new helloworld --webpack=react

Allez dans votre nouveau projet

$ cd hello world

Voici les fichiers créés depuis le dossier javascript/packs/

javascript directory with React

Créez votre contrôleur nommé messages

$ spring stop
$ rails g controller messages home

Vous pouvez constater qu’au lieu de renoter generate en toute lettre, il est possible d’utiliser le raccourci g, pratique, non ?

Editez le fichier hello_react.jsx et remplacez le code par défaut depuis app/javascript/ avec le code suivant :

/* app/javascript/hello_react.jsx */
import React from 'react'
import ReactDOM from 'react-dom'
class Hello extends React.Component {
  render () {
    return (
      <div><h1>Hello World</h1></div>
    ) 
  } 
} 

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello/>,
    document.body.appendChild(document.createElement('div')),
  )
})

Ajoutez le code suivant à notre vue home.html.erb depuis /views/messages/home.html.erb/

# app/views/messages/home.html.erb 
<h1><%= javascript_pack_tag 'hello_react' %></h1>

Pour finir, ouvrez le fichier routes.rb depuis config/

# config/routes.rb
Rails.application.routes.draw do
   root 'messages#home'
end

Vous pouvez vérifier le résultat à l’aide de rails s et localhost:3000 depuis votre navigateur

Hello world with React
gif React on Rails applaudissement

Sources

https://github.com/rails/webpacker

https://guides.rubyonrails.org/routing.html

signature Pierre-Christophe

Aucun commentaires

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.