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

9 minuto(s)

Demo Github

En este capitulo continuaremos con el capitulo anterior Como Crear una Página Web con Node JS 10, Express JS 4 y Bootstrap 4 – Parte 3 en donde creamos la estructura de nuestro proyecto, las rutas para las vistas HTML y las páginas HTML. En este último capitulo mejoraremos el aspecto visual de nuestras páginas HTML con Bootstrap 4, vayamos con el tutorial.

Partes

En el primer capitulo de este tutorial, instalamos Bootstrap 4, lo dejamos listo para ser empleado en mejorar la interface visual de las páginas HTML.

Ahora deberás de instanciar a los archivos de Bootstrap, jQuery y Popper JS, los archivos se encuentran en la carpeta node_modules, abre el archivo app.js


y agrega lo siguiente


Con las lineas anteriores de código estamos instanciando los archivos necesarios para que Bootstrap 4 funcione correctamente.

Todo el código de nuestro archivo app.js quedaría así


Listo, ya podemos usar las clases, módulos, componentes, etc. de Bootstrap 4, ahora para hacer uso de los archivos debemos de instanciarlos en nuestra vista HTML, como estamos usando un Layout para todas las paginas, abre el archivo layout.pug


y agrega los archivos de la siguiente manera, para mantener las buenas prácticas, arriba colocamos el archivo bootstrap.min.css y debajo el archivo bootstrap.min.js con los archivos Javascript necesarios para que funcione Bootstrap, como jQuery y Popper


Arriba puedes ver que colocamos el soporte para que la pagina se vuelve scalable a las pantallas


También colocamos el soporte para caracteres especiales mediante la codificación UTF-8


Ahora en nuestra carpeta views en donde se encuentra el archivo del Layout llamado layout.pug, también se encuentran las Páginas a las que les aplicaremos Bootstrap 4


Dentro de cada una de las páginas vamos a instanciar el layout y hacer referencia a la zona o bloque (block content) en donde colocaremos el contenido que debe ser único para cada una de nuestras vistas HTML.

Empezaremos con la vista Home, abre el archivo index.pug y agrega lo siguiente


Puedes ver que no son etiquetas HTML convencionales, es porque estamos usando Pug, que es un motor para renderizar etiquetas HTML, Pug solo nos pide que escribamos la inicial de la etiqueta HTML y este se encargará de renderizarlo en el navegador, abre tu navegador y ejecuta el servidor


Abre el servidor con el puerto 3000 https://localhost:3000/ y veras la vista Home con la interface Visual más agradable diseñada con etiquetas y clases de Bootstrap 4

Para la página Nosotros le agregamos la siguiente estructura


Navegamos hacia la página Nosotros https://localhost:3000/nosotros y tenemos

Vayamos con la Página Servicios, para este página agregamos el siguiente diseño


Ahora ve la ruta de la página Servicios https://localhost:3000/servicios y tendrás el siguiente diseño

Y la última página Contacto, le agregamos el siguiente diseño con un sencillo formulario


Si abrimos la página Contacto https://localhost:3000/contacto, tendremos el siguiente diseño

Listo ya tenemos nuestras páginas creadas correctamente.

Ahora vamos a compilar nuestro proyecto, lo pasaremos a producción para publicarlo, para esto usaremos Webpack 4, el cual nos pide crear el archivo webpack.config.js en la carpeta principal del proyecto


Abre el archivo webpack.config.js y agrega lo siguiente:


Con el código anterior anterior lo que hacemos es crear los archivos HTML, los convertimos del formato *.pug al formato *.html

Las páginas HTML las configuramos para que se guarden automáticamente en la carpeta dist


Estuvimos investigando y para no complicarnos con los archivos de Bootstrap, jQuery y Popper, lo que haremos sera copiarlos a nuestra carpeta dist para esto crearemos una tarea que realice la copia de los archivos, para esto debemos de instalar Gulp ejecutando el siguiente comando


y para el soporte te comandos funciones instala Gulp Cli con el siguiente comando


Gulp es una herramienta que te permite realizar tareas dentro de tu proyecto, Gulp nos pide crear un archivo llamado gulpfile.js en donde colocaremos nuestra tarea para copiar los archivos


Abre el archivo gulpfile.js y agrega la siguiente tarea


Ahora vamos a ejecutar el código anterior, que va a copiar los archivos.

Si tu consola de comandos no soporta comandos Gulp,  puedes usar de preferencia la consola de comandos de Node JS que se integro al sistema cuando instalaste Node JS y ejecuta el siguiente comando para ejecutar las tareas de copiado del codigo anterior


El código anterior que hace es copiar todos los archivos a la carpeta dist y dentro de esta carpeta crea 2 carpetas una llamada js para los archivos Javascript y otra carpeta llamada css para los archivos CSS


Eso es todo, ahora puedes abrir los archivos que se encuentra en la carpeta dist y visualizar tu pagina web, lista para publicarse

Notas

  • En los archivos HTML que generamos en la carpeta dist, si tienes problemas cargando los archivos CSS y Javascript, puedes borrar la barra diagonal  ‘/’  que esta al inicio, para que llame correctamente a los archivos, por ejemplo el archivo CSS de Bootstrap “/css/bootstrap.min.css” le quitas la primera barra diagonal y queda así “css/bootstrap.min.css”
  • Los comandos y pasos mencionados en todos los capítulos de este tutorial pueden cambiar, esto no depende de nosotros, si no de los desarrolladores que dan soporte a estas tecnologías.
  • Si tienes problemas con los paquetes y herramientas que usamos, puedes descargar el proyecto de repositorio Github e instalar los paquetes usando el comando npm install

 

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