Como integrar Ruby on Rails 5 y Bootstrap 4

7 minuto(s)

Demo Github

Un proyecto desarrollado con Ruby on Rails, en ocasiones es necesario hacerlo Adaptable a todos los dispositivos o diferentes pantallas, esto es parte de mejorar la experiencia del usuario, ya sea una página de administrador o una página pública, así lograrás hacer tu proyecto más atractivo y los usuarios se sentirán cómodos visualmente en tu plataforma. Existen muchas formas de hacer adaptable la vista de un proyecto desarrollado con RoR (Ruby on Rails), para este caso usaremos Bootstrap 4, vayamos con este tutorial.

Si no conoces sobre Ruby on Rails, te recomendamos leer nuestro artículo Que es Ruby on Rails (RoR) y otros detalles para que estés familiarizado con este tutorial.

Usaremos la vista por defecto que RoR (Ruby on Rails) nos muestra al crear nuestro primer proyecto

Ahora instanciaremos o desplegaremos las librerías CSS y Javascript de Bootstrap 4 en Ruby on Rails.

Podemos desplegar Bootstrap 4 en RoR usando una gema que nos organiza todo el entorno para que solo llamemos a los archivos de Bootstrap y usarlos directamente.

Bootstrap Ruby Gem

Haremos uso de la gema Bootstrap Ruby Gem que nos instalará Bootstrap 4 junto con ciertas librerías necesarias para su correcto funcionamiento. Abre el archivo Gemfile que se encuentra en el directorio principal de tu proyecto y pega la siguiente linea que tiene la versión 4.3.1 hasta la fecha de este tutorial, la versión obviamente puede cambiar en futuras versiones de esta gema


Debería quedarte de la siguiente manera a continuación esa resaltada la línea de la gema a instalar

Ahora ve a tu consola de comandos y ejecuta el comando bundle install para proceder a instalar la gema de Bootstrap, este comando ejecútalo en el directorio principal de tu proyecto creado con RoR


Bien para que Bootstrap funcione sin problemas, debemos de instalar jQuery en nuestro proyecto, para esto ve de nuevo a tu archivo Gemfile y agrega la siguiente línea


Debería quedarte de la siguiente manera, lo ponemos debajo de la línea de la gema Bootstrap

Luego ejecutamos el comando bundle install para instalar la gema de jQuery


Paso seguido ve al archivo application.js que se encuentra en la ruta app/assets/javascript/application.js y agrega las siguientes lineas


Con estas 3 líneas llamamos a jQuery 3, la librería Popper.js que se instalo cuando instalamos la gema de Bootstrap y  la última línea llama a los archivos Javascript de Bootstrap 4, debería quedarte así

Excelente, con los pasos anteriores colocamos los archivos necesarios para que podamos usar Bootstrap 4 sin problemas, llamamos a los archivos CSS en el archivo application.css y a los archivos Javascript en el archivo application.js

En este punto vamos a seguir las buenas practicas de Rails, es decir no crearemos un archivo manualmente para crear la página o vista con Bootstrap, vamos  a crear un controlador llamado bienvenido, para crear este controlador ejecutamos el siguiente comando en nuestra consola de comandos


Ruby on Rails no solo nos crea el controlador llamado bienvenido, si no que también nos crea la vista, el helper, un archivo Javascript y otro archivo SCSS. Si no sabes que es SCSS te recomendamos leer nuestro artículo Que es SASS y tus Primeros Pasos con esta herramienta y tengas más claro este concepto.

Ruby on Rails también generó la ruta de la vista bienvenida, vamos al archivo de rutas llamado routes.rb y definimos como root o principal a la ruta que apunta a la vista bienvenido


Paso seguido tenemos que editar 2 archivos de nuestra vista, uno es el archivo layout llamado application.html.erb, este archivo se encuentra en la carpeta app/views/layouts/application.html.erb agregamos lo siguiente, lee los comentarios del código porque explicamos que hacen ciertas líneas importantes


El otro archivo es el archivo de la vista llamado index.erb, este archivo lo puedes encontrar en la carpeta app/views/bienvenido/index.erb y agregaremos los siguientes elementos de Bootstrap 4 como un menú, un botón, encabezado h1 y h2, entre otros elementos.


Como ya tienes Bootstrap instalado, tu puedes agregar los elementos de Bootstrap 4 que desees.

Por ultimo Al crear el controlador bienvenido, RoR nos creo un archivo SCSS llamado bienvenido.scss , este archivo lo puedes encontrar en la carpeta app/assets/stylesheet/bienvenido.scss agrega el siguiente import para llamar al archivo CSS de Bootstrap 4


Y el otro archivo se llama bienvenido.coffee el cual lo puedes encontrar en la carpeta app/assets/javascripts/bienvenido.coffe en este archivo llamamos a los archivos Javascript de las librerías que son jQuery 3, Popper y Bootstrap 4


Bien, si todo esta correcto, ejecutamos el proyecto, para esto ejecutamos el servidor de RoR mediante el siguiente comando


Nos debe de cargar nuestra vista creada con Ruby on Rails e integrado con Bootstrap 4

Bootstrap 4 Manualmente

La otra manera es descargar los archivos de Bootstrap 4 desde su página oficial y colocar los archivos en la carpeta public, dentro de esta carpeta creamos 2 carpetas una llamada css y otra llamada js en estas carpetas colocaremos los archivos según correspondan.

Debes de seguir los pasos anteriores tal cual, solo obvia lo de la gema de Bootstrap y la gema jQuery.

Estos archivos debemos de llamarlos en el layout de tu vista por ejemplo


Sencillamente al cargar la página el navegador va detectar los archivos de las carpetas css y js que se encuentran en la carpeta public y renderizará los elementos como botones, formularios, encabezados, etc. que creaste en tu vista, estos elementos tienen una clase que es detectada por Bootstrap y sabrá aplicarle las propiedades respectivas.

Notas

  • Los pasos mencionados en ese tutorial pueden cambiar en el futuro, esto no depende de nosotros si no de los desarrolladores que dan soporte a Ruby on Rails y a las Gemas.
  • Al inicio de este tutorial puede ver la Demo con el resultado final.
  • Habiendo instalado Bootstrap 4 en RoR, puedes crear muchos elementos como Cards, Acordeones, Sliders, Alertas, etc. podrás usar todos los elementos que necesites usar de Bootstrap 4

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.