Como Crear una Página Web con Node JS 10, Express JS 4 y Bootstrap 4 – Parte 1

3 minuto(s)

En esta página:

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

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

Antes de continuar con el artículo te recomendamos leer los siguientes artículos para que estés más familiarizado con este tutorial

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


npm init

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


{
  "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"
}

{

"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


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...
...
...

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


npm install express --save

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


npm install jquery --save

npm install jquery --save

Luego para instalar Popper JS ejecuta el siguiente comando, espera que termine de instalar.


npm install popper.js --save

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


npm install bootstrap --save

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.