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

4 minuto(s)

En esta página:

Demo

En este artículo continuaremos con el capitulo anterior Como Crear tu Primera Página Web con Node JS 10, Express JS 4 y Bootstrap 4 – Parte 2 en donde crearemos las vistas HTML con un contenido determinado para cada página y para visualizar cada página les crearemos una ruta determinada por donde le pasamos un título a cada página HTML, vayamos con el artículo.

Partes

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

Vamos a diseñar 4 páginas para nuestro proyecto, estas páginas serán home, servicios, nosotros y contacto, ve a la carpeta routes y abre el archivo index.js


/proyectoweb
├── bin
│   └── www
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js // Abre este archivo
│   └── 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 // Abre este archivo

│ └── users.js

└── views

├── error.pug

├── index.pug

└── layout.pug

├── app.js

├── package.json

Una ves abierto el archivo index.js, colocaremos las rutas de las páginas de nuestro proyecto, encontraremos la ruta del home que fue creada automáticamente al usar Express Generator para crear nuestro proyecto en el 2do Capitulo de este tutorial.

Debajo de la ruta del Home agregaremos las 3 rutas correspondientes a las páginas Servicios, Nosotros y Contacto


var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

/* Nosotros. */
router.get('/nosotros', function(req, res, next) {
  res.render('nosotros', { title: 'Nosotros' });
});

/* Servicios. */
router.get('/servicios', function(req, res, next) {
  res.render('servicios', { title: 'Servicios' });
});

/* Contacto. */
router.get('/contacto', function(req, res, next) {
  res.render('contacto', { title: 'Contacto' });
});

module.exports = router;

var express = require('express');

var router = express.Router();

/* GET home page. */

router.get('/', function(req, res, next) {

res.render('index', { title: 'Express' });

});

/* Nosotros. */

router.get('/nosotros', function(req, res, next) {

res.render('nosotros', { title: 'Nosotros' });

});

/* Servicios. */

router.get('/servicios', function(req, res, next) {

res.render('servicios', { title: 'Servicios' });

});

/* Contacto. */

router.get('/contacto', function(req, res, next) {

res.render('contacto', { title: 'Contacto' });

});

module.exports = router;

Con eso agregamos las rutas necesarios para nuestras páginas, dentro de cada ruta usamos el método render para llamar a la pagina correspondiente por ejemplo a la página contacto


/* Contacto. */
router.get('/contacto', function(req, res, next) {
  res.render('contacto', { title: 'Contacto' }); // Acá llamamos a la pagina contacto.pug
});

/* Contacto. */

router.get('/contacto', function(req, res, next) {

res.render('contacto', { title: 'Contacto' }); // Acá llamamos a la pagina contacto.pug

});

Bien ahora vamos a crear las páginas HTML correspondientes en formato .pug en el Capitulo 2 de este tutorial puedes ver los pasos para instalar la librería Pug, la cual nos ayuda a renderizar páginas con Express JS, para crear las páginas Servicios, Nosotros y Contacto ve a la carpeta views y crea 3 páginas servicios.pug, nosotros.pug y contacto.pug la página de inicio ya se creo cuando generamos el proyecto con Express Generator (Ver el Capítulo 2 de este tutorial)


/proyectoweb
├── bin
│   └── www
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    └── contacto.pug // Página Contacto 
    ├── error.pug
    ├── index.pug
    └── layout.pug
    └── nosotros.pug // Página Nosotros 
    └── servicios.pug // Página Servicios 
├── app.js
├── package.json

/proyectoweb

├── bin

│ └── www

├── public

│ ├── images

│ ├── javascripts

│ └── stylesheets

│ └── style.css

├── routes

│ ├── index.js

│ └── users.js

└── views

└── contacto.pug // Página Contacto

├── error.pug

├── index.pug

└── layout.pug

└── nosotros.pug // Página Nosotros

└── servicios.pug // Página Servicios

├── app.js

├── package.json

Ahora abre las 3 páginas que hemos creado las cuales son servicios.pug, nosotros.pug y contacto.pug dentro de estas páginas colocaremos la siguiente estructura HTML con Express (Básicamente Copiamos el contenido de la página index.pug y lo colocamos en las nuevas páginas creadas)


extends layout // Instanciamos el layout que viene por defecto cuando creamos el proyecto con Express Generator en el 2do Capítulo de este tutorial

block content
  h1= title
  p Estás en la página #{title}

extends layout // Instanciamos el layout que viene por defecto cuando creamos el proyecto con Express Generator en el 2do Capítulo de este tutorial

block content

h1= title

p Estás en la página #{title}

Express es muy intuitivo y dinámico con tan solo escribir una etiqueta, hace llamado al elemento HTML correspondiente

También instanciamos un archivo layout lo puedes encontrar en la carpeta views del proyecto, este archivo lo genera automáticamente Express Generator


/proyectoweb
├── bin
│   └── www
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    └── contacto.pug
    ├── error.pug
    ├── index.pug
    └── layout.pug // Página Layout
    └── nosotros.pug
    └── servicios.pug
├── app.js
├── package.json

/proyectoweb

├── bin

│ └── www

├── public

│ ├── images

│ ├── javascripts

│ └── stylesheets

│ └── style.css

├── routes

│ ├── index.js

│ └── users.js

└── views

└── contacto.pug

├── error.pug

├── index.pug

└── layout.pug // Página Layout

└── nosotros.pug

└── servicios.pug

├── app.js

├── package.json

Si abres el archivo layout.pug puedes ver que se encuentra la etiqueta title para especificar el Titulo de la página que se debe mostrar en la pestaña del Navegador y la etiqueta link con la que llamamos a una hoja de estilos especifica


doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

doctype html

html

head

title= title

link(rel='stylesheet', href='/stylesheets/style.css')

body

block content

En la etiqueta title se mostrará el texto que declaramos cuando creamos la ruta de cada página, por ejemplo en la ruta de la página Nosotros


/* Nosotros. */
router.get('/nosotros', function(req, res, next) {
  res.render('nosotros', { title: 'Nosotros' }); // Acá especificamos el contenido para la etiqueta title: 'Nosotros' 
});

/* Nosotros. */

router.get('/nosotros', function(req, res, next) {

res.render('nosotros', { title: 'Nosotros' }); // Acá especificamos el contenido para la etiqueta title: 'Nosotros'

});

Ahora vuelve a ejecutar el servidor, abre la consola de comandos y escribe lo siguiente


npm start

GET / 304 986.229 ms - -
GET /stylesheets/style.css 304 4.294 ms - -

npm start

GET / 304 986.229 ms - -

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

Podemos abrir el servidor con el puerto 3000 y nos cargará la pagina principal https://localhost:3000/

Para la página Nosotros ingresa a la ruta que le hemos asignado https://localhost:3000/nosotros

Para la página Servicios ingresa a la ruta que le hemos asignado https://localhost:3000/servicios

Para la página Contacto ingresa a la ruta que le hemos asignado https://localhost:3000/contacto

Con esto ya tenemos creadas las páginas HTML con sus rutas, listas para crearle sus contenidos correspondientes y mejorar el aspecto visual con Bootstrap 4, esto lo veremos en el siguiente y último capitulo de este tutorial.

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