Express application generator

Clase 5 de 43 • Curso de Express.js 2018

Resumen

En esta clase veremos cómo usar el generador de aplicaciones oficial de Express, llamado express-generator, que permite generar toda una estructura base o scafold predeterminada para iniciar un proyecto nuevo.

Primero debemos instalarlo como una dependencia global con la instrucción:

npm i express-generator -g

Luego para generar una aplicación, ejecutamos la instrucción:

express --view=pug <nombre-de-la-aplicacion>

Finalmente seguimos las instrucciones que nos indica:

#Cambiar de directorio:
cd <nombre-de-la-aplicacion>

#Instalar las dependencias:
npm install

#Ejecutar la app:
DEBUG=<nombre-de-la-aplicacion>:* npm start

Con esta funcionalidad creamos una estructura inicial, predeterminada para un nuevo proyecto con Express.js, con algunas rutas y middlewares iniciales con los que podemos empezar a trabajar, ahorrándonos algunos pasos de configuración.

David Vargas Domínguez

student•

Si no les ha funcionado el comando DEBUG=myapp:* npm start en Windows
pueden usar este comando set DEBUG=myapp:* & npm start

https://expressjs.com/en/starter/generator.html

Matias Cabido

student•

Si estas en windows.

Con POWERSHELL debes usar

$env:DEBUG='myapp:*'; npm start

si tienes el CMD debes usar

 set DEBUG=myapp:* & npm start

Angel Hernandez

student•

La explicacion es muy pobre y se nota que a pesar de manejar el tema, no puede comunicar sus ideas en la clase

Luis Angel Frias Herrera

student•

Les comparto:

Agregué un nuevo archivo en la carpeta routes y lo llamé about-me.js, este es el código:

// routes/about-me.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function (req, res, next) {
    res.render('about-me', {
        me: {
            name: 'Luis Angel',
            last_name: 'Frias',
            favorite_food: 'chilaquiles :O___',
            size: '1.65m',
            weight: '85kg >:D'
        }
    });
});

module.exports = router;

En archivo anterior, al momento de dar una respuesta lo estamos haciendo usando una vista la cual también agregaré en la carpeta views llamando al archivo, about-me.pug con el siguiente código:

// views/about-me.pug
extends layout

block content
    p !{JSON.stringify(me)} /* <= Con esto muestro el JSON completo dentro de la vista*/

Importamos/agregamos nuestro archivo de la carpeta routes en el archivo app.js del proyecto:

// app.js
var usersRouter = require('./routes/users');
var aboutMe = require('./routes/about-me'); /* <= Mi ruta */

Y al final declaramos la ruta que usaremos para llamar a ese archivo:

// app.js
app.use('/users', usersRouter);
app.use('/about', aboutMe); /* <= Mi ruta about */

Héctor Tello

student•

Excelente, gracias.

Javier Serrano Lule

student•

Si tienen problemas en arrancar Express en Windows ejecuten las siguientes líneas por separado y solucionado:

set DEBUG=express-app-gen:*
npm start

Darwin Yusef Gonzalez

student•

no funciona

Cristian Alexander Salazar Atalaya

student•

@darwinyusef descarga cmder, es un mejor shell y ahí si me funcionó lo que indicó javie, gracias.

Juan Diego Silva Garcia

student•

Para los que llegamos tarde:

npx express-generator --view=pug

para que no se instale de forma global.

Eduardo Hidalgo Díaz Rugama

student•

Reto:

Eduardo Hidalgo Díaz Rugama

student•

No olviden ir a app.js y crear la variable de enrutado y ponerla en uso:

...
var infoRouter = require('./routes/info');
...
app.use('/info', infoRouter);
...

Freddy Córdova Arana

student•

Muy bueno, gracias por compartirlo 😄

Fernando Cordero

student•

Para los usuarios de windows como yo, les recomiendo: 1er. Crean una carpeta llamada express-app-gen 2do. Entren a la carpeta express-app-gen 3ero. Corran el comando npx express-generator Con este ultimo paso tendran toda app creada con sus carpetas, tal cual esta en la clase.

Pablo Domínguez Durán

student•

Me sirvió, muchas gracias!

Ulises Uriel Cabrera Rubio

student•

falto un poco mas de explicación

Guillermo Rodas

teacher•

La idea es mantener los videos cortos y que el estudiante se anime a hacer su propia exploración.

Sin embargo, este medio de comentarios sirve para hacer todas las preguntes que necesites. Dime que quieres que te explique con profundidad?

Jose alberto Lopez Jimenez

student•

Para el ejercicio quise crear un objeto ‘Usuarios’ con dos elementos, los cuales tienen atributos cada uno. Lo hice de la siguiente manera:

const express = require('express');
const app = express();

var usuarios = {
  'Alberto': {
    nombre: 'alberto',
    apellido: 'Lopez jimenez',
    edad: 21
  },
  'Maximina' : {
    nombre: 'Maximina',
    apellido: 'Sanchez Garcia',
    edad: 22
  }
};

app.get("/usuarios", function(req, res,next){
  res.send(usuarios)
});

const server = app.listen(3000, function(){
  console.log(`Escuchando en htttp://localhost:${server.address().port}`);
});

José Ricardo Romo Gutiérrez

student•

Genial introducción, conciso, claro y preciso. Por eso me gusta tanto express, no conocía este generador de aplicaciones… Genial curso le veo futuro

Jose Daniel Atencio Manzanillo

student•

no me gusta pug :S ..

Omar Alberto Vélez

student•

Comparto código de ejemplo...

const express = require(&quot;express&quot;);
const app = express();

app.get(&quot;/&quot;, (req, res)=&gt;{
    res.send({
        &quot;Información personal&quot;: {
            Nombre: &quot;Omar Velez&quot;,
            Profesión: &quot;Ingeniero de Sistemas&quot;,
            Genero: &quot;Masculino&quot;,
            País: &quot;Colombia&quot;,
            Ciudad: &quot;Bogota&quot;,
        },
        &quot;Hobbies&quot;: {
            1: &quot;Leer&quot;,
            2: &quot;Escuchar Musica&quot;,
            3: &quot;Cine&quot;,
            4: &quot;Cocina&quot;
        },
        &quot;Bandas Preferidas&quot;: {
            1: &quot;AC/DC&quot;,
            2: &quot;The Strokes&quot;,
            3: &quot;Prisioneros&quot;,
            4: &quot;The Offspring&quot;,
            5: &quot;Daft Punk&quot;
        },
    });
});

const server = app.listen(8000, ()=&gt;{
    console.info(`Listening on http://localhost:${server.address().port}`);
});

Jorge Hernandez Rozo

student•

Reto : en este caso estoy renderizando directamente un html y el cubo generado es con la libreria three.js

Eduardo Hidalgo Díaz Rugama

student•

está muy guapo (: has deploy de tu proyecto en now.sh

Jorge Hernandez Rozo

student•

Hola Eduardo Gracias es algo similar a heroku ?

David Galicia

student•

Igual y llego alo tarde pero si no les ah funcionado el comando mostrado den el video el de DEBUG=express-app-gen ....

Abajo hay una respuesta publicada por David Vargas Dominguez la cual es la documentacion , pero en resumen , el comando cambia dependiendo de en que S.O o linea de comandos lo ejecutes:

MacOS o Linux $ DEBUG=myapp:* npm start

Windows Command Prompt:

set DEBUG=myapp:* & npm start

Windows PowerShell PS> $env:DEBUG='myapp:*'; npm start

Adicional como comentario a Platzi , si es que actualizan el curso posteriormente seria bueno que hicieran el video en este tipo de cosas como lo vi alguna vez en otros cursos lo hacia Freddy en estos casos, el explicaba en los 3 S.O lo que se hacia para que funcionara lo que explicaba y los videos no quedaban largos. Creo que eso resolvia muchas dudas

Cristian David Franco Garcia

student•

express --pug --git express-app-gen

Julián Andrés Vela Salazar

student•

muy claro la info, vamos bien!

Mitchell Contreras

student•

En el app.js en la funcion de error handler, se hace req.app.get('env') esto me causa una duda.

Guillermo Rodas

teacher•

Hace parte de una serie de settings que se pueden establecer en el objeto app: https://expressjs.com/en/4x/api.html#app.settings.table

Iván Gabriel Guerra

student•

Link al challenge: https://github.com/iguerra94/reto1-curso-express

Harold Gama

student•

me canse muchos errores en Windows ,instalando ubuntu para no perder tanto tiempo

Seba Cardoso

student•

Felicidades. La mejor decisión de todas!

Wilson Marino Pablo Mendez

student•

Yo quisiera pasar a linux pero utilizo XD, Illustrator, Photoshop.

Alexis Olveres

student•

Cual es la diferencia entre el método

res.render() y res.send()

Jorge de Jesús Macías Morales

student•

res.render(): Renderiza una vista con datos (puedes utilizar HTML), situados en la carpeta views. res.send(): Te ayuda a mostrar los datos que necesites cuando no te sea necesario utilizar HTML, es decir sólo texto.