Como Crear un CRUD con Node JS (19.4.2) y Bootstrap 5 – Parte 1

7 minuto(s)

En esta página:

Demo

Node JS es una de las tecnologías más dinámicas en el mundo del desarrollo de software, nos permite crear proyectos que pueden hacerse escalables con el tiempo, asimismo podemos hacer uso de diferentes paquetes NPM para añadir determinadas características o funcionalidades a nuestros proyectos. Algo importante que mencionar es la velocidad con la que funcionan los proyectos creados con Node JS y para verificar esto te enseñare a Como Crear un CRUD con Node JS (19.4.2) 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 con este Post, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Porque El Lenguaje De Programación Python Es Tan Popular” y “La Inteligencia Artificial (IA) y el Machine Learning (ML) Siempre Trabajan de la Mano”:

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Como Crear un CRUD con Node JS (19.4.2) y Bootstrap 5 – Parte 1.

Nuevo Proyecto

Para el proyecto tengo que crear un nuevo directorio, yo le pondré de nombre crud-nodejs19-bootstrap5 y dentro de este directorio abro mi consola de comandos y ejecuto el siguiente comando para crear un nuevo proyecto con Node JS:


# Comando para crear un nuevo proyecto en Node JS
npm init

# Comando para crear un nuevo proyecto en Node JS

npm init

Luego de ejecutar el comando anterior, Node JS me lanzará en la consola, una serie de preguntas para el proyecto que deseo crear. Tras responder todas las preguntas, al final se me debe crear mi archivo llamado package.json con los siguiente datos que yo le he brindado.


{
  "name": "crud-nodejs19-bootstrap5",
  "version": "1.0.0",
  "description": "Como Crear un CRUD con Node JS 19.4.2 y Bootstrap 5",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "crud",
    "node",
    "js"
  ],
  "author": "Nube Colectiva",
  "license": "ISC"
}

{

"name": "crud-nodejs19-bootstrap5",

"version": "1.0.0",

"description": "Como Crear un CRUD con Node JS 19.4.2 y Bootstrap 5",

"main": "app.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [

"crud",

"node",

"js"

"author": "Nube Colectiva",

"license": "ISC"

}

Entonces mi directorio crud-nodejs19-bootstrap5 debe contener en su interior un archivo llamado package.json con los datos de las preguntas que respondí cuando la consola me pregunto.


/crud-nodejs19-bootstrap5
├── package.json // Se me ha creado este Archivo

/crud-nodejs19-bootstrap5

├── package.json // Se me ha creado este Archivo

Parece que nuestro proyecto se ha creado correctamente, pero siempre es bueno verificar si es así. Para esto vamos a crear un servidor básico inicial en Node JS, para probar que todo este funcionando bien.

Dentro del directorio de mi proyecto llamado crud-nodejs19-bootstrap5 creo un archivo llamado app.js:


/crud-nodejs19-bootstrap5  
├── app.js // Creo este Archivo 
├── package.json

/crud-nodejs19-bootstrap5

├── app.js // Creo este Archivo

├── package.json

Abro el archivo apps.js y dentro de el voy a crear un servidor que muestre un simple mensaje que diga Hola Mundo ! y usaré el puerto 3000 para este servidor:


var http = require('http');
var server = http.createServer();
 
function Servidor(petic, resp) {
	resp.writeHead(200, {'content-type': 'text/plain'});
	resp.write('Hola Mundo !');
	resp.end();
}
server.on('request', Servidor);
 
server.listen(3000, function () {
  	console.log('La Aplicación está funcionando en el puerto 3000');
});

var http = require('http');

var server = http.createServer();

function Servidor(petic, resp) {

resp.writeHead(200, {'content-type': 'text/plain'});

resp.write('Hola Mundo !');

resp.end();

}

server.on('request', Servidor);

server.listen(3000, function () {

console.log('La Aplicación está funcionando en el puerto 3000');

});

Ahora en mi consola ejecuto el siguiente comando para iniciar el servidor:


# Comando para iniciar mi servidor en Node JS 
node app 

La Aplicación está funcionando en el puerto 3000

# Comando para iniciar mi servidor en Node JS

node app

La Aplicación está funcionando en el puerto 3000

Si voy al navegador y abro la ruta http://localhost:3000/ debería de ver el mensaje sin problemas:

Con ello he verificado que mi proyecto se ha creado correctamente y ya puedo comenzar a desarrollar el sistema CRUD.

Paquetes

Para que nuestro proyecto funcione adecuadamente, necesitoe instalar algunas dependencias necesarias.

Express JS

Express al menos hasta la fecha de este Post, es uno de los frameworks más populares para trabajar con Node JS, nos facilita muchas cosas comoel manejo de las rutas, middlewares, etc.

Para instalar Express ejecuto el siguiente comando en la consola de comandos:


npm install express --save

added 57 packages, and audited 58 packages in 2s

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

found 0 vulnerabilities

npm install express --save

added 57 packages, and audited 58 packages in 2s

7 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

Una de las cosas que lo ha hecho popular a Express JS, es su simplesa de uso y el potencial que tiene.

MySQL

También necesitaré una dependencia que me permita hace una conexión a MySQL en Node JS, ya que usaré este motor de base de datos para el proyecto.

Para instalar MySQL ejecuto el siguiente comando en la consola de comandos:


npm install mysql --save

added 12 packages, and audited 70 packages in 3s

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

found 0 vulnerabilities

npm install mysql --save

added 12 packages, and audited 70 packages in 3s

7 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

En otro tutorial usaré MongoDB, pero hay usuarios que necesitan un CRUD con MySQL y este stack les ayudará.

Nodemon

Esta dependencia me ayudará a ver los cambios que realice en el proyecto sin tener que estar reiniciando el servidor a cada rato. Para instalar Nodemon ejecuto el siguiente comando:


npm install --save-dev nodemon

added 32 packages, and audited 102 packages in 2s

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

found 0 vulnerabilities

npm install --save-dev nodemon

added 32 packages, and audited 102 packages in 2s

10 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

Nodemon es una de las dependencia mas populares para desarrollar aplicación Node JS, en lo que se refiere a Live reload o carga instantanea de cambios.

Para que esta dependencia funcione correctamente, abro el archivo package.json que se encuentra en el directorio principal del proyecto:


/crud-nodejs19-bootstrap5  
├── /node_modules 
├── app.js 
├── package.json // Abro este archivo 
├── package-lock.json

/crud-nodejs19-bootstrap5

├── /node_modules

├── app.js

├── package.json // Abro este archivo

├── package-lock.json

Dentro del archivo package.json agrego dentro de la sección scripts, la línea “start”: “nodemon server”


{
  "name": "crud-nodejs19-bootstrap5",
  "version": "1.0.0",
  "description": "Como Crear un CRUD con Node JS 19.4.2 y Bootstrap 5",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server"
  },
  "keywords": [
    "crud",
    "node",
    "js"
  ],
  "author": "Nube Colectiva",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^5.2.3",
    "express": "^4.18.2",
    "mysql": "^2.18.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.20"
  }
}

{

"name": "crud-nodejs19-bootstrap5",

"version": "1.0.0",

"description": "Como Crear un CRUD con Node JS 19.4.2 y Bootstrap 5",

"main": "app.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "nodemon server"

"keywords": [

"crud",

"node",

"js"

"author": "Nube Colectiva",

"license": "ISC",

"dependencies": {

"bootstrap": "^5.2.3",

"express": "^4.18.2",

"mysql": "^2.18.1"

"devDependencies": {

"nodemon": "^2.0.20"

}

Entonces a partir de ahora iniciaré el servidor de Node JS, ejecutando el siguiente comando:


npm start

> crud-nodejs19-bootstrap5@1.0.0 start
> nodemon server

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server app.js`
Server is listening on port 3000

npm start

> crud-nodejs19-bootstrap5@1.0.0 start

> nodemon server

[nodemon] 2.0.20

[nodemon] to restart at any time, enter `rs`

[nodemon] watching path(s): *.*

[nodemon] watching extensions: js,mjs,json

[nodemon] starting `node server app.js`

Server is listening on port 3000

Y en la consola, comenzaré a ver todos los errores que vaya obteniendo durante el desarrollo del proyecto y lo mejor de todo es que pocas veces necesitaré estar iniciando manualmente el servidor de Node JS. Esta dependencia nos hace más productivos a los desarrolladores.

Bootstrap 5

Para poder usar los componentes y elementos del framework Bootstrap 5, ejecuto el siguiente comando:


npm install --save bootstrap

added 2 packages, and audited 104 packages in 2s

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

found 0 vulnerabilities

npm install --save bootstrap

added 2 packages, and audited 104 packages in 2s

12 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

Mediante Bootstrap 5, puedo agregar a la interface del sistema CRUD, botones, formularios, alerts y otros elementos que necesite. De esta manera solo me enfoco en la lógica del proyecto. Bootstrap se hará cargo de la interface esencialmente.

Body Parser

La dependencia body-parser analiza los cuerpos de las solicitudes entrantes en un middleware antes que sus controladores, disponibles en la propiedad req.body. Para instalar esta dependencia, ejecuto el siguiente comando:


npm install body-parser --save

up to date, audited 104 packages in 984ms

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

found 0 vulnerabilities

npm install body-parser --save

up to date, audited 104 packages in 984ms

12 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

Multer

Para subir las imágenes de cada producto, usaré el paquete Multer, que me brinda una manera sencilla de subirlas al servidor. Estas imágenes se subirán al directorio con el nombre uploads, este directorio lo creo manualmente y le puedes pone el nombre que desees. Para instalar Multer, ejecuto el siguiente comando en la consola de comandos:


npm install multer --save

added 11 packages, and audited 115 packages in 4s

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

found 0 vulnerabilities

npm install multer --save

added 11 packages, and audited 115 packages in 4s

13 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

Template Engine EJS

Podemos usar HTML simple para cargar las vistas que crearé con Bootstrap 5, pero es solo HTML y si queremos enviar datos dinámicamente desde Node JS a las vistas, por ejemplo si queremos enviar datos desde la base de datos o enviar variables personalizadas, es recomendable usar un motor de plantillas, yo usaré el motor de plantillas EJS porque me permite usar HTML estándar, el cual necesitaré para crear los elementos de la interface con Bootstrap 5. Si quieres usar otro motor de plantilla, puedes ver esta lista en la página oficial de Express.

Para instalar EJS, ejecuto el siguiente comando en la consola de comandos:


npm install ejs --save

added 12 packages, and audited 132 packages in 3s

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

found 0 vulnerabilities

npm install ejs --save

added 12 packages, and audited 132 packages in 3s

15 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

Luego de instalar el motor de plantilla o template engine EJS, ahora pasaré a instalar una extensión de sesiones para Express.

Express Session

El paquete express-session nos servirá para mostrar los mensajes después que una tarea haya sido realizada. Para instalarlo ejecuto el siguiente comando:


npm install express-session --save

added 5 packages, and audited 132 packages in 5s

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

found 0 vulnerabilities

npm install express-session --save

added 5 packages, and audited 132 packages in 5s

15 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

Por ejemplo cuando se realiza la tarea Crear, el sistema mostrará el mensaje Producto Creado Correctamente !, y express-session nos permite gestionar contextos para enviar los mensajes.

Express Flash

Este paquete nos permite pasar parámetros desde el controlador a la vista, para instalar express-flash ejecuto el siguiente comando:


npm install express-flash --save

added 2 packages, and audited 134 packages in 2s

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

found 0 vulnerabilities

npm install express-flash --save

added 2 packages, and audited 134 packages in 2s

15 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

Los parámetros que pasaré son para los mensajes luego de una tarea realizada.

Bien con esto entonces terminamos de crear el proyecto con Node JS para nuestro sistema CRUD y verificamos que este funcione bien. Asimismo agregamos ciertas dependencias necesarias, para que el proyecto funcione adecuadamente.

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.