Linter, extensiones y deploy con Now

Seria bueno que actualizarán este video. Now ya no es now ahora es vercel y tiene algunas diferencias, puede llegar a ser confuso. En todo caso lo que deben hacer es:

1. Instalar vercel a traves del comando npm i -g vercel
2. Despues de instalar vercel deben hacer vercel login y verificar su correo electronico, para que la instancia de versel local este conectada con el remoto y de esta forma evitar los tokens.
3. Luego si realizar los pasos que dice el profe, pero con la difencia que el comando no es now, es vercel

Si tienen muchos errores y desean corregirlos les recomiendo agregar esta configuración al package.json
"lint": “standard”,
“lint-fix”: “standard --fix”

Y ejecutan:
npm run lint-fix

Para los que tiene problemas al hacer deploy de la app les dejo el repositorio configurado para vercel CLICK AQUÍ, Clonen o descarguen el repositorio, luego ejecutan el comando vercel

$ vercel

Les saldran una serie de preguntas

? Set up and deploy “~\Downloads\react-vercel-master”? [Y/n] y (Presionan y)
? Which scope do you want to deploy to? [nick de vercel] (Presionan Enter)
? Link to existing project? [y/N] (Presionan n)
? What’s your project’s name? petgram-vercel (Presionan Enter)
? In which directory is your code located? ./ (Presionan Enter)

Al terminar saldria algo así

❗️  The `name` property in vercel.json is deprecated (https://vercel.link/name-prop)
�  Linked to cavesa/petgram-vercel (created .vercel)
�  Inspect: https://vercel.com/cavesa/petgram-vercel/n93wwp0u1 [3s]
✅  Production: https://petgram-vercel.vercel.app [copied to clipboard] [25s]
�  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
�  To change the domain or build command, go to https://vercel.com/cavesa/petgram-vercel/settings

Para el deploy en produccion debemos cambiar el output directory: para ellos nos vamos a vercel, buscamos el proyecto y luego en settings, habilitamos el output directory y escribimos dist le damos en el botón SAVE. Luego hacemos el siguiente codigo:

Luego hacemos el siguiente codigo:

$ vercel --prod

Fin

Hola, la integracion de Prettier con Eslint del minuto 05:10 Ya no aparece en las nuevas actualizaciones de VSCode.

En cambio se hace anexando al settings.json lo siguiente

 // Configuraciones para integrar ESLint, prettier y vscode
    "editor.formatOnSave": true,
    // Colocar Off el format de JS y JSX, para poder hacerlo via Eslint
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "[javascriptreact]": {
        "editor.formatOnSave": false
    },
    // Esto le dice al plugin de ESLint que cualquier lint se ejecute al salvar. 
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // Adicional, PERO MEGA IMPORTANTE... si tienes prettier como extension, debes apagarlo para js y jsx pq esto se hara a traves del eslint
    "prettier.disableLanguages": [
        "javascript",
        "javascriptreact"
    ]

Cada linea fue comentada para explicar su funcion,
BTW, no me acostumbro a no usar el semicolon o punto y coma. Para aquellos que tambien se sienten asi, puede instalar la version semistandard en vez de a standar

npm i semistandard --save-dev

Lo siento @midudev , lo intente pero no me acostumbro

DEPLOY A VERCEL(NOW) 2021

• Realice un tutorial de como hay que hacer deploy A vercel(antes llamado now).
  tutorial

Ha sido más el tiempo perdido buscando como funcione vercel, y los parámetros a configurar que el tiempo que dura el curso. Mala experiencia.

Si no tienen tiempo o recursos para actualizar un curso entero, deberian de bolverlos mas modulares, y las secciones donde cambien algunos temas o implementaciones, solo lo re-graba alguien que sepa del tema y listo, asi te evitas tener que cambiar un curso entero cuando solo han cambiado algunos temas.

Si alguno tuvo inconvenientes en VSCode con la siguiente validación

• Format On Save: false
• Prettier: Eslint Integration: true
• Eslint: Auto Fix On Save: true

Instalé las dependencias de desarrollo

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

Y configure manualmente en Open Settings (settings.json) ubicado en la parte superior derecha del editor (Tiene forma de {} o como un archivo" y revisan si su archivo de configuración tiene las siguiente lineas y sino las insertan

"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
"eslint.format.enable": true,
"prettier.eslintIntegration": true,

eslint.autofixonsave: true esta obsoleto por eso debe reemplazarse con editor.codeActionsOnSave

Para la parte de Vercel en 2022 haremos lo siguiente:

• Ahora utilizaremos Servel para hacer el deploy de nuestro proyecto.
• Descargaremos e instalaremos vercel para que nos registre de una manera mucho más fácil los tokens de acceso y podamos continuar con el curso.
• Entraremos a la carpeta de api y notaremos que ya tiene un archivo now.json que preparamos para ti con toda la configuración necesaria para hacer el deploy.
• Instalar vercel a traves del comando npm i -g vercel
• Despues de instalar vercel deben hacer vercel login y verificar su correo electronico, para que la instancia de versel local este conectada con el remoto y de esta forma evitar los tokens.
• Para desplegar el proyecto del backend haremos lo siguiente en nuestra terminar:
  • cd api
  • Cambiamos el name de la aplicación en el vercel.json
  • Finalmente ejecutamos vercel

{
  "version": 2,
  "name": "petgram-server-max",
  "alias": ["petgram-api-zenaku"],
  "builds": [{ "src": "index.js", "use": "@now/node" }],
  "routes": [{
    "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, Content-Type, Accept"
    },
    "src": "/.*", "dest": "index.js" }
  ]
}

• Ahora para desplegar nuestro front haremos lo siguiente:
  • Crearemos un archivo versel.json en el root de nuestro proyecto con lo siguiente:

{
    "version": 2,
    "name": "petgram-zenaku",
    "builds": [
        {
            "use": "@versel/static-build",
            "src": "package.json"
        }
    ],
    "routes": [
        {
            "src": "(.*).js",
            "dest": "/$1.js"
        },
        {
            "src": "(.*).json",
            "dest": "/$1.json"
        },
        {
            "src": "/.*",
            "dest": "index.html"
        }
    ]
}

• En nuestro package.json añadiremos el siguiente script: ““versel-build””: ““npm run build””.
• Finalmente en la raíz de nuestro proyecto ejecutaremos servel para que nos dé una URL en la que se verá nuestro proyecto."

Extra:
Para el deploy en produccion debemos cambiar el output directory: para ellos nos vamos a vercel, buscamos el proyecto y luego en settings, habilitamos el output directory y escribimos dist le damos en el botón SAVE. Luego hacemos el siguiente codigo:

$ vercel --prod

Este video es un filtro, aquí es donde demuestras si eres digno o no. XD

Platzi cuando piensan actualizar este curso?

También podemos poner este comando para que lo arregle automaticamente:

npm run lint -- --fix

WOW despues de mucho intentarlo lo logre!
Si tienen este error:
Error! No Output Directory named “public” found after the Build completed. You can configure the Output Directory in your Project Settings.
Deben ir a la pagina de Zeit, ingresan a su projecto, luego van a settings y en Build & Development Settings cambian el output directory de public a dist que es la carpeta que nos crea webpack!
https://vercel.link/missing-public-directory
espero les sirva!

En el archivo now.json (aunque pueden cambiarle el nombre a vercel.json para mayor claridad) la propiedad name ya esta obsoleta en la configuración oficial de Vercel (https://vercel.com/docs/configuration#project/name), por lo tanto puede que les dé una advertencia cuando están haciendo el deploy. Pueden borrar sin ningun problema esa propiedad del archivo json, solo dejando la del alias y ya no les mostrar ninguna advertencia y les compilará correctamente

Bueno nada mejor que sentarse en la mañana un sábado con un tasa de café y estudiar!!! Excelente clase.

Para los que utilizan los punto y coma, la version standard les va a mostrar errores en los semicolon, pueden utilizar semistandard, la configuracion es cambiar standard por semistandard

npm i -D semistandard

2023:

Sigan estos pasos:
https://platzi.com/tutoriales/1601-react-avanzado/11554-deploy-a-vercel-2021/

Hay que actualizar el bcrypt al más nuevo, en mi caso me funcionó desinstalar y volver a instalar ya que al actualizar no me dejaba, esta actualización se hace dentro de api.

Con eso me dejo hacer deploy.

Si bien es cierto que podemos dar nosotros mismo con las soluciones. Lo ideal sería actualizar el curso completo de react avanzado… ademas de todo el material anticuado, considero que react 18 ha propuesto nuevas cosas que deberían estar en este curso.

Los errores de lint se arreglan con el comando

npx standard --fix

se corrigen facil.

El curso está demasiado desactualizado, muy mal platzi!, que decepción, esto tendré que compartirlo en mis redes sociales

Yo pude correr el comando de vercel sin el script de “now-build” y funcionó bien. Imagino que es por la versión.

Tengo el mismo mensaje de error:
platzi/curso-platzi-react-avanzado/src/index.js:4:34: Parsing error: Unexpected token /

Zeit ya no tiene la app para desktop en su pagina pq no daran mas soporte, pero se consigue full operativa en el siguiente repo https://github.com/zeit/now-desktop/releases/

instale now con la linea de comandos
$npm install -g now

Hay muchos estudiantes que se ofenden por exigir que los cursos se actualicen, es increíble que por un curso por el que estas pagando te digan “cambia Now por Vercel y listo”, cuando para nada es así de sencillo, si yo tuviera el tiempo de investigar todo esto, no pagaría Platzi, no es queja, es exigir lo que pagas, es cuestión básica de inversión, no se necesita un curso para entender eso. Muy mala experiencia este curso, tendré que buscar en otras plataformas o esperar a que actualicen este curso.

Deberían de actualizar este proyecto. Hay mucho contenido antiguado.

Esta clase debe de actualizarse…

Me parece que está parte del linter se la deberían ahorrar. Sé que se intenta ensañar a estandarizar código, pero el curso es de react, no de linter y en la mayoría de los casos no funcionan las herramientas. O al menos en mi caso he perdido un montón de tiempo en algo que no es de mi interés

super facil el deploy en now

Looks like something went wrong!
We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, try refreshing.

Estoy teniendo ese error al querer installar Now CLI, intenté usando brew y tambien clonando el repo y siempre me responde con error 500, alguien más tiene ese error?

standard: Use JavaScript Standard Style (https://standardjs.com)
/var/www/html/curso-platzi-react-avanzado/src/index.js:4:53: Parsing error: Unexpected token /

Ni idea del por qué ocurre eso, me percaté de que mis archivos index.js, webpack.config. y los json estuviesen igual… no he avanzado a raíz de ello.

Por alguna razón, el linter me esta avisando de que la linea: ReactDOM.render(<h1>Hello</h1>, document.getElementById(‘app’)) tiene un error en el h1 de cierre, el error es el siguiente:
Parsing error: Unexpected token /

Y la integracion de prettier con eslint ahora parece que esta desfasada y no aparece.
https://github.com/prettier/prettier-vscode#vscode-eslint-and-tslint-integration

Como lo habeis solucionado?

Gracias.

aqui mi deploy (https://petgram.monserrateluisje.now.sh/). genial el curso, el profesor se toma el tiempo de explicarnos la función de cada herramienta, espero siga asi!

Estoy utilizando visual studio code version 1.40 y no encuentro la opcion de configuracion de prettier: Eslint integration ¿Alguien mas con el mismo problema?

Vamos gente estoy en el 2023 viendo el ultimo curso que podre ver jaja pero no se rindan vale la pena tener errores y poder corregirlos, vale la pena, por algo somos desarrolladores, esto es la vida real pasa a menudo

He visto que la mayoría hemos tenido problemas con la actualización que se realizó de Zenit a Vercel realizando el curso en el 2023. (Esto me funciono y espero les pueda servir a los que tienen el mismo error).

• Inicialmente realice la configuración como se sugiere en el siguiente foro:
  https://platzi.com/tutoriales/1601-react-avanzado/11554-deploy-a-vercel-2021/

Al realizar esta configuración y ejecutar el comando vercel en la raíz api que se facilita en el curso me encontré con el siguiente error:

Revisando el package.json del api pude observar que se tenía configurado el siguiente script “dev:api”:

Ejecutándolo me mostro el error especifico y es el uso de jwt de express-jwt en el archivo index.js del api.
Remplace la dependencia jwt que se ve en el archivo por expressjwt y adicional a eso agregue el siguiente parámetro a la función de remplazo del jwt: algorithms: [“RS256”].

Un paso a paso para corregir el error seria el siguiente:

1. Modificar dependencia jwt por expressjwt en el archivo index.js en la raíz del api.

const jwt = require("express-jwt");

por:

const { expressjwt } = require("express-jwt");

1. Modificar la función jwt por expressjwt.

const auth = expressjwt({
  secret: process.env.JWT_SECRET,
  credentialsRequired: false,
});

1. Adicionar como parámetro algorithms: [“RS256”] dentro de la función.

const auth = expressjwt({
  secret: process.env.JWT_SECRET,
  credentialsRequired: false,
  algorithms: ["RS256"],
});

1. Ejecutar comando dev:api para validar funcionamiento. Si este se ejecuta correctamente podemos ingresar a graphql y tambien ejecutar el comando vercel (este arrojara la url para acceder al api y podremos consultar con las url configuradas previamente):

Ejemplo: https://petgram-server- “----------”.vercel.app/categories

Espero pueda ser de ayuda a los que tienen este mismo problema.

Saludos.

en lo personal platzi me ha ayudado mucho, lo poco que se de la programación es gracias a esta plataforma , pero considero que realmente no esta bien y no es nada agradable meterte a los cursos y tratar de realizar el proyecto de cada uno y mientras sigues los pasos del maestro todo te va saliendo mal , no por que el maestro no sepa si no por que son cursos muy viejos que no actualizan deberían hacerlo por que muchos comandos ni siquiera son los mismos y eso hace que te sientas frustrado de no poder avanzar, en vez de estar sacando cursos nuevos actualicen los que ya están que son de gran ayuda.

Hay muchas configuraciones que Vercel solicita y que no aparecen en video… Creo que debería dedicarse un video para actualizar el tema de Now y mostrar cómo debe configurarse

Lo logré. No sé cómo, pero lo logré.
Es necesario que actualicen este curso si van a seguir utilizando recursos desactualizados, o al menos dejar una guía clara , no nada más decir “zeit ahora es vercel, bye”.

Sería bueno que actualicen este curso, porfavor. Gracias

Inconcluso

App
petgram
API
server

Para hacer el deploy pueden hacer lo siguiente:
1.- npm i -g vercel
2.- vercel login
2.1.- Hacer el login a vercel
3.-vercel
3.- y, enter, name of project, enter

Cuando hago el NOW de Api me sale solo esto en el navegador del backend
Cannot GET /

OCTUBRE 2020

En mi caso no genere el archivo vercel.json para el frontend.

1-Parada en la raiz del proyecto hice el login

versel login 

2- Subi el proyecto

versel --prod

3- Me fui a las “Setting” y configure la carpeta donde webpack deja nuestro proyecto dist/

2- Actualice el proyecto

versel --prod

Tardo aprox 1min y listo quedo funcionando 😄

Mas info:
https://vercel.com/guides/upgrade-to-zero-configuration

super facil! https://petgram.leandroccasarin.now.sh/

API

• petgram-app-api

Frontend

• petgram-app

Un profesor a la altura del nivel avanzado

Excelente, explicación muy rápida y sencilla para la configuración de webpack, babel y el linter.

esto cada vez se pone mejor

https://petgram-chi-three.now.sh/

les comparto mi url

App
Petgram

Estos dos primero modulos van volando pero con mucha información nueva para mi ! 🙌🏻

APP

https://aomine-petgram-platzi.aomine1745.now.sh/

Sin ningún problema 😄

Yo no tuve la misma suerte para hacer el deploy con now, me salió el siguiente error:

> Error! An unexpected error occurred!
  TypeError: e.ref is not a function
    at f.ref (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:315087)
    at H2Context.getOrCreateHttp2 (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:312648)
    at Context.getOrCreateHttp2 (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:1418363)
    at Context.getHttp2 (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:1418588)
    at Object.get (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:1417129)
    at fetchImpl (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:3770550)
    at <anonymous> TypeError: e.ref is not a function
    at f.ref (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:315087)
    at H2Context.getOrCreateHttp2 (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:312648)
    at Context.getOrCreateHttp2 (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:1418363)
    at Context.getHttp2 (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:1418588)
    at Object.get (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:1417129)
    at fetchImpl (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:3770550)
    at <anonymous>

Este error ocurre por la versión de Node que tenemos, en mi caso era la 8.9.4 y now necesita la versión 8.10 o superior, así que la solución es obvia, actualizar nuestro node a una versión superior.

https://zeit.co/docs/builders#official-builders/static-builds/static-build-project-node-js-version

https://inspetgram-60ot9bvl5.now.sh

a mi me sale este error

standard: Use JavaScript Standard Style (https://standardjs.com)
/Users/Adranuz/Documents/proyectos/react/Petgram/src/index.js:1:8: ‘React’ is defined but never used.

RUL: https://petgram-dantecode.leonardofrp5.now.sh/

Wow este curso cada vez me emociona más! 😄
petgram-fad.now.sh

como es que instalo now para que aparezca en la barra de mac ? en la sección de download solo aparece la instalación de un paquete con npm i -g now y nada mas.

https://petgram.karlbehrensg.now.sh/

Vamos a instalar StandardJS como dependencia de desarrollo con: npm i standard --save-dev. StandardJS nos va a servir de Linter para una mejor escritura de JavaScript/React.
Agregaremos un nuevo script en nuestro package.json: ““lint””: ““standard””.
Ahora vamos a ignorar aquellos archivos que no queremos que el Linter arregle, añadiremos en nuestro package.json lo siguiente:
"“standard”": [
"“ignore”": [
""/api/**""
]
]

hora para desplegar nuestro front haremos lo siguiente:
Crearemos un archivo now.json en el root de nuestro proyecto con lo siguiente:
{
"“version”": 2,
"“name”": ““petgram””,
"“builds”": [
{
"“use”": “”@now/static-build"",
"“src”": ““package.json””
}
],
"“routes”": [
{
"“src”": “”(.).js"",
"“dest”": “”/$1.js""
},
{
"“src”": “”(.).json"",
"“dest”": “”/$1.json""
},
{
"“src”": “”/.*"",
"“dest”": ““index.html””
}
]
}
En nuestro package.json añadiremos el siguiente script: ““now-build””: ““npm run build””.
Finalmente en la raíz de nuestro proyecto ejecutaremos now para que nos dé una URL en la que se verá nuestro proyecto."

Ahora, queremos que nuestro Linter nos detecte los errores a medida que vamos escribiendo, para hacer esto añadimos lo siguiente a nuestro package.json:
"“eslintConfig”": {
"“extends”": [
""./node_modules/standard/eslintrc.json""
]
}

Ahora debemos tener lo siguiente en nuestro editor de código para que funcione todo al pie de la letra:
Tener instalada la extensión ESLint
Si quieres que al guardar los cambios se formatee tu código deberás tener instalada la extensión Prettier
Tener las siguientes configuraciones en VSCode:
Format On Save: false
Prettier: Eslint Integration: true
Eslint: Auto Fix On Save: true
Ahora utilizaremos Now para hacer el deploy de nuestro proyecto.
Descargaremos e instalaremos Now para que nos registre de una manera mucho más fácil los tokens de acceso y podamos continuar con el curso.
Entraremos a la carpeta de api y notaremos que ya tiene un archivo now.json que preparamos para ti con toda la configuración necesaria para hacer el deploy.
Para desplegar el proyecto del backend haremos lo siguiente en nuestra terminar:
cd api
Cambiamos el name de la aplicación en el now.json
Finalmente ejecutamos now

Si no les corre el vercel login o cualquier otro comando de vercel, te puede aparecer algo asi como no detectamos el comando vercel tienes que seguir estos pasos, en mi caso ubuntu: link directo 100% real no fake xD

Por fin!

https://petgram-jcom-cjorozco.vercel.app/

Hola a todos, ya que el curso en esta parte esta descontinuado decidí correr el back de manera local. Se accede a la carpeta api y luego ejecutamos;

npm run dev:api

Con esto tenemos el graphql en el puerto 3500.
Hasta el momento no he tenido problemas.

las dependencias para el 2023

  "dependencies": {
    "apollo-server-express": "^3.11.1",
    "bcrypt": "^5.1.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "express-jwt": "^7.7.7",
    "graphql": "^16.6.0",
    "jsonwebtoken": "^8.5.1",
    "lowdb": "^3.0.0",
    "uuid": "^9.0.0"
  },

ya no es necesario en vercel.json

  "name": "petgram-server-TU_NOMBRE",

https://curso-react-wilsongus2003.vercel.app

si al correr lint da error en los espacios del indentado, creen un archivo llamado .eslintrc.js a nivel de proyecto, y agreguen esta propiedad:

rules: {
   'indent': 'off'
}

Actualización 2022:

Estuve como tres horas sorteando warnings y errors por todas las nuevas versiones lanzadas en los últimos dos años,
investigando cómo solucionar cada uno de ellos… y más o menos me fue quedando.

Lo que más tiempo me llevó fue el backend (que, además, cambié las importaciones de paquetes a Modules en lugar de la vieja CommonJS), aunque todavía no lo desplegué.

Aquí dejo enlaces a mi repositorio actualizado y a la web desplegada en Vercel para que puedan cotejar las diferencias.

Espero les sirva!

• Mi página en Vercel
• Mi repo en GitHub

Hoy en día con Vite y Vercel es muy sencillo todo.
Aquí mi proyecto hasta ahora: https://curso-avanzado-react-eta.vercel.app/

Deployar == Desplegar

Les comparto mi link

Cambiar a todo que dice now a vercel

cambio en api y en proyecto de react
now.json a vercel.json

cambio en api/now.json a vercel.json
@now/node a @vercel/node

cambio en proyectoreact/now.json a vercel.json
@now/static-build a @vercel/static-build

post deplay con vercel
https://malcode.dev/posts/deploy-react-app-en-vercel/

Si les aparece este error

vercel : Cannot load file npm\vercel.ps1 because running
scripts is disabled on this system.
()

Solo tienen que habilitar las scripts en la PowerShell.
1-) Abre PowerShell como Administrador y ejecuta este comando:

Get-ExecutionPolicy

Te aparecerá <<Restricted>>
Luego ejecutas

Set-ExecutionPolicy Unrestricted

Y respondes Si.
Y para volver a deshabilitar los scrips solo ejecutas

Set-ExecutionPolicy restricted

Les comparto mi link

Me interesa el curso que recomienda pero veo que no está disponible.

https://platzi.com/clases/deploy-now/

Para arreglar el lint, es mejor usar el comando

standard --fix

Sino te puedes volver loco

Sí se pudo jsjsj:
petgram-maidedhp-gn5zux9o2-maidedponce.vercel.app

https://petgram-maidedhp.vercel.app/

https://petgram-js14.vercel.app/

Listo es solo cuestion de hacer como decia el articulo anterior, cambiar donde dice now por vercel y funciona.

Me encanta que expliquen paso a paso esto sirve muchisimo, sin embargo prefieron netlify,subis el repo a github y lo conectas!

Aqui la url de mi deploy!! 😄
https://petgram-paolo.vercel.app/

Igual si pude :9 https://petgram-londrack.vercel.app/

Hola people este es mi repositorio, copien y peguen todo si quieren el deploy lo hice desde la pagina, despues de montar el repositorio en github en lapagina de vercel busque como hacer un deploy sencillo y asi me dio.

https://github.com/jgestradam/petgram/tree/24a461681f9dcd83b0557d8950d4396e7001d312

Actualmente es vercel, aquí más info:
https://vercel.com/cli

webpack-cli] Error: Cannot find module Html-webpack-plugin
Nunca desplegó el servidor en vercel

Aqui mi url !! AJAJA
https://petgram-indol-nine.vercel.app/

https://petgram-woad-two.vercel.app/

v

Esta clase esta genial pero debemos tener encuenta el cambio de now a vercel

Solicito su ayuda, se me presenta el siguiente error:

_> Error! Build failed

Error! Check your logs at https://curso-platzi-react-avanzado-e2nwrlpv4.now.sh/logs or run now logs curso-platzi-react-avanzado-e2nwrlpv4.now.sh

…revisando el log:
_ Error: Build was unable to create the distDir: “public”.
More details: https://zeit.co/docs/v2/advanced/platform/frequently-asked-questions#missing-public-directory_

… revisando las “frequently-asked-questions#missing-public-directory”, me dice que debería poner el el package.json algo como:
_ {
“scripts”: {
“build”: “my-framework build --output public”
}
}_

… y no se como aplicar esta sujerencia, considerando además Miguel no configuró asi su archivo… será que es porque estoy usando en windows?

https://petgram-one-theta.vercel.app/

https://petgram-lehder.lehder.vercel.app

https://petgram.carlosadev.now.sh

Por fin, des pues de muchos intentos y de leer mucha documentación
Aprende a pronunciar
por que tuve muchos errores, he logrado que compile todo, he dejado mi URL.

Acerca de now

Aquí mi URL
https://petgram.manuelojeda.now.sh

Magnificas herramientas para tener tus proyectos.

Mi enlace: https://petgram.gbeto21.now.sh/