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
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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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
|
1 2 3 4 5 6 7 8 9 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/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
|
1 2 3 4 5 6 |
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.