Deploy a producción

Clase 35 de 58 • Curso Profesional de React con Redux 2016

Clase anteriorSiguiente clase

Lorgio Ricardo Trinidad Caro

student•

Hola, tengo un problema al ejecutar el deploy en el servidor .

Se ejecuta el npm run build pero me sale el siguiente error:

npm ERR! Failed at the proyecto-xxxxx@1.0.0 build script ‘NODE_ENV=production webpack -p’.

npm ERR! Make sure you have the latest version of node.js and npm installed

PD: Segun la documentacion de es posible decirle que version de node usar, asi que se lo puse en el package.json pero tampoco anduvo.

Alguna solución a esto.

Muchas gracias

Diego José Molina Gonzalez

student•

Pudiste solucionarlo?

Juan Luis Rojas León

student•

Hola, ¿Alguien sabe porqué los deploy en now se congelan y dura un montón en cargar la página? ¿Es por el plan gratuito? ¿Así pasa con los demás planes de pago?

Sergio Daniel Xalambrí

student•

Si un deploy no recibe nada de tráfico después de un tiempo el deploy se congela, esto te permite tener todos los deploys que quieras y que solo cuente para tu límite de deploys los que de verdad están corriendo.

Pasa tanto en el plan gratuito como en el pago, pero se puede configurar (en ambos planes). Simplemente hay que controlar la escalabilidad de tu deploy usando el comando now scale.

Milton Berman

student•

Hola @sergiodxa, qué tal?

Estoy teniendo problemas al hacer el deploy con now.
Me tira error al intentar crear un directorio en Now.
Por la versión de Webpack que tengo tuve que configurar un absolute path en “webpack.server.config.js” en lugar de un relative path como en tu ejemplo:

  output: {
    filename: 'index.js',
    path: './built/server',

Cómo puedo solucionar el problema que me ocurre al hacer el deploy?
Abajo va el log de consola al ejecutarse now.

Muchas gracias!

now

Deploying ~/Documents/development/Tests/react/react_repos/react_tests/proyecto_test
Using Node.js 7.6.0 (default)
Ready! (copied to clipboard) [2s]
Initializing…
Building
▲ npm install
‣ webpack@^2.2.1
‣ babel-runtime@^6.23.0
‣ isomorphic-fetch@^2.2.1
‣ react@^15.4.2
‣ react-dom@^15.4.2
‣ react-intl@^2.2.3
‣ react-redux@^5.0.3
‣ react-router-dom@^4.0.0-beta.8
‣ redux@^3.6.0
✓ Installed 705 modules [31s]
▲ npm run build

proyecto_test@1.0.0 build /home/nowuser/src
NODE_ENV=production webpack -p
(node:88) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
**> Error: EACCES: permission denied, mkdir ‘/Users’
**> npm ERR! Linux 4.7.0-coreos
npm ERR! argv “/usr/bin/node” “/usr/bin/npm” “run” "build"
npm ERR! node v7.6.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! proyecto_test@1.0.0 build: NODE_ENV=production webpack -p
npm ERR! Exit status 1

Nicolas Alejandro Herrera

student•

Tienes el codigo del proyecto hasta este punto??? Creo que me falta algo 😃

Miguel Ruiz Moreno

student•

Aquí tienes el deploy que yo hice, en este caso los archivos que están en Now, por si te sirven:

Uriel Ramírez

student•

Ya tienes todos los archivos y el enlace al repo -->

EdwinDeLeonG

student•

Error al hacer npm build
"NODE_ENV" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.

EdwinDeLeonG

student•

Estoy usando Windows 7

EdwinDeLeonG

student•

SOLUCIONADO
En Windows se debe poner

"build": "set NODE_ENV=production  && webpack -p",

Néstor Fabián Gonzalez

student•

Hola Sergio tengo el siguiente error al ejecutar el comando npm run build, estoy en una maquina windows 10

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

Sergio Daniel Xalambrí

student•

Para definir variables de entorno en Window necesitás usar set NODE_ENV=production && <comando> hasta donde recuerdo de Windows.

Néstor Fabián Gonzalez

student•

Gracias

La Opinión Digital

student•

Hola, a alguien le sale este error en consola del navegador después de hacer el deploy.
Uncaught ReferenceError: regeneratorRuntime is not defined

La Opinión Digital

student•

En local corre bien no sale ese error 😕

Milton Berman

student•

Hola @sergiodxa, qué tal?

  output: {
    filename: 'index.js',
    path: './built/server',```

¿Cómo puedo solucionar el problema que me ocurre al hacer el deploy?
Abajo va el log de consola al ejecutarse now.

Muchas gracias!

now

Deploying ~/Documents/development/Tests/react/react_repos/react_tests/proyecto_test
Using Node.js 7.6.0 (default)
Ready! (copied to clipboard) [2s]
Initializing…
Building
▲ npm install
‣ webpack@^2.2.1
‣ babel-runtime@^6.23.0
‣ isomorphic-fetch@^2.2.1
‣ react@^15.4.2
‣ react-dom@^15.4.2
‣ react-intl@^2.2.3
‣ react-redux@^5.0.3
‣ react-router-dom@^4.0.0-beta.8
‣ redux@^3.6.0
✓ Installed 705 modules [31s]
▲ npm run build

proyecto_test@1.0.0 build /home/nowuser/src
NODE_ENV=production webpack -p
(node:88) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
**> Error: EACCES: permission denied, mkdir ‘/Users’
**> npm ERR! Linux 4.7.0-coreos
npm ERR! argv “/usr/bin/node” “/usr/bin/npm” “run” "build"
npm ERR! node v7.6.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! proyecto_test@1.0.0 build: NODE_ENV=production webpack -p
npm ERR! Exit status 1```

Diego José Molina Gonzalez

student•

Me pasa lo mismo, tengo configurado los path de manera absoluta… lo pudiste solucionar?

gracias!

Diego José Molina Gonzalez

student•

Lo he podido solucionar poniendo en webpack __dirname, así se obtiene el path absoluto de la máquina en que está siendo ejecutado.

Aunque ojo, porque debes instanciar esa variable webpack.config.js asi:

const server = require('./webpack/webpack.server.config.js');
const client = require('./webpack/webpack.client.config.js');

module.exports = [
  server(__dirname),
  client(__dirname),
];

y luego en webpack.client.config.js debes recibirlo como parámetro:

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

function configFn(dir) {
  const config = {
    entry: ['./source/client.jsx'],
    output: {
      filename: 'app.js',
      path: `${dir}/built/statics`,
      publicPath: process.env.NOVE_ENV === 'production'
        ? 'http://platzi-react-sfs.now.sh'
        : 'http://localhost:3001',
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          enforce: 'pre',
        },
        {
          test: /\.json$/,
          loader: 'json-loader',
        },
        {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          exclude: /(node_modules)/,
          query: {
            presets: ['es2016', 'es2017', 'react'],
            plugins: ['transform-es2015-modules-commonjs'],
            env: {
              production: {
                plugins: ['transform-regenerator', 'transform-runtime'],
                presets: ['es2015'],
              },
              development: {
                plugins: ['transform-es2015-modules-commonjs', 'transform-runtime'],
              },
            },
          },
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?modules' }),
        },
      ],
    },
    target: 'web',
    resolve: {
      extensions: ['.js', '.jsx', '.css', '.json'],
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
        },
      }),
      new webpack.optimize.OccurrenceOrderPlugin(true),
      new ExtractTextPlugin('../statics/styles.css'),
    ],
  };

  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,
        },
        mangle: {
          except: ['$super', '$', 'exports', 'require'],
        },
      })
    );
  }

  return config;
}


module.exports = configFn;

Esto es por que si, declaras __dirname directamente en webpack.client.config.js obtendras una ruta absoluta que no es la correcta.

Bueno, repite lo mismo con webpack.server.config.js y ya está.

Saludos!

Manuel Galindez

student•

Les comparto un par de links para que vean que son los process y las variables de entorno.

Process
Variables de entorno

Henry De La Hoz

student•

La nueva versión de webpack no necesita Dedupe Plugin, tal cómo se ve en esta linea tomada de la documentación del sitio.

webpack.optimize.DedupePlugin isn’t needed anymore. Remove it from your configuration.

Ivan Robles

student•

Tuve problema al hacer deploy a , me decía que no encontraba el modulo “extract-text-webpack-plugin”, estaba instalando las dependencias desde package.lock.json.

Por alguna extraña razón esa dependencia no estaba incluida en el package.lock.json, así que tuve que borrar el archivo y hacer npm install de nuevo.

Ojo con los archivos .lock.json.

Juan Diego Silva Garcia

student•

Tengo una duda con este archivo, package.lock.json debe subirse a un repositorio remoto o debe ignorarse?

Ivan Robles

student•

Es como tener el package.json de tu proyecto de node, en el caso de , si existe ese es el que toma como referencia para instalar las dependencias a la hora de hacer el deployment. Si no lo tienes basta con que tengas el package.json común de toda la vida.

Hasta donde entiendo no importa si lo ignoras o no en tu repositorio, mientras tengas el package.json de tu proyecto todo estará bien.

Para mas información te recomiendo que leas esta documentación:

Manuel Galindez

student•

Una duda la razón por lo que hacemos esto es por?

NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')

Sergio Daniel Xalambrí

student•

Te referís al JSON.stringify? Eso es debido a como webpack reemplaza process.env.NODE_ENV, al usar JSON.stringify('development') este devuelve "development", si no hacemos el stringify entonces se va a insertar development en vez de "development" (no sería un string) y se rompería el código.

Si te referís a por qué definimos NODE_ENV, esto es porque React optimiza mucho el código al definir esta variable de entorno como production (y ayuda a reducir también el código).

Manuel Galindez

student•

Perfecto amigo, cuando decimos process.env.NODE_ENV || ‘development’ es validando si esta en un ambiente de desarrollo o producción. Eso es lo que mas me confunde.

Franklyn Lombana Molina

student•

Tengo el siguiente error cuando intento correr npm build vi por ahí que otros compañeros también lo tenían y no encontraron solución, apesar de buscar no he encontrado una si alguien ya la encontró agradecería una respuesta, mi versión de node es la 6.9.1

ERROR in app.js from UglifyJs
SyntaxError: Unexpected token: punc (.) [./source/client.jsx:17,15]

//Linea 17
addLocaleData([...en, ...es]);

Miguel Rivas

student•

Tengo el mismo error,
ERROR in index.js from UglifyJs
SyntaxError: Unexpected token: name (html) [./source/server.jsx:20,6]

ERROR in app.js from UglifyJs
SyntaxError: Unexpected token: punc (.) [./source/client.jsx:13,15]

@sergiodxa, somos varios con el mismo problema, puedes ayudarnos un poco ?

Sergio Daniel Xalambrí

student•

ERROR in app.js from UglifyJs
SyntaxError: Unexpected token: punc (.) [./source/client.jsx:17,15]

//Linea 17
addLocaleData([...en, ...es]);

Pareciera que está mal configurado Babel, revisa que este todo bien, lo que dice es que no entiende que son los tres puntos en ...en, eso debería ser transpilado por Babel.

camilo andres reina cifuentes

student•

Hola, como puedo hacer deploy de un proyecto en next.js ya que yo ya cuento con un dominio, pero al hacerlo con now me genera un dominio y para poder hacer la redireccion al mio debo pagar, que puedo hacer, existe otra forma aparte de now para hacer deploy y poder conservar mi dominio?
gracias

Diego Forero

Team Platzi•

Hola, ya te respondí aquí abajo en la otra pregunta que hiciste sobre lo mismo 😦

Geordan Sanchez

student•

Hola profesor, tengo un problema al momento de hacer el build para produccion.
El error que me da webpack es el siguiente:

 ERROR in index.js from UglifyJs
    Unexpected token punc «(», expected punc «:» [index.js:3134,11]

A lo que en mi codigo se refiere a esto:

const api = {
  posts: {
    async getList(page = 1) {
      const response = await fetch(`${baseUrl}/posts?_page=${page}`);
      const data = await response.json();
      return data;
    },

Traceando el error en stackoverflow hay una posible solucion de instalar el plugin transform-es2015-shorthand-properties

Pero no logro aun hacer que compile…

Crees que sea por la nueva version de webpack 2?

Saludos.

camilo andres reina cifuentes

student•

Hola sergio, tengo una duda, si quiero usar docker para mi proyecto, como debo usarlo ya que debo hacer el deploy de los estaticos y por otro lado del proyecto.

Sergio Daniel Xalambrí

student•

Creas dos contenedores, uno donde vas a tener tus estáticos y otro donde vas a tener la aplicación.

Lorgio Ricardo Trinidad Caro

student•

Sergio, tengo dudas sobre el aproach del SSR:

En el ejemplo el BFF no renderiza inmediatamente ya que necesita del SFS, en ese sentido ¿no estarian renderizando lo mismo ya que tanto en el client.jsx como server.jsx van a buscar renderizar Pages?.
El SSR ¿No deberia de renderizar ya con los estilos aplicados css? si ese es el caso Real World, ¿que deberia de hacer el SFS?.
Cual deberia de ser el aproach para decidir que renderizar en el servidor y que en el cliente.

Muchas gracias!!

Sergio Daniel Xalambrí

student•

El server-render sirve para hacer un render inicial en el servidor y mandar el HTML con algo de contenido, hay dos formas en las que se puede usar esto, la primera (que hicimos en el curso) es renderizar la estructura (app shell) y dejar el contenido solo al navegador, la segunda es renderizar ya con contenido. Esto sirve para mejorar la experiencia del usuario en entrar a un sitio ya que desde un principio ve algo.

Luego el navegador carga el JS desde el servidor de estáticos (SFS) y se encarga de traerse el contenido y hacer render en el navegador, y si el usuario hace scroll o si cambia de ruta en vez de recargar la página simplemente traemos más contenido desde el navegador y hacemos el render de los nuevo, así damos una mejor experiencia de navegación.

Alfredo Carbajal carbajal

student•

Hola Sergio, quisiera consultarte si es posible deployar mi aplicación en un IIS8 que es donde tengo mis aplicaciones; he buscado la manera de hacer funcionar el webpack en el server, realice el ejemplo que se muestra para probar webpack y funciona si abro el index.html desde el folder pero si accedo por la URL de la página que configure en IIS no ejecuta ninguna acción de webpack; agradezco de antemano tu respuesta.

Sergio Daniel Xalambrí

student•

No se como funciona IIS8, pero simplemente usa Webpack para hacer build de tus archivos para producción y luego subí tu servidor encargado del render y tus estáticos a donde desees.

Markoz Peña Mendez

student•

@Sergio Hola Sergio 😃 al hacer el deploy me sale este error 😕
Ojala puedas ayudarme

Saludos 😃

npm ERR! Make sure you have the latest version of node.js and npm installed

Sergio Daniel Xalambrí

student•

Hace lo que dice el error, verifica que tengas la última versión de Node.js y npm, now desde la última versión requiere la v7 o superior.

Markoz Peña Mendez

student•

Ya tengo lo ultima de todo 😕

node v7.7.3
npm v4.1.2

No entiendo a que se deba este error.

Néstor Fabián Gonzalez

student•

Tengo el siguiente error al ejecutar el comando npm run bff => Warning: Failed prop type: Invalid prop children of type array supplied to IntlProvider, expected a single ReactElement. Este error surgió cuando agregue en server.jsx
<IntlProvider locale={locale} messages={messages[locale]}>
<ServerRouter location={request.url} context={context}>
<Pages />
</ServerRouter>,
</IntlProvider>,

Sergio Daniel Xalambrí

student•

Hay una coma de más después de cerrar ServerRouter

Néstor Fabián Gonzalez

student•

Creo que el problema es la versión de react-intl, ya que este problema lo vengo presentando con las demás dependencias

Deploy a producción

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS