Implementación de la aplicación React de Github a Netlify

Realizaré un proceso de guía para implementar una aplicación React de Github a Netlify.

Si tiene una estructura de proyecto donde está la aplicación de reacción NO anidado en un subdirectorio como en el ejemplo que se muestra a continuación

Puede usar los siguientes pasos para implementar:

  • Envía tu código a Github
  • Conecte la cuenta de Github a su cuenta de Netlify
  • Seleccione el proyecto para implementar
  • Implementar proyecto

En los casos en que la aplicación de reacción está en un directorio anidado como el ejemplo que se muestra a continuación

Agrega un netlify.toml archivo a la raíz de su proyecto y agregue la siguiente configuración al archivo.

[build]
  command = "npm run build"
  publish="path-to-react-app/build"
  base = "path-to-react-app"

Reaccionar enrutador

Si ha utilizado el enrutador de reacción en su proyecto, al redirigir y volver a cargar a una nueva ruta, puede encontrarse con un problema en el que Netlify arrojaría un error (“página no encontrada”) como se muestra en el siguiente ejemplo.

Puede agregar el siguiente código a su netlify.toml expediente.

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Una vez agregado, envíe los cambios a Github. Netlify debería implementar automáticamente los cambios; de lo contrario, implemente los cambios manualmente. Una vez implementada, su aplicación no debería arrojar errores, como se muestra a continuación.

Nota: netlify.toml es un archivo de configuración donde puede especificar cómo Netlify debe construir/ejecutar su aplicación. Se puede lograr mucho con el netlify.toml expediente. Obtenga más información sobre el netlify.toml expediente aquí.

Variables de entorno

Si ha utilizado variables de entorno en su proyecto, también puede agregarlas a Netlify siguiendo los pasos que se muestran en la imagen a continuación.

Conclusión

A partir de lo anterior, hemos visto y hemos podido demostrar que alojar una aplicación de reacción a través de Github en Netlify es bastante simple y sin problemas, por lo que se puede hacer en poco o nada de tiempo.

Si tiene alguna pregunta o comentario sobre este artículo, no dude en comunicarse.
Gracias por leer.

Similar Posts

Leave a Reply

Your email address will not be published.