Como crear un CRUD con Laravel 10 y Bootstrap 5 – Parte 1

10 minuto(s)

En esta página:

Demo

Una de las mejores formas de aprender a trabajar con Laravel y una base de datos, es mediante tareas CRUD (Create, Read, Update y Delete), traducido al español significan Crear, Leer, Actualizar y Eliminar. Estas tareas son esenciales en todo sistema, aplicación, software, etc. y diria que es muy importante aprender a como hacerlas. Y ya depende del proyecto y el desarrollador, agregar otras funciones adicionales que vayan de la mano con estas tareas. En este Post te enseñaré a Como crear un CRUD con Laravel 10 y Bootstrap 5, vamos con ello.

Partes

Parte 1
Parte 2
Parte 3
Parte 4
Parte 5 (Final – Código Fuente GitHub)

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “¿ Que Hago Si No Tengo Los Recursos Para Dedicarme A La Programación ?” y “Ventajas y Desventajas de Usar 2 o Más Monitores Para un Desarrollador” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como crear un CRUD con Laravel 10 y Bootstrap 5 – Parte 1.

Como crear un CRUD con Laravel 10 y Bootstrap 5

Para crear un nuevo proyecto en Laravel 10, necesitamos tener instalado Composer, es su gestor de dependencias PHP favorito, asi que asegurate de tenerlo instalado. En el siguiente video te enseño a COMO INSTALAR COMPOSER FÁCILMENTE:

También recuerda que debes tener PHP 8.1 como mínimo en tu servidor, para poder ejecutar Laravel 10.

Bien, una ves que ya tenemos instalado composer, antes de crear el proyecto abro mi consola de comandos y ejecuto el siguiente comando para instalar Laravel de manera global:


composer global require laravel/installer 

Changed current directory to C:/Users/jrclu/AppData/Roaming/Composer
Info from https://repo.packagist.org: #StandWithUkraine
./composer.json has been created
Running composer update laravel/installer
Loading composer repositories with package information
Updating dependencies
Lock file operations: 11 installs, 0 updates, 0 removals
  - Locking laravel/installer (v4.3.0)
  - Locking psr/container (2.0.2)
  - Locking symfony/console (v6.2.5)
.....
..... (Continua la instalación en la  terminal) .....
.....

6 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating autoload files
9 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found
Using version ^4.3 for laravel/installer

composer global require laravel/installer

Changed current directory to C:/Users/jrclu/AppData/Roaming/Composer

Info from https://repo.packagist.org: #StandWithUkraine

./composer.json has been created

Running composer update laravel/installer

Loading composer repositories with package information

Updating dependencies

Lock file operations: 11 installs, 0 updates, 0 removals

- Locking laravel/installer (v4.3.0)

- Locking psr/container (2.0.2)

- Locking symfony/console (v6.2.5)

.....

..... (Continua la instalación en la terminal) .....

.....

6 package suggestions were added by new dependencies, use `composer suggest` to see details.

Generating autoload files

9 packages you are using are looking for funding.

Use the `composer fund` command to find out more!

No security vulnerability advisories found

Using version ^4.3 for laravel/installer

Al instalar Laravel de manera Global, posteriormente te va permitir ejecutar comandos y tareas de Laravel desde cualquier lugar por medio de la consola de comandos o terminal.

Nuevo Proyecto

A mi proyecto le daré el nombre crudlaravel10, tu le puedes dar el nombre que desees, para crear un nuevo proyecto ejecuto el siguiente comando en la consola:


laravel new crudlaravel10

   _                               _
  | |                             | |
  | |     __ _ _ __ __ ___   _____| |
  | |    / _` | '__/ _` \ \ / / _ \ |
  | |___| (_| | | | (_| |\ V /  __/ |
  |______\__,_|_|  \__,_| \_/ \___|_|

    Creating a "laravel/laravel" project at "./crudlaravel10"
    Info from https://repo.packagist.org: #StandWithUkraine
    Installing laravel/laravel (v9.5.2)
      - Downloading laravel/laravel (v9.5.2)
      - Installing laravel/laravel (v9.5.2): Extracting archive
    Created project in D:\xampp\htdocs\xampp\nc\tutoriales\blog/crudlaravel10
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
    Loading composer repositories with package information
    Updating dependencies
    Lock file operations: 108 installs, 0 updates, 0 removals
  - Locking brick/math (0.10.2)
  - Locking dflydev/dot-access-data (v3.0.2)
  - Locking doctrine/inflector (2.0.6)
  - Locking doctrine/instantiator (2.0.0)
  - Locking doctrine/lexer (3.0.0)
  - Locking dragonmantank/cron-expression (v3.3.2)
  - Locking egulias/email-validator (4.0.1)
.....
..... (Continua la instalación en la consola) .....
..... 
 - Installing spatie/flare-client-php (1.3.5): Extracting archive
  - Installing spatie/ignition (1.4.3): Extracting archive
  - Installing spatie/laravel-ignition (1.6.4): Extracting archive
    70 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
    > Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.

  laravel/sail .................................................................................................. DONE
  laravel/sanctum ............................................................................................... DONE
  laravel/tinker ................................................................................................ DONE
  nesbot/carbon ................................................................................................. DONE
  nunomaduro/collision .......................................................................................... DONE
  nunomaduro/termwind ........................................................................................... DONE
  spatie/laravel-ignition ....................................................................................... DONE

    82 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
    > @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].

    No security vulnerability advisories found
    > @php artisan key:generate --ansi

   INFO  Application key set successfully.

   INFO  Application ready! Build something amazing.

laravel new crudlaravel10

_ _

| | | |

| | __ _ _ __ __ ___ _____| |

| | / _` | '__/ _` \ \ / / _ \ |

| |___| (_| | | | (_| |\ V / __/ |

|______\__,_|_| \__,_| \_/ \___|_|

Creating a "laravel/laravel" project at "./crudlaravel10"

Info from https://repo.packagist.org: #StandWithUkraine

Installing laravel/laravel (v9.5.2)

- Downloading laravel/laravel (v9.5.2)

- Installing laravel/laravel (v9.5.2): Extracting archive

Created project in D:\xampp\htdocs\xampp\nc\tutoriales\blog/crudlaravel10

> @php -r "file_exists('.env') || copy('.env.example', '.env');"

Loading composer repositories with package information

Updating dependencies

Lock file operations: 108 installs, 0 updates, 0 removals

- Locking brick/math (0.10.2)

- Locking dflydev/dot-access-data (v3.0.2)

- Locking doctrine/inflector (2.0.6)

- Locking doctrine/instantiator (2.0.0)

- Locking doctrine/lexer (3.0.0)

- Locking dragonmantank/cron-expression (v3.3.2)

- Locking egulias/email-validator (4.0.1)

.....

..... (Continua la instalación en la consola) .....

.....

- Installing spatie/flare-client-php (1.3.5): Extracting archive

- Installing spatie/ignition (1.4.3): Extracting archive

- Installing spatie/laravel-ignition (1.6.4): Extracting archive

70 package suggestions were added by new dependencies, use `composer suggest` to see details.

Generating optimized autoload files

> Illuminate\Foundation\ComposerScripts::postAutoloadDump

> @php artisan package:discover --ansi

INFO Discovering packages.

laravel/sail .................................................................................................. DONE

laravel/sanctum ............................................................................................... DONE

laravel/tinker ................................................................................................ DONE

nesbot/carbon ................................................................................................. DONE

nunomaduro/collision .......................................................................................... DONE

nunomaduro/termwind ........................................................................................... DONE

spatie/laravel-ignition ....................................................................................... DONE

82 packages you are using are looking for funding.

Use the `composer fund` command to find out more!

> @php artisan vendor:publish --tag=laravel-assets --ansi --force

INFO No publishable resources for tag [laravel-assets].

No security vulnerability advisories found

> @php artisan key:generate --ansi

INFO Application key set successfully.

INFO Application ready! Build something amazing.

Luego de ejecutar el comando anterior, Laravel me ha creado un directorio con el nombre del proyecto, a mi se me ha creado el directorio crudlaravel10 y dentro de este directorio un conjunto de archivos y directorios necesarios para que el proyecto funcione correctamente:


/crudlaravel10 
    ├── /app
    ├── /bootstrap
    ├── /config
    ├── /database
    ├── /lang 
    ├── /public
    ├── /resources
    ├── /routes
    ├── /storage
    ├── /tests
    ├── /vendor
    ├── .editorconfig
    ├── .env
    ├── .env.example
    ├── .gitattributes
    ├── .gitignore
    ├── artisan
    ├── composer.json
    ├── composer.lock
    ├── package.json
    ├── phpunit.xml
    ├── README.md 
    ├── vite.config

/crudlaravel10

├── /app

├── /bootstrap

├── /config

├── /database

├── /lang

├── /public

├── /resources

├── /routes

├── /storage

├── /tests

├── /vendor

├── .editorconfig

├── .env

├── .env.example

├── .gitattributes

├── .gitignore

├── artisan

├── composer.json

├── composer.lock

├── package.json

├── phpunit.xml

├── README.md

├── vite.config

Para verificar que el proyecto se creo correctamente, ingreso al directorio del proyecto crudlaravel10/ y ejecuto el servidor de laravel desde la consola de comandos:


# Ingreso al directorio del proyecto 
cd crudlaravel10/

# Luego dentro del directorio, iniciamos el servidor de Laravel 
crudlaravel10/
php artisan serve

   INFO  Server running on [http://127.0.0.1:8000].

  Press Ctrl+C to stop the server

  2023-02-11 02:32:25 ................................................... ~ 0s
  2023-02-11 02:32:25 /favicon.ico ...................................... ~ 1s
  2023-02-11 02:32:25 ................................................. ~ 128s

# Ingreso al directorio del proyecto

cd crudlaravel10/

# Luego dentro del directorio, iniciamos el servidor de Laravel

crudlaravel10/

php artisan serve

INFO Server running on [http://127.0.0.1:8000].

Press Ctrl+C to stop the server

2023-02-11 02:32:25 ................................................... ~ 0s

2023-02-11 02:32:25 /favicon.ico ...................................... ~ 1s

2023-02-11 02:32:25 ................................................. ~ 128s

Si abro la ruta http://localhost:8000/ en el navegador, puedo ver que se ha creado el proyecto correctamente:

Ahora pasemos a crear la base de datos para el sistema CRUD.

Base de Datos

Debemos elegir que Motor de Base de Datos que vamos a usar, Laravel es compatible con diferentes motores de Base de Datos como PostgreSQL DB, Oracle DB, MongoDB, MySQL, etc. yo voy a usar el motor de Base de Datos MySQL que al parecer siempre ha sido muy amigable con PHP.

Estoy usando XAMPP como servidor local, esta herramienta trae MySQL y el gestor de base de datos PhpMyAdmin. mediante este gestor podemos crear varias bases de datos y tablas para nuestros proyectos.

Si tienes instalado XAMPP ingresa a la ruta local http://localhost/phpmyadmin/ y dentro de ella presiona el botón Crear y al lado derecho colocamos el nombre de nuestra base de datos, yo le pondré crudlaravel10, tu le puedes poner el nombre que desees:

A mi Base de Datos le voy a colocar de nombre crudlaravel10 tu le puedes colocar el nombre que desees:

Para poder usar la base de datos que he creado, debo configurar los datos de conexión en Laravel. En el directorio principal del proyecto hay un archivo llamado .env abro este archivo


/crudlaravel10 
    ├── /app
    ├── /bootstrap
    ├── /config
    ├── /database
    ├── /lang 
    ├── /public
    ├── /resources
    ├── /routes
    ├── /storage
    ├── /tests
    ├── /vendor
    ├── .editorconfig
    ├── .env # Abrimos este archivo 
    ├── .env.example
    ├── .gitattributes
    ├── .gitignore
    ├── artisan
    ├── composer.json
    ├── composer.lock
    ├── package.json
    ├── phpunit.xml
    ├── README.md 
    ├── vite.config

/crudlaravel10

├── /app

├── /bootstrap

├── /config

├── /database

├── /lang

├── /public

├── /resources

├── /routes

├── /storage

├── /tests

├── /vendor

├── .editorconfig

├── .env # Abrimos este archivo

├── .env.example

├── .gitattributes

├── .gitignore

├── artisan

├── composer.json

├── composer.lock

├── package.json

├── phpunit.xml

├── README.md

├── vite.config

Dentro del archivo .env configuro las siguientes líneas para realizar la conexión a la base de datos crudlaravel10:


DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=crudlaravel10 
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=crudlaravel10

DB_USERNAME=root

DB_PASSWORD=

El campo password suelo dejarlo en blanco para conectar rápidamente a la base de datos, pero recuerda que cuando subas tu proyecto a un servidor de pago (Hosting, VPS, etc.), debes colocarle una contraseña segura.

En mi base de datos crearé una nueva tabla llamada productos con esta tabla llevaremos a cabo todos los procesos de nuestro sistema CRUD, en términos más sencillos vamos a Crear, Leer, Actualizar y Eliminar registros de productos en nuestra tabla productos

Para crear la tabla productos, debemos de crear un nueva migración, ejecutamos el siguiente comando en nuestra consola de comandos:


php artisan make:migration create_productos_table

INFO  Migration [D:\xampp\htdocs\xampp\nc\tutoriales\blog\crudlaravel10\database\migrations/2023_02_11_081022_create_productos_table.php] created successfully.

php artisan make:migration create_productos_table

INFO Migration [D:\xampp\htdocs\xampp\nc\tutoriales\blog\crudlaravel10\database\migrations/2023_02_11_081022_create_productos_table.php] created successfully.

Tras ejecutar el comando anterior, Laravel me ha creado un nuevo archivo con la nueva migración, este archivo lo encuentras en el directorio database > migrations > 2023_02_11_081022_create_productos_table.php, abro este archivo:


/crudlaravel10 
    ├── /app
    ├── /bootstrap
    ├── /config
    ├── /database
        ├── 2014_10_12_000000_create_users_table.php
        ├── 2014_10_12_100000_create_password_resets_table.php
        ├── 2019_08_19_000000_create_failed_jobs_table.php
        ├── 2019_12_14_000001_create_personal_access_tokens_table.php 
        ├── 2023_02_11_081022_create_productos_table.php # Abro este archivo
    ├── /lang 
    ├── /public
    ├── /resources
    ├── /routes
    ├── /storage
    ├── /tests
    ├── /vendor
    ├── .editorconfig
    ├── .env
    ├── .env.example
    ├── .gitattributes
    ├── .gitignore
    ├── artisan
    ├── composer.json
    ├── composer.lock
    ├── package.json
    ├── phpunit.xml
    ├── README.md 
    ├── vite.config

/crudlaravel10

├── /app

├── /bootstrap

├── /config

├── /database

├── 2014_10_12_000000_create_users_table.php

├── 2014_10_12_100000_create_password_resets_table.php

├── 2019_08_19_000000_create_failed_jobs_table.php

├── 2019_12_14_000001_create_personal_access_tokens_table.php

├── 2023_02_11_081022_create_productos_table.php # Abro este archivo

├── /lang

├── /public

├── /resources

├── /routes

├── /storage

├── /tests

├── /vendor

├── .editorconfig

├── .env

├── .env.example

├── .gitattributes

├── .gitignore

├── artisan

├── composer.json

├── composer.lock

├── package.json

├── phpunit.xml

├── README.md

├── vite.config

El archivo que se ha creado para la migración, Laravel le asigna la fecha y hora de creación al inicio del nombre del archivo, 2023_02_11_081022_create_productos_table.php, abro el archivo, dentro de la función public up() vamos a crear los campos de nuestra tabla productos, estos campos son nombre, precio, stock y el campo para la imagen llamado img, los creo como tipo string:


public function up()
{
    Schema::create('productos', function (Blueprint $table) {
        $table->id();
        $table->string('nombre');
        $table->string('precio');
        $table->string('stock');
        $table->string('img');
        $table->timestamps();
        $table->softDeletes();
    });
}

public function up()

{

Schema::create('productos', function (Blueprint $table) {

$table->id();

$table->string('nombre');

$table->string('precio');

$table->string('stock');

$table->string('img');

$table->timestamps();

$table->softDeletes();

});

}

Puedes ver que he añadido el campo $table->softDeletes(); este campo almacena la fecha y hora en que un registro es eliminado de la tabla productos, si tienes dudas para agregar esta campo te recomiendo ver el siguiente video Tutorial: Como Agregar la columna “deleted_at” a la DB MySQL en Laravel 5.8:

Entonces, como ya definimos los campos de nuestra tabla productos en el archivo de migración, vamos a ejecutar la migración para crearla en la Base de Datos, voy a la consola de comandos y ejecuta el siguiente comando:


php artisan migrate

INFO  Preparing database.

Creating migration table ........................................ 177ms DONE

INFO  Running migrations.

2014_10_12_000000_create_users_table ............................ 237ms DONE
2014_10_12_100000_create_password_resets_table .................. 606ms DONE
2019_08_19_000000_create_failed_jobs_table ...................... 281ms DONE
2019_12_14_000001_create_personal_access_tokens_table ........... 373ms DONE
2023_02_11_081022_create_productos_table ........................ 124ms DONE

php artisan migrate

INFO Preparing database.

Creating migration table ........................................ 177ms DONE

INFO Running migrations.

2014_10_12_000000_create_users_table ............................ 237ms DONE

2014_10_12_100000_create_password_resets_table .................. 606ms DONE

2019_08_19_000000_create_failed_jobs_table ...................... 281ms DONE

2019_12_14_000001_create_personal_access_tokens_table ........... 373ms DONE

2023_02_11_081022_create_productos_table ........................ 124ms DONE

Luego de ejecutar la migración, se nos ha creado la tabla productos con los respectivos campos en nuestra Base de Datos (también se crearon otras tablas necesarias para que Laravel funcione correctamente):

Bootstrap 5

Para crear las vistas más adelante del sistema CRUD, usaré Bootstrap 5, dentro del directorio de mi proyecto crudlaravel10 abro la consola de comandos y ejecuto el siguiente comando para instalar Boostrap 5:


composer require twbs/bootstrap:5.3.0-alpha1 

Info from https://repo.packagist.org: #StandWithUkraine
./composer.json has been updated
Running composer update twbs/bootstrap
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking twbs/bootstrap (v5.3.0-alpha1)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Downloading twbs/bootstrap (v5.3.0-alpha1)
  - Installing twbs/bootstrap (v5.3.0-alpha1): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.

  laravel/sail .................................................................................................. DONE
  laravel/sanctum ............................................................................................... DONE
  laravel/tinker ................................................................................................ DONE
  nesbot/carbon ................................................................................................. DONE
  nunomaduro/collision .......................................................................................... DONE
  nunomaduro/termwind ........................................................................................... DONE
  spatie/laravel-ignition ....................................................................................... DONE

82 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].

No security vulnerability advisories found

composer require twbs/bootstrap:5.3.0-alpha1

Info from https://repo.packagist.org: #StandWithUkraine

./composer.json has been updated

Running composer update twbs/bootstrap

Loading composer repositories with package information

Updating dependencies

Lock file operations: 1 install, 0 updates, 0 removals

- Locking twbs/bootstrap (v5.3.0-alpha1)

Writing lock file

Installing dependencies from lock file (including require-dev)

Package operations: 1 install, 0 updates, 0 removals

- Downloading twbs/bootstrap (v5.3.0-alpha1)

- Installing twbs/bootstrap (v5.3.0-alpha1): Extracting archive

Generating optimized autoload files

> Illuminate\Foundation\ComposerScripts::postAutoloadDump

> @php artisan package:discover --ansi

INFO Discovering packages.

laravel/sail .................................................................................................. DONE

laravel/sanctum ............................................................................................... DONE

laravel/tinker ................................................................................................ DONE

nesbot/carbon ................................................................................................. DONE

nunomaduro/collision .......................................................................................... DONE

nunomaduro/termwind ........................................................................................... DONE

spatie/laravel-ignition ....................................................................................... DONE

82 packages you are using are looking for funding.

Use the `composer fund` command to find out more!

> @php artisan vendor:publish --tag=laravel-assets --ansi --force

INFO No publishable resources for tag [laravel-assets].

No security vulnerability advisories found

Ahora instalo Laravel UI ejecutando el siguiente comando en la consola de comandos:


composer require laravel/ui:* 

Info from https://repo.packagist.org: #StandWithUkraine
./composer.json has been updated
Running composer update laravel/ui
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking laravel/ui (v4.2.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Downloading laravel/ui (v4.2.0)
  - Installing laravel/ui (v4.2.0): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.

  laravel/sail .................................................................................................. DONE
  laravel/sanctum ............................................................................................... DONE
  laravel/tinker ................................................................................................ DONE
  laravel/ui .................................................................................................... DONE
  nesbot/carbon ................................................................................................. DONE
  nunomaduro/collision .......................................................................................... DONE
  nunomaduro/termwind ........................................................................................... DONE
  spatie/laravel-ignition ....................................................................................... DONE

82 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].

No security vulnerability advisories found

composer require laravel/ui:*

Info from https://repo.packagist.org: #StandWithUkraine

./composer.json has been updated

Running composer update laravel/ui

Loading composer repositories with package information

Updating dependencies

Lock file operations: 1 install, 0 updates, 0 removals

- Locking laravel/ui (v4.2.0)

Writing lock file

Installing dependencies from lock file (including require-dev)

Package operations: 1 install, 0 updates, 0 removals

- Downloading laravel/ui (v4.2.0)

- Installing laravel/ui (v4.2.0): Extracting archive

Generating optimized autoload files

> Illuminate\Foundation\ComposerScripts::postAutoloadDump

> @php artisan package:discover --ansi

INFO Discovering packages.

laravel/sail .................................................................................................. DONE

laravel/sanctum ............................................................................................... DONE

laravel/tinker ................................................................................................ DONE

laravel/ui .................................................................................................... DONE

nesbot/carbon ................................................................................................. DONE

nunomaduro/collision .......................................................................................... DONE

nunomaduro/termwind ........................................................................................... DONE

spatie/laravel-ignition ....................................................................................... DONE

82 packages you are using are looking for funding.

Use the `composer fund` command to find out more!

> @php artisan vendor:publish --tag=laravel-assets --ansi --force

INFO No publishable resources for tag [laravel-assets].

No security vulnerability advisories found

Ahora voy a usar el scaffolding ui bootstrap, para ello ejecuto el siguiente comando en la consola:


php artisan ui bootstrap

INFO  Bootstrap scaffolding installed successfully.
WARN  Please run [npm install && npm run dev] to compile your fresh scaffolding.

php artisan ui bootstrap

INFO Bootstrap scaffolding installed successfully.

WARN Please run [npm install && npm run dev] to compile your fresh scaffolding.

Paso seguido ejecuto el siguiente comando para instalar las dependencias necesarias:


npm install 

added 44 packages, and audited 45 packages in 13s

9 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm install

added 44 packages, and audited 45 packages in 13s

9 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

Cuando ejecutamos el comando anterior, se nos ha creado un directorio llamado node_modules en el directorio principal del proyecto.

Ahora vamos importamos bootstrap 5 en el archivo vite.config.js, este archivo se encuentra en el directorio principal del proyecto:


import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
            // Importamos Bootstrap 5 
            resolve:{
                alias:{
                    '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
                }
            },
            // Fin Importamos Bootstrap 5 
        }),
    ],
});

import { defineConfig } from 'vite';

import laravel from 'laravel-vite-plugin';

import path from 'path';

export default defineConfig({

plugins: [

laravel({

input: [

'resources/sass/app.scss',

'resources/js/app.js',

refresh: true,

// Importamos Bootstrap 5

resolve:{

alias:{

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

}

// Fin Importamos Bootstrap 5

}),

});

Paso seguido abrimos el archivo bootstrap.js e importamos el archivo app.scss, el archivo bootstap.js se encuentra en resources > js > bootstrap.js:


// importamos el archivo app.scss 
import '../sass/app.scss';

// importamos el archivo app.scss

import '../sass/app.scss';

Luego ejecutamos el siguiente comando para compilar todo lo configurado:


npm run build

> build
> vite build

vite v4.1.1 building for production...
transforming...
✓ 49 modules transformed.
rendering chunks...
computing gzip size...
public/build/manifest.json              0.44 kB
public/build/assets/app-67dcdfd2.css  192.28 kB │ gzip: 27.26 kB
public/build/assets/app-536da3df.js   101.14 kB │ gzip: 37.92 kB

npm run build

> build

> vite build

vite v4.1.1 building for production...

transforming...

✓ 49 modules transformed.

rendering chunks...

computing gzip size...

public/build/manifest.json 0.44 kB

public/build/assets/app-67dcdfd2.css 192.28 kB │ gzip: 27.26 kB

public/build/assets/app-536da3df.js 101.14 kB │ gzip: 37.92 kB

Se nos ha creado algunos archivos necesarios como el CSS y JS de Bootstrap 5 en el directorio public.

Entonces cuando necesite usar Bootstrap en una vista HTML, solo debo usar la directiva @vite, esta directiva importa el archivo CSS y JavaScript de Bootstrap 5 al mismo tiempo:


<!-- Bootstrap 5 (CSS y JS) -->
@vite(['resources/js/app.js'])

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

NOTA: Si tienes problemas configurando Bootstrap 5, puedes llamar directamente los archivos CSS y JavaScript en tu vista HTML como explica su documentación oficial.

Con esto tenemos instalado Bootstrap 5 y podremos usar sus elementos HTML (Botones, Formularios, Alertas, etc.) cuando los necesitemos para las vistas Front del Sistema CRUD.

Bien, hasta aquí hemos creado un nuevo proyecto con Laravel 10 y también hemos configurado nuestra base de datos con su tabla productos para el sistema CRUD.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.

Nota (s)

Los pasos mencionados en este tutorial pueden cambiar en un futuro, esto no depende de nosotros si no de la oraganización que da soporte a Laravel que suele cambiar el orden y las opciones de este framework en sus futuras versiones.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

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