Cómo implementar una aplicación React en Heroku

En esta guía, aprenda cómo implementar una aplicación React JavaScript en Heroku, utilizando la CLI de Heroku, la GUI y la CLI de Git, directamente desde un repositorio de Git.

Introducción

Cuando un desarrollador crea una aplicación, el siguiente paso es compartirla con amigos o con el público para que todos puedan acceder a ella. Ese proceso de transferir código de un entorno de desarrollo a una plataforma de alojamiento donde se sirve a los usuarios finales se llama implementación.

El alojamiento solía ser bastante ineficiente antes de que aparecieran las plataformas de alojamiento en la nube como Heroku. Fue realizado principalmente por proveedores de alojamiento que requerían cargar todos los activos estáticos (archivos de compilación generados al ejecutar npm run build) cada vez que realizamos un cambio. No había otra forma de cargar archivos estáticos que no fuera algún tipo de interfaz FTP (ya sea local o en el servidor de alojamiento), lo que puede ser bastante estresante y técnico.

En esta guía, veremos cómo implementar una aplicación React en Heroku usando la CLI (interfaz de línea de comandos) a través de Heroku Git. Además, veremos cómo volver a implementar el código cuando hagamos algunos cambios en nuestra aplicación.

¿Qué es Heroku y por qué usarlo?

Heroku es una plataforma en la nube basada en contenedores que permite a los desarrolladores implementar, administrar y escalar fácilmente aplicaciones modernas. Esto permite a los desarrolladores concentrarse en su trabajo principal: crear excelentes aplicaciones que deleiten y atraigan a los usuarios. En otras palabras, Heroku aumenta la productividad del desarrollador al simplificar al máximo la implementación, el escalado y la administración de aplicaciones.

Hay numerosas razones por las que deberíamos usar Heroku:

  • Admite múltiples idiomas: desde cero, la plataforma Heroku admite más de ocho idiomas, incluidos Node, Java y Python.
  • Admite varias bases de datos y almacenes de datos - Heroku permite a los desarrolladores seleccionar entre una variedad de bases de datos y almacenes de datos en función de los requisitos específicos de las aplicaciones individuales: Postgres SQL, MySQL, MongoDB, etc.
  • Menos costoso: crear y alojar un sitio web estático nos ahorrará dinero a largo plazo.

Comenzando

En esta guía, implementaremos una aplicación de búsqueda de películas, que es una aplicación React simple que busca películas en una API. Antes de comenzar, debe registrarse en Heroku si aún no tiene una cuenta, ya que aquí es donde implementaremos nuestra aplicación React. Podemos ir a heroku.com y registrarnos haciendo clic en el botón de registro en la esquina superior derecha. La canalización de registro es prácticamente la estándar, por lo que no debería tener ningún problema para crear una cuenta en Heroku:

heroku account creation

Cuando haya creado una cuenta de Heroku, podemos proceder a la implementación real de nuestra aplicación.

{.icon aria-hidden=“true”}

Nota: Anteriormente, había una opción para implementar a través de la integración de GitHub, pero esa función se revocó debido a una brecha de seguridad. La mejor manera de implementar en Heroku a partir de ahora es a través de Heroku Git, que se realiza en nuestra CLI (interfaz de línea de comandos).

Implementación con Heroku Git

Heroku utiliza el sistema de control de versiones Git para administrar las implementaciones de aplicaciones. Es importante tener en cuenta que no necesitamos ser expertos en Git para implementar nuestra aplicación React en Heroku, todo lo que necesitamos saber son algunos conceptos básicos, que se tratarán en esta guía.

{.icon aria-hidden=“true”}

Si no está seguro con Git, no se preocupe. Cubriremos todo lo que necesita saber. De lo contrario, consulte nuestro curso gratuito sobre Git: [Git Essentials: Developer's Guide to Git](https://wikihtp.com/courses/git-essentials-developers-guide-to-git /){objetivo="_blank"}

Antes de comenzar

Como implica el nombre Heroku Git, usaremos Git, lo que significa que debemos tener Git instalado. Lo mismo se aplica a la CLI de Heroku. Si no tiene esos dos instalados, puede seguir las siguientes instrucciones para guiarlo a través del proceso de instalación:

Después de instalarlos con éxito, podemos proceder a crear una aplicación en Heroku, en la que se implementará nuestra aplicación React más adelante. Podemos crear una aplicación en Heroku de dos maneras: a través de la terminal (comando CLI) o manualmente en nuestro panel de Heroku.

{.icon aria-hidden=“true”}

Nota: Un concepto erróneo común es que Git y GitHub son lo mismo, ¡pero no lo son! Git es un sistema de control de versiones utilizado por muchas aplicaciones y servicios, incluido, entre otros, GitHub. Por lo tanto, no necesita enviar su código a GitHub ni tener una cuenta de GitHub para usar Heroku.

Cómo crear la aplicación Heroku manualmente

Primero veamos cómo podemos crear una aplicación usando el Tablero de Heroku. El primer paso es hacer clic en el botón crear nueva aplicación:

creating an app on heroku

Esto nos redirigiría a una página donde debemos completar la información sobre la aplicación que queremos crear:

filling out app information on heroku

{.icon aria-hidden=“true”}

Nota: Asegúrese de recordar el nombre de la aplicación que creó en Heroku porque pronto conectaremos nuestro repositorio local a este repositorio remoto.

Una vez que se completa este proceso, podemos comenzar a implementar nuestra aplicación desde un entorno local a Heroku. Pero, antes de ver cómo implementar una aplicación, consideremos un enfoque alternativo para crear una aplicación Heroku: usar la CLI de Heroku.

Cómo crear la aplicación Heroku a través de CLI

Alternativamente, puede crear una aplicación en Heroku usando la CLI. Heroku se aseguró de que esto fuera lo más sencillo posible. Lo único que debe hacer es ejecutar el siguiente comando en su terminal de elección (solo asegúrese de reemplazar <app-name> con el nombre real de su aplicación):

1
$ heroku create -a <app-name>

{.icon aria-hidden=“true”}

Nota: Si ejecuta este comando desde el directorio raíz de la aplicación, el repositorio vacío de Heroku Git se configura automáticamente como remoto para nuestro repositorio local.

Cómo enviar código a Heroku

El primer paso antes de enviar el código a Heroku será ubicarte en el directorio raíz de tu aplicación (en la terminal). Luego use el comando heroku login para iniciar sesión en el panel de control de Heroku. Después de eso, debe aceptar los términos y condiciones de Heroku y, finalmente, iniciar sesión en Heroku con sus credenciales de inicio de sesión:

logging into heroku via cli

Posteriormente, volverá a la terminal para que pueda continuar con el proceso de implementación en Heroku. Ahora, debe inicializar el repositorio:

1
$ git init

Y luego registre la aplicación que creamos anteriormente en Heroku como el repositorio remoto para el local que inicializamos en el paso anterior:

1
$ heroku git:remote -a <app-name>

{.icon aria-hidden=“true”}

Nota: Asegúrate de reemplazar <app-name> con el nombre de la aplicación que hemos creado anteriormente en Heroku (por ejemplo, movies-search-app).

Ahora podemos proceder a implementar nuestra aplicación. Pero, dado que necesitamos implementar una aplicación React, primero debemos agregar el paquete de compilación React:

1
$ heroku buildpacks:set mars/create-react-app

Una vez que se completa, el siguiente paso es enviar nuestro código al repositorio remoto que hemos creado en Heroku. El primer paso es organizar nuestros archivos, enviarlos y finalmente enviarlos al repositorio remoto:

1
2
$ git commit -am "my commit"
$ git push heroku main

{.icon aria-hidden=“true”}

Nota: Supongamos que queremos cambiar nuestra rama de principal a desarrollo. Podemos ejecutar el siguiente comando: git checkout -b development.

Una vez que hayamos enviado con éxito a Heroku, podemos abrir nuestra aplicación recién implementada en nuestro navegador:

1
$ heroku open

deploy and open heroku application

Cómo actualizar nuestra implementación

La siguiente pregunta que probablemente tenga es cómo volver a implementar la aplicación después de que le hagamos cambios. Esto funciona de manera similar a como lo hace en cualquier plataforma basada en Git: todo lo que tenemos que hacer es organizar los archivos, confirmar y luego enviar el código a Heroku:

1
2
$ git commit -am "added changes"
$ git push heroku main

Heroku selecciona automáticamente este cambio y lo aplica a la aplicación en vivo.

Conclusión

Heroku puede ser una herramienta bastante útil para implementar su aplicación React. En este artículo, hemos analizado cómo implementar una aplicación React en Heroku usando Heroku Git. Además, hemos repasado algunos comandos básicos de Git que necesitaría al trabajar con Heroku Git y, finalmente, hemos discutido cómo volver a implementar una aplicación después de realizar cambios en ella.