New Rails project – Start a new Ruby or React project

Introduction to Webpack

Before starting a new project in Rails, let’s take a look at the Webpack tool. It is what is called a bundler, it builds packages that form the Web application.

Bundles are Javascript files.

Before Ruby on Rails version 5.1, it can be said that developers had a controversial relationship with the use of Javascript. This was before the arrival of ES6 where the language simplified some aspects in Javascript programming.

To consult the documentation of the Rails Wepack, click HERE

Let’s start our new Ruby on Rails project

Create your new project using the –webpack option

 $ rails new helloworld --webpack 

Go to your new project

 $ cd helloworld 

Finalize the installation

 $ bundle exec rake webpacker:install 

Once the installation is complete, here are the directories and files that have just been created

You can already test with the rails s command from your device and open your web browser to enter localhost:3000 in the url. You can see that in your new Rails project works

 $ rails s

Post a Hello World

Edit your code using a code editor. To install the Sublime Text code editor, click HERE

Replace the following lines in the application.html.erb file from app/views/layout

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

with :

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

Before continuing, I will briefly explain how the application works :

  • Each request of the web application is served by a method or action (CRUD, for Create, Read, Update and Delete). They are defined in the controllers file.
  • The methods or actions executed define what should be returned on the HTML page (for example, a JSON object)
  • Routes define the request (GET, POST, PUT/PATCH, DELETE) associated with the controller’s method or action from the routes.rb file

Create your controller named messages

$ spring stop
$ rails generate controller messages home 

The rule is always to put the name of your controller in the plural and I add at the end of the command “home” so that it automatically creates the method in the controller. Open the file messages_controller.rb to check from app/controllers/

You have noticed that the file pages_controller.rb has just been created from app/controllers

Open the file messages_controller.rb to get the following code :

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

Create the file home.html.erb from app/views/messages/

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

Finally, open the routes.rb file from config/

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

Display routes with the rails routes command from your terminal

HTTP PathController#ActionUsed for
GET/ messages#home display a list of all messages

To go further in the Rails routing system, click HERE

You can check the result using rails s and localhost:3000 rails from the browser

Let’s start our new React on Rails project

Create your new project but this time with React

$ rails new helloworld --webpack=react 

Go to your new project

$ cd hello world 

Here are the files created from the javascript/packs/ folder

Create your controller named messages

$ spring stop
$ rails g controller messages home 

You can see that instead of renoting generate in any letter, it is possible to use the shortcut g, convenient, right ?

Edit the hello_react.jsx file and replace the default code from app/javascript/ with the following code :

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

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

Add the following code to our home.html.erb view from /views/messages/home.html.erb/

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

Finally, open the routes.rb file from config/

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

You can check the result using rails s and localhost:3000 from your browser

Sources

https://github.com/rails/webpacker

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

signature Pierre-Christophe

No Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.