Si no sabes como agregar bootstrap a través de nodejs por npm y configurar Vite en servidor Ubuntu 22.04, esto te servirá.
Indice del artículo
NODEJS
Ideado como un entorno de ejecución de JavaScript orientado a eventos asíncronos, Node.js está diseñado para crear aplicaciones network escalables.
Es algo tan simple como eso y realmente te ayuda, ya que cuenta con muchos scripts ya previamente diseñados en su rama.
INSTALANDO BOOTSTRAP
Todos ya sabemos que bootstrap nos permite poder ahorrar trabajo con estilos css, ya que vienen prediseñados.
Ya desde hace mucho tiempo que bootstrap, se puede instalar a traves de nodejs y no es complicado, ya que podemos usar la terminal para realizar los procesos.
Nosotros ya constamos con Nodejs v.18 instalado en nuestro sistema de Ubuntu 22.04, si no lo has echo aún, puedes visitar este artículo, donde instalamos Nodejs en Ubuntu.
Ahora, dentro de la terminal, que puede ser tu shell o a través de Visual Studio Code, debes ingresar a la carpeta de tu proyecto creado.
La carpeta donde tenemos el proyecto /var/www/crud, instalaremos bootstrap a través de npm:
npm i bootstrap --save-devPorque colocamos –save-dev, este comando nos permite instalar este modulo solo dentro de nuestro proyecto y no de forma global, ya que a veces solo necesitamos una sola y no todas de node_modules.
AGREGANDO BOOTSTRAP A VITE
Existen dos archivos importante en vite, que son, el app.css y app.js.
En app.css, importarás todos tus archivos css que crees, ya que este es el archivo principal que Vite toma por defecto para realizar las compilaciones que dejará en la carpeta Build de tu public.
En app.js, realiza el mismo proceso que app.css, pero con archivos js, acá dejarás todos tus archivo javascript, personalizados, que después podrás llamar dentro de tus hojas que mostrarás en pantalla.
AGREGANDO CSS DE BOOTSTRAP
Por lo tanto, abrimos el archivo app.css que se encuentra en la carpeta resources/css. y agregamos la siguiente línea al código, de nuestro app.css
@import '../../node-modules/bootstrap/dist/css/bootstrap.min.css';AGREGANDO JS DE BOOSTRAP
El proceso es el mismo al caso anterior, solo que cambiamos de carpeta y de archivo, ahora abre el siguiente archivo resources/js/app.js
Ahora procede a agregar la siguiente línea al archivo app.js
import as * bootstrap from '../../node-modules/bootstrap';Si se te presenta el problema con las nuevas versiones de bootstrap, a que este proyecto esta bajo la 5.2.x, realiza el siguiente cambio de línea, invierte el as con el *
import * as bootstrap from '../../node_modules/bootstrap';AGREGANDO VITE A NUESTRO PROYECTO
No es tan complicado agregar vite a nuestro proyecto, solo basta, con abrir la hoja principal de nuestro html u hoja que vayas a usar y dentro de las etiquetas head, coloca lo siguiente:
@vite(['resources/css/app.css'],['resources/js/app.js'])Ya con eso tenemos agregado nuestro vite con bootstrap en nuestro proyecto, ahora solo hagamos correr vite, para que de forma automática este refresque la pagina.
npm run devAhora solo debes abrir el navegador con la dirección http://crud.test, que hemos creado en el artículo anterior.
Hasta pronto.