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

Tutoriales

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.

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

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

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

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)

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)

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

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

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

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

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

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

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

Para la página Contacto ingresa a la ruta que le hemos asignado http://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.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required