Instalar bootstrap en Laravel y ponerlo en producción

Esta unión la realizamos con vite, una utilidad de front en para compilar y empaquetar código css y js de forma rápida, sencilla y óptima para aplicaciones web.

Esta probado en Laravel 10 para versiones inferiores es posible que funcione, o no?

Menú:

• Crear un proyecto en laravel
• Instalar bootstrap y sass
• Configurar bootstrap en el proyecto
• Crear ficheros de estilos y js personalizados
• Paso a producción

Voy a partir de cero y crearé un nuevo proyecto para que lo primero en este proyecto sea la instalación de bootstrap, partiendo de esta base ya podremos crear el código de nuestra aplicación.

Requisitos indispensables es tener nodejs y composer instalados. Si no los tienes instalados aquí hay una guía para instalar nodejs en linux, instalarlo en windows es … siguiente … siguiente ... e instalar composer podéis seguir estos pasos:

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e21205b207c3ff031906575712edab6f13eb0b361f2085f1f1237b7126d785e826a450292b6cfd1d64d92e6563bbde02') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

Crear un proyecto en laravel

Esto es algo que ya conocemos pero imprescindible para empezar a trabajar por eso lo primero, crear un proyecto, yo lo llamaré larabs

composer create-project laravel/laravel larabs

Una vez creado entramos en el proyecto

cd larabs

Ahora probamos que funcione todo correctamente sin tocar nada más ejecutando el servidor de laravel

php artisan serve

Si ahora vamos al navegador y ponemos la dirección que nos da el comando anterior http://127.0.0.1:8000 tiene que salir la página por defecto welcome de un proyecto de laravel.

Instalar bootstrap y sass

Hecho esto y funcionando toca instalar bootstrap y sass con dos instrucciones npm (por esto os comentaba antes que es requisito tener instalado node)

npm install bootstrap --save-dev
npm install sass --save-dev

Se instala en el entorno de desarrollo por esto lo del --save-dev. En el último apartado veremos como pasarlo a producción y dejarlo todo funcionando.

Cuando se instala bootstrap se crea un nuevo directorio llamado node_modules donde se encuentran los archivos correspondientes a bootstrap.

Ahora vamos a configurarlo todo y dejarlo funcionando.

Configurar bootstrap en el proyecto

Lo primero que hay que hacer es crear una nueva plantilla donde poner nuestro código html con bootstrap y sustituir a welcome.

Ves al directorio resouces/views y crea un fichero llamado index.blade.php y dentro puedes poner, de momento, HOLA MUNDO.

Ahora hay que cambiar la ruta principal para que apunte a esta nueva plantilla, para esto ve al directorio routes y en el fichero web.php cambia la plantilla welcome por la nueva index.

Sustituir esto:

return view('welcome');

por esto:

return view('index');

Para probar que está bien ejecuta el servidor de Laravel desde el terminal y prueba el web,

php artisan serve

en el navegador tendría que HOLA MUNDO.

Una cosa hecha!. Ahora, en el template nuevo resources/views/index.blade.php pon el código de bootstrap, desde el web de bootstrap https://getbootstrap.com/docs/5.3/getting-started/introduction copia el primer código HTML que hay y después se añade una barra de navegación, añádela después de la etiquete body, puedes encontrar aquí el código de la barra: https://getbootstrap.com/docs/5.3/components/navbar, copia el primer código HTML que aparece.

Si quieres ver el código esta en el repositorio que dejo mas abajo.

Y si pruebas el web tiene que salir algo asi de mal:



porque aún no está configurado bootstrap.

Para configurarlo hay que seguir los siguientes pasos:

• Modificar la extensión del fichero resources/css/app.css a .scss, tendría que quedar así resources/css/app.scss. Dentro de este fichero hay que poner la siguiente línea:

  
  @import '~bootstrap/scss/bootstrap'; 
  
  

  
  
• Ahora en el fichero resources/js/app.js hay que borrar la línea que hay y poner la siguiente:

  
  import * as bootstrap from 'bootstrap';
  
  

  
  
• A continuación en el fichero resources/views/index.blade.php hay que cargar los ficheros de bootstrap de la siguiente forma:

  
  @vite([
    'resources/css/app.scss',
    'resources/js/app.js',
   ])
  
  

  
  hay que ponerlo dentro de la etiqueta HEAD.
  
  En realidad esto lo que hace no es solo cargar bootstrap sino todos los ficheros css y js que tengamos en nuestra aplicación pero esto lo veremos en el siguiente apartado.
• Ahora modifica el fichero de configuración de vite, que está en la raíz del proyecto, vite.config.js.
  
  Hay que modificar la extensión del fichero .css como hemos hecho antes con el fichero y dejarlo así: resources/css/app.scss y añadir el siguiente código:

  
  import path from 'path';
  
  

  
  Este ponerlo después de los imports … y

  
  resolve: { alias: { '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap') } },
  
  

  
  y este ponerlo después del apartado plugins … el fichero completo tiene que quedar así:

  
  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import path from 'path';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: [
                  'resources/css/app.scss', 
                  'resources/js/app.js',
              ],
              refresh: true,
          }),
      ],
      resolve: {
          alias: {
              '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
          }
      },
  });
  
  

  
  
• Hechos estos cambios compilamos y probamos ejecutando las siguientes instrucciones:
  

  npm run build

  Esto compilará el código y empaquetara lo necesario para funcionar.
  
  Y ahora ejecuta el servidor para ver los cambios realizados
  

  php artisan serve

  Y ahora ejecuta esta otra instrucción para ver los cambios realizados en el código css y js al momento en el navegador
  

  npm run dev

  Esto tiene que quedarse ejecutando siempre mientras trabajamos por lo que hay que tener una consola con esto siempre abierta.
  
  Y hecho esto vamos a por el último paso en la configuración:

Crear estilos y ficheros js personalizados

Hasta ahora hemos instalado y configurado los ficheros propios de bootstrap … pero … ¿ qué pasa con mis propios ficheros ? "no problemo" está controlado y se puede añadir los que queramos de la siguiente manera.

En el directorio resources/css añade los ficheros de estilos que necesites y en el directorio resources/js añade los ficheros de javascript necesarios.

Los ficheros .css se tienen que añadir en el fichero resources/css/app.scss de la siguiente manera:

@import './styles.css';

El fichero resources/css/app.scss quedará así:



Y los ficheros js se tienen en el fichero resources/js/app.js de la siguiente forma:

import './main';

El fichero resources/js/app.js quedará así:



Y el fichero resources/views/index.blade.php quedará así en su cabecera con la incorporación de los fichero de resources app.js y app.scss que a su vez cargan el resto de ficheros custom que tengamos:



Y si utilizas JQuery como es mi caso hay que incluirlo en el proyecto, en mi caso y para no complicar más el tema lo obtengo de un CDN.

Y el fichero de configuración de vite, vite.config.php queda de la siguiente forma:



Y con esto y “un bizcocho” lo pasamos a producción:

Paso a producción

Este paso suele ir a gustos y no hay una única forma de realizarlo, os voy a contar lo que yo hago para pasar a producción un proyecto de este tipo.

1. Subir el proyecto a Git, github, gitlab o Bitbucket, aquí tenéis el código https://github.com/depruebas/laravel-bootstrap.git
2. Clonar el proyecto en el servidor de producción
3. Crear un virtualhost para darle una url
4. Crear el fichero .env (cp .env.example .env) dentro del proyecto recien clonado
5. Dentro del proyecto ejecutar
   
   
   • compiler install
   • npm install
   • npm run build
   
   
6. Cambiar el APP_KEY del fichero .env, se puede generar automáticamente con el comando:
   

   php artisan key:generate

7. Cambiar permisos al directorio storage para que se pueda escribir:
   
   Cambiar al usuario www-data:www-data
   Permisos 775
   

   sudo chown www-data.www-data storage/ -R
   sudo chmod 775 storage/ -R

8. Probar si funciona.

Y esto es todo, feliz programming
Saludos
Alex.

Si te ha gustado el artículo compartelo en:      

---

---

---

---

---