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

Tutoriales

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.

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

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

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

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

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

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

Ve a tu navegador y abre la url con el puerto 3000 http://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.

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