Instalación y configuración del entorno de desarrollo de Backend con Babel

Clase 32 de 75 • Curso de MEAN 2017

Contenido del curso

Introducción al Curso de MEAN

El Frontend de PlatziOverflow

El Backend de PlatziOverflow

La Base de Datos de PlatziOverflow

Despliegue a producción

Contenido Bonus

Tomar examen

Comentarios

Jose Antonio Marín López

student•

Por si alguien se encuentra el mismo problema que yo, al usar DEBUG en windows debe usarse la siguiente línea en package.json:

"start:server": "set DEBUG=platzi-overflow* & babel-node server/index.js"

CarlosHP

student•

Gracias, por el aporte fue de mucha ayuda…

José Efraín García López

student•

Gracias, me fue de mucha ayuda!

Dave Chávarri

student•

El preset babel-preset-es2015 se encuentra en desuso Cambiar babel-preset-es2015 por npm install babel-preset-env.

Brayan Jesús Salcedo Ortegano

student•

Gracias, tambien se debe cambiar el archivo .babelrc.

{
  "presets": ["env"]
}

Luis Abdel Rangel Castro

student•

npm install --save-dev babel-cli babel-preset-env

Jesús Heber Grajeda Barranco

student•

Después del choque de ideas que tuve con el uso de import en lugar de require, me puse a investigar un poco, y he aquí mis hallazgos.

A pesar de que Node ha estado implementando los últimos features de ES6, no es tan fácil incluir import, por ciertas razones que resumire en que require es una función sincrona, mientras que import es asincrona.
El hecho de que import y require requieran evaluaciones asincronas y sincronas respectivamente daña el perfomance de Node, por lo que la única manera de usar la sintaxis de ES6 en Node es usar Babel o usar el flag –harmony que incluye Node.
Por lo que esto me llevo a buscar que tan eficiente es hacer el uso de babel-node, bueno la respuesta es simple, babel-node no se debe usar en producción, ya que es una carga muy pesada a la memoria, ya que Babel estaría compilando sobre la marcha.
Por último. Como ya mencione que babel-node no debe ser usado en producción, ¿entonces que se debe hacer?
Bueno pues la solución que nos da Babel es hacer un script con ayuda de npm, él cual nos ayudará a hacer un build final del código nuestro server con babel y otro script que nos ayude a correr el server. De esta manera en producción solo estaría corriendo el server con el código ya transpilado.

Espero no revolverlos más y les dejo los textos que consulte para cada uno de los puntos.
1, 2.
2.
3.
4.

Oscar Barajas Tavares

Team Platzi•

Estaba por responder tu pregunta anterior, solo añadiría este recurso donde explica con ejemplos sobre require e import:

Antonio Javier García Quesada

student•

Hay una cosa que no logro entender por que mezclar el proyecto frontend con el backend no seria mejor un tutorial una api desacoplada en otro proyecto.

Diego Forero

Team Platzi•

Por ser un stack MEAN tiene el backend y el frontend, no puedes tener esté stack sin trabajar en los dos.

Antonio Javier García Quesada

student•

Soy consciente que tiene que tenes los dos me refiero que puedes tener una api con la conexión a base de datos. Y luego en el frontal otro proyecto que por servicio solicite datos a la api. Pero no las dos partes en el mismo proyecto.

Yadiel Vélez

student•

¿Por qué se usa el preset es2015 de babel en vez del último, es2017? ¿No es mejor usar el último para así poder usar los últimos features de JavaScript?

Diego Forero

Team Platzi•

Puedes usar es2017, lo que pasa es que para este curso no se usa ninguna característica incluida en es2017 por eso se puede usar sin problema es2015.

Walter Lensinas

student•

Paso el codigo de la clase:

Si te pasas a ese branch, instala las dependencias con npm install.

Mariano Villarreal

student•

Al instalar Babel deben seguir las instrucciones de por que el metodo que explica en el video ya no funciona.
Tambien deben agregar

{
  "presets": ["env"]
}```

en el .babelrc

Olga Lucia Rodriguez Meneses

student•

En realidad, yo intenté seguir la configuracion que se indica en , pero me genero varios errores de los que veo en comentarios, asi que les dejo el paso a paso que seguí:

Instalar babel-cli y babel-presets:

<code>
λ npm install --save-dev babel-cli @babel/preset-env

Olga Lucia Rodriguez Meneses

student•

Crear el archivo .babelrc en la raiz del proyecto

{
  "presets": ["env"]
}

En el archivo package.json incluir en la lista de scripts:

"start:server": "babel-node server/index.js"

Crear la carpeta server en la raiz del proyecto, dentro de ella crear el archivo index.js:

import http from 'http';

const port = 3000;

const app = http.createServer((req,res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.write('Hola desde el servidor');
  res.end();
});

app.listen(port, () => {
  console.log(`Server running at port ${port}`)
})

Adrian Ducuara Benitez

student•

Hola todos,

Para los que tengan inconvenientes para ejecutar el servidor recuerden:

Asegurarse que la ruta server/index.js este bien escrito o por lo menos todo el script "start:server": "babel-node server/index.js" recordemos que el index start:server se puede modificar o escribir como deseemos no hay regalar puede modificar sea como serverStart o como se encuentra anteriormente no hay problema.
Por último en esta documentación se especifica un poco la estructura del .babelrc

Roberto Bock

student•

Primero descargamos babel-cli y babel-preset-es2015 esto para poder programar en node al utilizando imports y cosas más recientes que babel no entiende. También instalamos debug para lanzar nuestros propios mensajes de consola con cierta información o prefijos en cada mensaje que ayudan a debuguear y saber en qué archivo se están generando los mensajes de debug

Luego de instalar todo, se creo una carpeta server (ya que el curso es de MEAN) dentro de nuestro directorio, y luego en esta carpeta se crea un archivo llamado index.js.

Luego se modificó el package.json y se agregó un script que nos ayudará a ejecutar un conjunto de comandos automáticamente, en este caso el nuevo comando se llamó start:server, y los comandos que este ejecuta son

DEBUG=platzy-overflow* babel-node server/index.js

el primer comando ** DEBUG=platzy-overflow* ** sirve para configurar el debug, esto hace que donde node encuentre algún mensaje de debug que comience con platzy-overflow:algo los imprima en consola, el asterisco es porque en el index.js se va a declarar el debug y se va a configurar como platzy-overflow:root pero podría tener otra notación después de los dos puntos, esto es para dependiendo del archivo, se indique en qué archivo se está haciendo el debug, por ejemplo si fuese platzy-overflow:funcionalidadX entonces en nuestra consola aparezca algo similar a

platzy-overflow:funcionalidadX Mensaje enviado al debug

El segundo comando es babel-node: este comando tomará toda la sintaxis que no entienda node como por ejemplo los “imports” y los convierta en algo que node entienda, por ejemplo: import -> require, y finalmente el parámetro que va recibir este comando va a ser la ruta del archivo al cual se le va a aplicar babel, en este caso server/index.js

ahora creamos un archivo en la raíz que se llamará .babelrc donde escribiremos un archivo json donde se le especifica a babel que preset va a utilizar, en este caso nuestro archivo lucirá así

{ “presets”:[“es2015”] }

y ahora si, empezamos a escribir sobre el index.js

lo primero importamos http para crear el servidor

`import http from ‘http’

luego Debug from ‘debug’`

luego declaramos una variable en la que vamos a establecer el puerto

const PORT = 3000

y declaramos nuestra variable de Debug

cons debug = Debug(‘platzy-overflow:root’)

aqui lo que comentaba antes, en este caso establecemos que todos los mensajes que salgan de este archivo van a ser el platzy-overflow con el sufijo de root

y luego creamos el server

`const app = http.createServer((req, res)=>{

})`

y en la arrow function seteamos lo que se va a enviar de vuelta al navegador cuando se acceda al puerto que declaramos antes en el servidor, vamos a ello

const app = http.createServer((req, res)=>{ res.writeHeader(200, {‘Content-Type’: ‘text/plain’}) res.write(‘mensaje para el navegador’) res.send() })

lo primero es setear el header de la respuesta para que el navegador sepa cómo interpretar lo que sea que le envíe el server ( ya sea mostrando un texto plano, o descargando un archivo, o mostrando un json), en este caso un texto plano. Luego se escribe el mensaje que se va a enviar al navegador, en este caso ‘mensaje para el navegador’ y finalmente un ‘send’ para enviar el mensaje y cerrar la conexión.

finalmente se establece el puerto al cual el server, declarado en la constante ‘app’, va a estar escuchando los request que se le hagan (el puerto lo declare también antes en la constante PORT)

app.listen(PORT,()=>{ debug(escuchando en el puerto ${PORT}) })

Carlos Enrique Ramírez Flores

student•

esto esta algo desactualizado, pero basta con checar comentario para poder resolver los problemas!

Walter Lensinas

student•

Hasta ahora a mi me funciona, menos el tema del debug, que lleva un config distinto en windows.

Pero si, esta desactualizado. En 1 año pasan muchos updates de los frameworks y librerías.

Jose Osses Plaza

student•

Creoo que tengo mucha mala suerte :S

> platzi-overflow@0.0.0 start:server C:\Users\José Osses Plaza\Desktop\avence 2\Platzi-overflow-08aad062a27485539c4dec286a91acbb67f4df7f\Platzi-overflow-08aad062a27485539c4dec286a91acbb67f4df7f
> babel-node server/index.js

internal/modules/cjs/loader.js:596
    throw err;
    ^

Error: Cannot find module 'C:\Users\José Osses Plaza\Desktop\avence 2\Platzi-overflow-08aad062a27485539c4dec286a91acbb67f4df7f\Platzi-overflow-08aad062a27485539c4dec286a91acbb67f4df7f\server\index.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:744:10)
    at Object.<anonymous> (C:\Users\José Osses Plaza\Desktop\avence 2\Platzi-overflow-08aad062a27485539c4dec286a91acbb67f4df7f\Platzi-overflow-08aad062a27485539c4dec286a91acbb67f4df7f\node_modules\babel-cli\lib\_babel-node.js:154:22)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:744:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! platzi-overflow@0.0.0 start:server: `babel-node server/index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the platzi-overflow@0.0.0 start:server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\José Osses Plaza\AppData\Roaming\npm-cache\_logs\2018-07-22T05_06_08_724Z-debug.log

Osmandi Gomez

student•

No es que sea mala suerte, cuando estamos aprendiendo es normal que las cosas no salgan como esperamos.

No te rindas, tú puedes.

Diego Forero

Team Platzi•

Creo que tienes un problema en la ruta y por esto no encuentra el archivo, verifica las rutas, una recomendación es no usar espacios ni acentos en los nombres de archivos y carpetas.

Jaume Parrot Altisent

student•

Hola, tengo una duda. Si Babel sirve para traspilar código moderno de Javascript en diferentes navegadores, porque hay que instalarlo para el BACK? Es decir, el navegador no tiene acceso al código de back. Un saludo.

Fernanda Aragon

student•

Se instala en el Backend para que puedas tener todas las ultimas características de ES6+ y luego Babel transpile el código a uno que entienda Node.js, ya que no soporta aún todas las nuevas características de ES6+.

miguel angel Aguilar Espinosa

student•

“babel-node” no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.

Diego Forero

Team Platzi•

Como estas ejecutando, revisando el archivo package.json no se llama nunca a babel-node.

Lucas Guzmán

student•

Yo tenia el mismo problema… lo solucione agregarndo un ./ en la ruta al archivo index.js… quedaria:

"start:server" "set DEBUG=platzi-overflow* & babel-node ./server/index.js"

Espero te sirva Saludos!!

Luis Enrique Muñoz Ibarra

student•

cuando instalen babel-cli y babel-preset-env instalenlo con el npm install–save-dev sino les tirara un error y usen
{
“presets”: [“env”]
}
en el archivo .babelrc
espero haberle ahorrado un poco de tiempo buscando el error

Maided Guadalupe Hernández Ponce

student•

11/08/2020

Con la instalación que hice del vídeo no pudo correr. Entonces en uno de los comentarios que vi lo ejecute y sí me sirvió:

En la terminal npm install --save-dev babel-cli @babel/preset-env

En index.js Debe estar en la raíz del proyecto en una carpeta llamada server: Platzi-overflow/server/index.js import http from 'http';

const port = 3000;

const app = http.createServer((req,res) => { res.writeHead(200, {'Content-Type': 'text/plain'}); res.write('Hola desde el servidor'); res.end(); });

app.listen(port, () => { console.log(Server running at port ${port}) })

En package.json "start:server": "babel-node server/index.js"

ahí: "scripts": { "ng": "ng", "start": "ng server", "build": "babel src -d lib", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", ++"start:server": "babel-node server/index.js"++ },

babel.rc también en la raíz del proyecto { "presets": ["env"] }

**y ahora en la terminal: npm run start:server **

JUAN CARLOS RUIZ SALAZAR

company_admin•

Para que me funcionara use lo siguiente: npm install --save-dev @babel/cli @babel/preset-env @babel/core @babel/node

El archivo .babelrc

{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry" } ] ] }

Y el start:server "start:server": "set DEBUG=FirstJCR* & babel-node server/index.js"

Con estos cambios funciona sin problemas

Dave Chávarri

student•

Instalé los presets y todo el modulo de material angular desapareció! como es esto posible?

Diego Forero

Team Platzi•

Puedes comentar como instalaste los presets y que hiciste exactamente, es muy raro lo que mencionas.

import http from 'http';

const port = 3000;

const app = http.createServer((req,res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.write('Hola desde el servidor');
  res.end();
});

app.listen(port, () => {
  console.log(`Server running at port ${port}`)
})

> platzi-overflow@0.0.0 start:server C:\Users\José Osses Plaza\Desktop\avence 2\Platzi-overflow-08aad062a27485539c4dec286a91acbb67f4df7f\Platzi-overflow-08aad062a27485539c4dec286a91acbb67f4df7f
> babel-node server/index.js

internal/modules/cjs/loader.js:596
    throw err;
    ^

Error: Cannot find module 'C:\Users\José Osses Plaza\Desktop\avence 2\Platzi-overflow-08aad062a27485539c4dec286a91acbb67f4df7f\Platzi-overflow-08aad062a27485539c4dec286a91acbb67f4df7f\server\index.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:744:10)
    at Object.<anonymous> (C:\Users\José Osses Plaza\Desktop\avence 2\Platzi-overflow-08aad062a27485539c4dec286a91acbb67f4df7f\Platzi-overflow-08aad062a27485539c4dec286a91acbb67f4df7f\node_modules\babel-cli\lib\_babel-node.js:154:22)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:744:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! platzi-overflow@0.0.0 start:server: `babel-node server/index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the platzi-overflow@0.0.0 start:server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\José Osses Plaza\AppData\Roaming\npm-cache\_logs\2018-07-22T05_06_08_724Z-debug.log

Instalación y configuración del entorno de desarrollo de Backend con Babel

Introducción al Curso de MEAN

Bienvenidos al Curso de MEAN

¿Qué es MEAN?

El Frontend de PlatziOverflow

Introducción a Angular y TypeScript