Importar Bootstrap 5 en Electron.js 6

Electron.js, al ser una aplicación web en sus bases, podemos utilizar todo tipo de librerías, tooltip, etc, como en este caso, es el de Bootstrap:

https://getbootstrap.com/

Para ello, tenemos el siguiente comando que debemos de ejecutar sobre el proyecto en Electron generado anteriormente:

$ npm install bootstrap

Y con el comando anterior, ya tenemos Bootstrap listo en el proyecto, para configurarlo tenemos varias formas, en esta oportunidad, vamos a cargar Bootstrap en base a una importación al mismo en un archivo CSS:

css/index.css

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

El cual usaremos, desde nuestra página html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
   <button class="btn btn-primary">Button</button>
</body>
</html>

Y eso seria todo, ya con esto, podemos utilizar Bootstrap sin problemas, si quieres utilizar otra librería como Tailwind o similares, son los mismos pasos que debes de seguir:

Instalar el paquete en Node
Crear un archivos CSS en el cual coloques las dependencias de la librería
Cargar el archivo anterior en tu archivo HTML.

Lo siguiente que veremos es cómo activar el devtool en el navegador con Electron.js

Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy