GUÍA PARA GENERAR UN DEPLOY USANDO GITHUB Y SERVICIOS ONLINE

Usando Heroku, Glitch o CodeSandBox para desplegar un proyecto desde un repositorio.

Actualmente sigo experimentando servicios online que permitan desplegar un proyecto desde GitHub.

Anterioridad, probé MongoDB Atlas para generar una Base de Datos y su respectiva conexión utilizando JavaScript.

para saber más sobre el tema se puede consultar el post.

Existen algunos servicios que facilitan realizar un deploy desde un repositorio. La magia de estos servicios radica en que con poco esfuerzo podemos tener nuestro proyecto online🤯.

👐 Manos a la obra

Lo primero es contar con el repositorio del proyecto al que deseamos dar salida. En este caso, utilizaremos el código generado el Post mencionado anteriormente.

¿Pero por qué utilizar este código?

• Cuenta con una conexión con MongoDB Atlas
• Se requiere de la creación de Variables de entorno
• El desarrollo en si es un servidor básico
• Cuenta con los comandos básicos para levantar el servidor.

🔖Nota: Es opcional el uso del código que comparto por este medio ya que posiblemente quieras generar el deploy de un proyecto personal.

Al contar con el repositorio, procederemos realizar el deploy de nuestro proyecto. Es importante tomar en cuenta que nuestro proyecto tiene que contar con tres características importantes.

• El package.json tiene que contar con el comando start el cual permita levantar tu aplicación ya que este es el comando que usaran por defecto los servicios que utilizaremos.

• En el caso de utilizar express o algún tipo de servidor es recomendable que el puerto que se utiliza para escuchar tiene que estar configurado en una variable de entorno.

• Todo el código de nuestro proyectó es necesario que se encuentra en la rama master.

Principalmente nos enfocaremos en tres servicios, los cuales son fáciles de configurar y no es necesario ser un gurú para lograr nuestro objetivo, es importante crear o contar con una cuenta en los servicios que utilizaremos.

🔖 Nota: Otros servicios interesantes son VERCEL y NETTLIFY, considero que seria bueno dedicar un post solo para ellos.

---

👨🏻‍💻 CodeSandBox

Desde mi punto de vista es uno de los servicios mas populares ya que prácticamente es todo un entorno de desarrollo online ademas de que permite integrar nuestros proyectos con otros servicios, lo primero que procederemos hacer es ir directamente al sitio oficial de CodeSandBox.

📦 Cargando nuestro proyecto

Al contar con el acceso a nuestro dashboard podremos crear un nuevo SandBox y visualizar todos los proyectos con los que estamos trabajando.

Para poder realizar el deploy es necesario seguir los siguientes pasos.

1.- Dar click en la opción Create SandBox.
2.- En el modal seleccionaremos Import Project.
3.- En la caja de texto que aparece colocaremos la URL del repositorio.
4.- Podemos seleccionar la opción Copy Link o Import and Fork.
5.- Por ultimo se mostrara la integración de nuestro proyecto.

¡Genial! haste este punto nuestro proyecto se cargo satisfactoriamente. Solo resta configurar el servidor ya que aún no levanta correctamente y esto es por qué no contamos con las variables de entorno las cuales son:

Dichas variables permiten que nuestro desarrollo pueda funcionar correctamente, existe un variable especial la cual es llamada ENV esta nos funciona para detectar desde que servicio se esta generando un nuevo registro en nuestra base de datos. Para generar las variables de entorno es necesario seguir los siguientes pasos:

1.- En las opciones de lado izquierdo seleccionaremos la opción que esta debajo del engrane.
2.- En las opciones del panel que se muestra seleccionaremos la opción Secret Keys.
3.- En la primera caja de texto que se muestra colocaremos el nombre la variable en la segunda su valor correspondiente.
4.- Daremos click en la opción Add Secret.
5 .- Al crear todas las variables, daremos click en la opción Restart Server.

¡Excelente! nuestro proyecto ya esta disponible online, podemos compartir la url para que terceros puedan revisar nuestra implementación, para finalizar compartimos el resultado conseguido el cual cuenta con dos puntos de entrada los cuales son:

//Listar datos
https://kmbk6.sse.codesandbox.io/

//Crear un nuevo registro
https://kmbk6.sse.codesandbox.io/random

🔖 Nota: Es posible utilizar CodeSandBox sin la necesidad de registrarse pero algunas funciones no estarán disponibles por ejemplo la creación de variables de entorno.

---

🐠 Glitch

Es un servicio bastante interesante, ya que nos brinda una interacción similar a CodeSandBox. Quizá un poco limitado en comparación a otros servicios y con una interfaz radical, pero poderoso y sencillo de utilizar. Lo primero que procederemos hacer, es ir directamente al sitio oficial de glitch.

📦 Cargando nuestro proyecto

Al contar con el accesos a nuestro perfil podremos crear un nuevo proyecto y visualizar todos los proyectos con los que estamos interactuando.

Para poder realizar el deploy es necesario seguir los siguientes pasos.

1.- Dar click en la opción New Project.
2.- En el menú de opciones seleccionaremos Import from GitHub.
3.- En el prompt que aparece colocaremos la Url del repositorio.
4.- Dar click en la opción aceptar.
5.- Por ultimo se iniciara la integración de nuestro proyecto.

¡Genial! haste este punto nuestro proyecto se cargo satisfactoriamente. Al igual como en el caso de CodeSandBox el servidor aún no levanta correctamente y esto es por qué no contamos aun con las variables de entorno las cuales son:

Como ya sabemos estas variables permiten el correcto funcionamiento del proyecto, al igual como en el caso anterior existe una variable especial la cual es llamada ENV. Para generar las variables de entorno es necesario seguir los siguientes pasos:

1.- En las opciones de lado izquierdo seleccionaremos el file .env.
2.- Seleccionaremos la opción Add a Variable.
3.- En la primera caja de texto colocaremos el nombre de la variable y en la segunda su valor correspondiente.
4.- Al terminar de agregar las variables, seleccionaremos la opción share que se encuentra en el panel izquierdo.
5 .- En el menu seleccionaremos la opción Live App y la opción Copy.
6.- Abrimos una nueva pestaña y pegamos la url.

Excelente! nuestro proyecto ya esta disponible también en Glitch, ya contamos con una url para compartir, para finalizar compartimos el resultado conseguido el cual cuenta con 2 puntos de entrada los cuales son:

//Listar datos
https://treasure-certain-goal.glitch.me
//Crear un nuevo registro
https://treasure-certain-goal.glitch.me/random

🔖 Nota: Glitch tiene la posibilidad de utilizarse sin la necesidad de tener una cuenta pero su funcionalidad es un poco limitada.

---

👨🏻‍💻Heroku

Es una plataforma la cual facilita crear un deploy ya que solo basta con decirle que lenguaje de backend se está utilizando o qué motor de base de datos se esta utilizando para así solo preocuparnos por el desarrollo, lo primero que realizaremos es ir al sitio oficial de heroku.

📦 Cargando nuestro proyecto

Al contar con el acceso a nuestro dashboard podremos crear nuevas aplicaciones y ver un listado de las que estan disponibles.

Para poder realizar el deploy es necesario seguir los siguientes pasos.

1.- Seleccionar la opción new.
2.- Seleccionar la opción Create new App.
3.- En la caja de texto colocaremos el nombre de nuestra app es importante que la caja de texto este en color verde.
4.- Seleccionaremos la Región por defecto podemos dejar la opción seleccionada.
5.- Por seleccionamos la opción Create App.

¡Genial! haste este punto contamos con el espacio listo para poder cargar nuestro proyecto, por lo que procederemos a realizar las configuraciones pertinentes como crear las siguientes variables de entorno:

Como ya sabemos estas variables permiten el correcto funcionamiento del proyecto, al igual que en los casos anteriores existe una variable especial la cual es llamada ENV. Para generar las variables de entorno es necesario seguir los siguientes pasos:

1.- Seleccionar la opción Settings.
2.- En la nueva pantalla seleccionar Reveal Config Var.
3.- En la primera caja de texto colocaremos el nombre de la variable y en la segunda su valor correspondiente.
4.- Seleccionar la opción add.

Ya contamos con la configuración necesaria para realizar el deploy de nuestro proyecto, para poder realizar esta tarea es necesario conectar GitHub siguiendo los siguientes pasos.

1.- Seleccionar la opción Deploy.
2.- Seleccionar la opción GitHub.
3.- Seleccionar la opción Connect to GitHub.
4.- En el modal que se muestra seleccionar la opción Authorize heroku.
5.- En caso de que aparezca un error basta con recargar.
6.- En las nuevas opciones que aparecen indicaremos en que cuenta o organización esta el repositorio.
7.- Buscamos y seleccionamos el repositorio se mostraran dos nuevas opciones.
8.- Las nuevas opciones permiten seleccionar que rama utilizaremos así como indicar si queremos un Automatic Deploy o Manual Deploy.
9.- Al seleccionar una alguna opción se iniciara el deploy .
10.- Al terminar seleccionaremos la opción view para ver el resultado.

¡Excelente! nuestro proyecto ya esta disponible también en Heroku, ya contamos con una url para compartir, para finalizar compartimos el resultado conseguido al igual que los otros casos esta también cuenta con dos puntos de entrada:

//Listar datos
https://work-shop-deploy.herokuapp.com/
//Crear un nuevo registro
https://work-shop-deploy.herokuapp.com/random

🔖 Nota: Heroku cuenta con una opción de integración continua al esta opción solo esta disponible para Automatic Deploy esta opción puede generar deploy automáticos siempre que detecte un cambio en la rama que estemos utilizando.

---

📝 Conclusiones

Los tres servicios que revisamos cada uno tienes sus peculiaridades y poderes por ejemplo.

• CodeSandBox: Prácticamente es un editor online el caul te permite configurar tu entorno de desarrollo lo que da mucha agilidad al momento de proptotipar un proyecto.

• Glitch: Es un editor mas limitado pero desde mi punto de vista es como si trabajaras con Vim, glitch cuenta con una integración de terminal la cual te da mucha flexibilidad al momento de iniciar tu desarrollo.

• Heroku: Este es mas un PaaS ya que solo tenemos que preocuparnos por configurar lo mínimo para que nuestro proyecto funcione correctamente.

Desde mi punto de vista no existe un servicio ideal pero sí muchas soluciones las cuales al unirlas pueden darte el resultado deseado, como recomendación es bueno que veas las capacidades de cada uno de los servicios y explotarlos al máximo.

Es importante recordar que los tres servicios al no contar con trafico por un determinado tiempo estos se bajaran temporal mente hasta que sean consultados nuevamente.