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

3 minuto(s)

En esta página:

Demo

Continuando con el articulo anterior Como Crear una Página Web con Node JS 10, Express JS 4 y Bootstrap 4 – Parte 1 en este capítulo vamos a crear las rutas con Express JS que son necesarias para poder mostrar las vistas ingresando a una ruta determinada para cada página, luego crearemos un esqueleto para organizar nuestro proyecto y tenerlo todo en orden, vamos con este Segundo Capítulo.

Partes

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

Vamos a crear 4 páginas que son home, servicios, nosotros y contacto, debemos de crear 4 rutas que enlacen a la página que le corresponde.

Para realizar nuestro proyecto de manera ágil usaremos Express Generator, ve a tu consola de comandos y ejecute los siguiente para instalarlo, espera que termine


npm install express-generator --save

-- express-generator@4.16.0
  +-- commander@2.13.0
  +-- ejs@2.5.7
...
...
...

npm install express-generator --save

-- express-generator@4.16.0

+-- commander@2.13.0

+-- ejs@2.5.7

...

Mediante Express Generator creamos un esqueleto organizado para nuestro proyecto o página web.

Ahora instalaremos Pug para poder gestionar nuestras vistas dinámicas HTML, abre tu consola de comandos y escribe lo siguiente, espera que termine


npm install pug --save

`-- pug@2.0.3
  +-- pug-code-gen@2.0.1
...
...
...

npm install pug --save

`-- pug@2.0.3

+-- pug-code-gen@2.0.1

...

Crea un esqueleto con Express Generator ejecutando el siguiente comando, espera que termine


express --view=pug

destination is not empty, continue? [y/N] y
   create : public\
   create : public\javascripts\
   create : public\images\
   create : public\stylesheets\
   create : public\stylesheets\style.css
   create : routes\
   create : routes\index.js
   create : routes\users.js
   create : views\
   create : views\error.pug
   create : views\index.pug
   create : views\layout.pug
   create : app.js
   create : package.json
   create : bin\
   create : bin\www

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=proyectoweb:* & npm start

express --view=pug

destination is not empty, continue? [y/N] y

create : public\

create : public\javascripts\

create : public\images\

create : public\stylesheets\

create : public\stylesheets\style.css

create : routes\

create : routes\index.js

create : routes\users.js

create : views\

create : views\error.pug

create : views\index.pug

create : views\layout.pug

create : app.js

create : package.json

create : bin\

create : bin\www

install dependencies:

> npm install

run the app:

> SET DEBUG=proyectoweb:* & npm start

Al final nos pide que instalemos las dependencias internas y necesarias que usará nuestro esqueleto creado para nuestro proyecto, ejecuta lo siguiente y espera que termine


npm install

+-- cookie-parser@1.4.3
+-- morgan@1.9.1
...
...
...

npm install

+-- cookie-parser@1.4.3

+-- morgan@1.9.1

...

Si revisas la carpeta de tu proyecto debe tener la siguiente estructura de archivos


/proyectoweb
├── bin
│   └── www
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug
├── app.js
├── package.json

/proyectoweb

├── bin

│ └── www

├── public

│ ├── images

│ ├── javascripts

│ └── stylesheets

│ └── style.css

├── routes

│ ├── index.js

│ └── users.js

└── views

├── error.pug

├── index.pug

└── layout.pug

├── app.js

├── package.json

Puedes ver en la estructura del esqueleto tenemos las carpetas organizadas para los archivos Javascript, CSS, rutas y vistas, de esta manera estamos creando un proyecto de manera profesional.

Para probar si esta funcionando correctamente, vamos arrancar el proyecto ejecutando el siguiente comando


npm start

GET / 304 1386.244 ms - -
GET /stylesheets/style.css 304 4.773 ms - -

npm start

GET / 304 1386.244 ms - -

GET /stylesheets/style.css 304 4.773 ms - -

Ve a tu navegador y abre la url con el puerto 3000 https://localhost:3000/ debería cargarte la página por defecto del Esqueleto que generamos

En el Tercer Capítulo crearemos las vistas para las 4 páginas que son home, servicios, nosotros y contacto, tambíen crearemos las páginas HTML que se mostrarán al ingresar a una determinada ruta en el navegador.

Notas

Algunos pasos pueden cambiar en próximas versiones de Express, esto no depende de nosotros, si no de la empresa que le da soporte a esta herramienta.
Recomendamos que revises periódicamente la documentación de Express para que estés actualizado con los últimos cambios en su herramienta.

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