Como Crear una Página Web con Node JS 10, Express JS 4 y Bootstrap 4 – Parte 1
3 minuto(s)Demo
Node JS es quizás una de las tecnologías más importantes de los últimos años, cuenta con muchos paquetes y herramientas que nos ayudan a crear aplicaciones potentes de alto rendimiento, si decides crear una página con Node JS es posible de la mano con Express JS y Bootstrap 4, en este tutorial te enseñaremos como hacerlo, vamos con el tutorial.
Partes
Antes de continuar con el artículo te recomendamos leer los siguientes artículos para que estés más familiarizado con este tutorial
- Que es y Como usar una Consola de Comandos
- Que es y Como instalar Node JS
- Como Crear tu Primera Aplicación Hola Mundo con Node JS 10
- Que es Bootstrap, Historia y tu Primer Hola Mundo
Si ya tienes conocimiento en Node JS y Bootstrap, puedes omitir los artículos y continuar con este tutorial.
Nueva Aplicación en Node JS 10
Comenzamos creando una nueva aplicación con Node JS, ve a tu consola de comandos y ejecuta el siguiente comando
|
1 2 3 |
npm init |
El sistema te va pedir que escribas ciertos datos, ingresalos y trata que queden de la siguiente manera, tu puedes llenarlos según desees
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "name": "web", "version": "1.0.0", "description": "Como Crear tu Primera Página Web con Node JS 10, Express JS 4 y Bootstrap 4", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Nube Colectiva", "license": "ISC" } |
Puedes abrir el archivo package.json que se creo en la carpeta de tu proyecto y editar los datos manualmente y guardarlos, ten cuidado con mover lo que no sabes, puedes provocar errores al intentar editarlos.
Despliegue de Express JS 4
Vamos a instalar el paquete de Express JS 4 para poder trabajar con rutas y lo necesario para nuestro proyecto, ve a tu consola de comandos y ejecuta lo siguiente
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
npm install express@4.16.4 --save - formidable@1.0.17 node_modules\formidable - connect@1.9.2 node_modules\connect - mkdirp@0.3.0 node_modules\mkdirp `-- express@4.16.4 +-- accepts@1.3.5 | +-- mime-types@2.1.21 | | `-- mime-db@1.37.0 | `-- negotiator@0.6.1 +-- array-flatten@1.1.1 +-- body-parser@1.18.3 ... ... Acá se instalan más paquetes, deja que termine... ... ... |
La versión que instalamos es la 4 de Express JS, en un futuro puede quedar obsoleta. Si quieres instalar la última versión de Express ejecuta el siguiente comando en tu consola de comandos
|
1 2 3 |
npm install express --save |
Despliegue de Bootstrap 4
Ahora vamos a instalar Bootstrap para crear las interfaces adaptables a las pantallas o dispositivos móviles, pero boostrap 4 nos pide 2 librerías para poder funcionar que son:
- jQuery
- Popper JS
Ve a tu consola de comandos y ejecuta el siguiente comando para instalar jQuery, espera que termine de instalar
|
1 2 3 |
npm install jquery --save |
Luego para instalar Popper JS ejecuta el siguiente comando, espera que termine de instalar.
|
1 2 3 |
npm install popper.js --save |
Instala ambas librerías una por una.
Ahora podemos pasar a instalar Bootstrap, para ello ejecuta lo siguiente en tu consola de comandos
|
1 2 3 |
npm install bootstrap --save |
Espera que termine, no muevas nada para que no haya conflictos en la instalación.
Conclusión
En este capitulo empezamos creando la primera aplicación con Node JS y desplegando las librerías necesarias para armar el proyecto, algunos comando o pasos pueden cambiar en un futuro, no depende de nosotros si no de las empresas que dan soporte a las herramientas o librerías.
- Tutoriales
- 02-11-2018
- 08-11-2019
- Crear un Post - Eventos Devs - Foro
Seguimos trabajando las 24 horas y 365 días del año para mejorar tu experiencia en la comunidad.
Seguimos trabajando para brindarte le mejor experiencia en Nube Colectiva.
