Creación del proyecto base

Clase 5 de 22 • Curso de Server Side Render con Express 2019

Resumen

Para esta clase vamos a empezar a separar nuestro proyecto en diferentes carpetas: frontend y server. Dentro de frontend vamos a guardar todos los archivos que anteriormente Oscar realizó en el curso de React y React Router Redux.

La rama para el desarrollo de este proyecto la encuentras aquí: https://github.com/platzi/PlatziVideo/tree/feature/server-side-rendering

Dentro de las dependencias que vamos a instalar se encuentran:

# Hace bind de cualquier módulo de babel que se requiera  
yarn add @babel/register --exact  
  
# 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  
  
# Herramienta que reinicia automáticamente la aplicación de Node.js cuando se detectan cambios.  
yarn add nodemon --exact

Diego Speroni

student•

Excelente clase!

Soy el único que le causó gracia el typo de "porn"? Perdón chicos, sigan estudiando.

Jesús Miguel Quinto Teran

student•

No, no fuiste el único. :)

Yesica Lizeth Cortés Pineda

teacher•

La rama para el desarrollo de este proyecto la encuentras aquí: https://github.com/platzi/PlatziVideo/commits/feature/server-side-rendering

Jorge Salamanca

student•

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...

Juan Castro

teacher•

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

platzerito02112019 platzerito02112019

student•

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

Kafu De León

student•

¿Yarn?

Manuel Ojeda

student•

Puedes usar npm sin problema, el maestro utiliza Yarn, en mi caso usé NPM durante todo el curso sin problemas.

rusbel bermúdez rivera

student•

Alguien sabe la tipografia o el plugin para que las arrows se vean como en el video?

Ernesto Ledesma

student•

Fira Code !!

Nadir Antonio Soza Solis

student•

No me queda claro cual es la funcionalidad de los PRESET de babel. haber quien me ayuda... Saludos y gracias.

Rafael Lopez

student•

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

Alejandro González Reyes

student•

David Behar

student•

¿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

Juan Castro

teacher•

¡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:

David Salomon Baena Rubio

student•

"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?

Gabriel De Andrade

student•

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

Alejandro González Reyes

student•

el preset de babel-node que función tiene. Ya que no lo declaré y el server arrancó son problemas

Daniel Esteves

student•

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

Mario Alejandro Cortez Salinas

student•

¿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"

Alan Alexis Arostegui Maranto

student•

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.

José Daniel Navarrete Díaz

student•

Como se llama el plugin e vscode para el diseño de los iconos de las carpetas y ficheros?

Carlos Sampol

Team Platzi•

Se llama Material Icons :)

Tomas Goldenberg

student•

hice el git clone pero no me aparece el archivo yarn.lock!

Daniloo Morales

student•

Hola, a alguno le sale este error?

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}`);
});

Creación del proyecto base

Primeros pasos

¡Vamos a renovar este curso!

Introducción y presentación del curso

¿Qué es Server Side Rendering?

Babel, Express y React

Creación del proyecto base

Configuración de ESLint con Webpack

Preparación de Webpack, Babel, PostCSS y Assets

Usando Plugins y vendor file en Webpack

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Agregando variables de sass desde webpack

Aplicando history y creando rutas para el servidor

Haciendo initialState accesible y configurando Redux DevTools

Aplicar Server Side Rendering

Definiendo la función main para renderizado desde el servidor

Aplicando la función main para renderizado desde el servidor y creación del string de HTML

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando el frontend y webpack para producción

Compresión de Assets

Hashes

Cierre del Curso