Clase 5 de 22 • Curso de Server Side Render con Express 2019
Contenido del curso
Diego Speroni
Jesús Miguel Quinto Teran
Yesica Lizeth Cortés Pineda
Jorge Salamanca
Juan Castro
platzerito02112019 platzerito02112019
Kafu De León
Manuel Ojeda
rusbel bermúdez rivera
Ernesto Ledesma
Nadir Antonio Soza Solis
Rafael Lopez
Alejandro González Reyes
David Behar
Juan Castro
David Salomon Baena Rubio
Gabriel De Andrade
Alejandro González Reyes
Daniel Esteves
Mario Alejandro Cortez Salinas
Alan Alexis Arostegui Maranto
José Daniel Navarrete Díaz
Carlos Sampol
Tomas Goldenberg
Daniloo Morales
Excelente clase!
Soy el único que le causó gracia el typo de "porn"? Perdón chicos, sigan estudiando.
No, no fuiste el único. :)
La rama para el desarrollo de este proyecto la encuentras aquí: https://github.com/platzi/PlatziVideo/commits/feature/server-side-rendering
De donde salió yarn? Lo veo por todas partes yarn.lock, yarn para instalar... que estodo eso, además la estructura de carpetas esta lejos de ser como se dejo en el curso de Oscar...
Yarn solo es una herramienta para instalar las dependencias de nuestro proyecto. O sea, lo mismo que NPM pero un poco diferente (de hecho, Yarn usa NPM).
Por eso no te preocupes. Cada vez que veas Yarn puedes cambiarlo en tu mente por NPM y no pasa nada.
# NPM npm install react npm run loquesea # Yarn yarn add react yarn loquesea
Hace bind de cualquier módulo de babel que se requiera
yarn add @babel/register --exact o
npm add @babel/register --exact
se crea en: src/server/ index.js
require('@babel/register')({ ignore: [/(node_modules)/], presets: ['@babel/preset-env', '@babel/preset-react'], }); require('./server.js')
se crea en: src/server/ server.js
import express from 'express'; import dotenv from 'dotenv'; dotenv.config(); const ENV = process.env.NODE_ENV; const PORT = process.env.PORT || 3000; const app = express(); app.get('*', (req, res) => { res.send({holamundo: true }); }); app.listen(PORT, (err) => { if (err) console.log(err); console.log(`server runding on ${PORT}`); });
se crea archivo: PlatziVideo/.env
PORT=3001 NODE_ENV=development
Express es el framework con el cual vamos a crear nuestro servidor.
dotenv nos permite llamar a variables de entorno que almacenemos en el archivo .env
yarn add express dotenv --exact o
npm add express dotenv --exact
Herramienta que reinicia automáticamente la aplicación de Node.js cuando se detectan cambios.
yarn add nodemon --exact
npm add nodemon --exact
¿Yarn?
Puedes usar npm sin problema, el maestro utiliza Yarn, en mi caso usé NPM durante todo el curso sin problemas.
Alguien sabe la tipografia o el plugin para que las arrows se vean como en el video?
Fira Code !!
No me queda claro cual es la funcionalidad de los PRESET de babel. haber quien me ayuda... Saludos y gracias.
Los presets ayudan a las transformaciones que hace babel, para que el javascript (moderno) pueda ser leído por algunos navegadores que no soporten ciertas características del lenguaje.
@babel/preset-env sirve para lo que te comente arriba. @babel/preset-react para que babel pueda trabajar con react y jsx, ya que por debajo de este preste usa unos cuantos plugins del mismo babel los cuales son: @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx @babel/plugin-transform-react-display-name
Xx
¿Cuál es el tema que utiliza sampol en el vscode para que se vea tan chulo (todas las extenciones y archivos específicos se ven muy diferentes)?
Además al hacer el require no me aparece el autocomplete
¡Hola!
El tema de VSC es Dracula: https://draculatheme.com/visual-studio-code/. :grimacing:
¿Para lo del autocompletado tienes más detalles? La barrita se puede configurar para que salga o no salga. A menos que modifiques esa configuración deben salir las recomendaciones con Ctrl (command) + Espacio. :wink:
"Babel register es un paquete que mediante un pull de require nos permite hacer un bind en tiempo real de cualquier paquete que necesitemos" Sampol, que quisiste decir exactamente con esto. Algo que podamos leer?
Siempre puedes leer la documentación de Babel: @babel/register :)
Pero básicamente lo que hace este paquete es engancharse al require de node haciendo que todos los archivos sean compilados, a JavaScript entendible por los navegadores, sobre la marcha. Es decir que todo el código después de este módulo será compilado por Babel
el preset de babel-node que función tiene. Ya que no lo declaré y el server arrancó son problemas
Este preset sirve es un addon que sirve exactamente como Node CLI pero con el agregado de que va a compilar babel y plugins antes de correr la app
¿En cual de los cursos se agregó el archivo yarn.lock? Estoy un poco confundido porque por lo que veo en este proyecto ya se tienen Routes pero aún no Actions y ademas cosas que se hicieron en el curso de "Redux y React Router"
El archivo yarn.lock se agrega de manera automatica porque se utilizó yarn en lugar de npm, no afecta en la guia. Para las demas preguntas, puedes checar la rama https://github.com/platzi/PlatziVideo/tree/feature/server-side-rendering y guiarte de la estructura de las carpetas.
Como se llama el plugin e vscode para el diseño de los iconos de las carpetas y ficheros?
Se llama Material Icons :)
hice el git clone pero no me aparece el archivo yarn.lock!
Hola, a alguno le sale este error?
