Deploy: Publicar aplicaciones

Instalación y configuración del adaptador de Netlify

Ahora que ya tenemos el proyecto preparado, lo que debemos de hacer es añadir las instalaciones y configuraciones, que necesitamos para poder hacer la integración del adaptador necesario para poder usar nuestro proyecto en Netlify.

Los pasos que vamos a dar van a estar relacionados con la documentación oficial en el siguiente enlace: https://shorten-up.vercel.app/DmR6KtHTy4

Lo primero que vamos a realizar es la instalación del adaptador mediante el siguiente comando de integración:

npm run qwik add netlify-edge

Se nos abre en la consola un resumen de los ficheros que se van a modificar, cuales se van a crear y que dependencias se van a instalar (1).

Cuando estemos listos, decimos que si, que queremos realizar la actualización mediante Yes looks good, finish update! 2

Aquí estará en proceso…

Y cuando termine, obtenemos este resultado:

En el proceso ejecutado, se han instalado las dependencias necesarias para esta funcionalidad, incluyendo el CLI de Netlify (Más información: https://shorten-up.vercel.app/G2oKXdIGkx).

Los cambios que se realizan son los que se han especificado en el primer paso de la instalación del adaptador, concretamente:

• 1: Modificaciones de contenido en ficheros:

README

.gitignore

package.json

Las versiones con el tiempo pueden ir variando.

Actualmente usando Qwik 1.4.2 esas son las versiones. Si por algún casual tenéis problemas, analizad y añadir las versiones compatibles.

Comprobad que se han creado y se han modificado los ficheros que se ven en esa lista.

Asumiendo que todo ha ido OK, seguimos.

Deploy del proyecto

Para poder ejecutar el último paso necesitamos una cuenta de Netlify, que se crea de manera gratuita y lo podéis hacer desde el siguiente enlace:

https://shorten-up.vercel.app/ukZEopkEE8

Es un proceso sencillo, lo efectuáis y entráis con vuestros credenciales, y si es la primera vez, os harán una especie de encuesta, que no tiene mucho misterio, la completamos hasta terminar.

Actualmente (Febrero 2024) esta es la apariencia del panel principal de Netlify. No os quedéis con la apariencia, fijaros en las opciones que iré seleccionando, para que si en el futuro le dan un repaso al estilo, no os suponga inconveniente para poder efectuar los siguientes pasos.

En la izquierda tenemos todas las opciones principales, y la que nos interesa es seleccionar Sites.

Como vamos a usar el proyecto alojado en nuestra cuenta de Github (no olvidéis hacer un fork, para tener una copia en vuestra cuenta) debemos de ir a Import and existing project (Si no habéis desplegado ningún proyecto seguramente en el apartado donde se ven diferentes proyectos desplegados se ve esa opción de Import and existing project)

Seleccionamos Github:

Si es la primera vez que trabajáis en Netlify, NO DEBERÍA de aparecer el usuario/s que aparece en mi caso en el 1.

Como anteriormente ya le he dado permisos, aunque cree más cuentas de Netlify, al estar instalado y permitido en esta cuenta de Github, me aparecerá.

En el punto 2 tenemos la lista de repositorios a los que le hemos dado permiso. Ahora lo que queremos es darle permisos al nuevo proyecto que queremos desplegar.

¿Cómo podemos dar permisos para poder publicar nuestro proyecto desde un repositorio Github? Seleccionamos Configure the Netlify app on Github:

Se abre una ventana emergente con todas las cuentas y organizaciones a las que pertenecemos y tenemos permisos para dar acceso:

En mi caso, mi cuenta es anartzdev y las demás son organizaciones en las que tengo permisos para habilitar el acceso a sus repositorios para realizar el deploy en Netlify.

Como quiero dar acceso a un repositorio de mi cuenta anartzdev, selecciono la opción Configure:

Nos pedirá que introduzcamos nuestros credenciales de Github y cuando lo hagamos, accederemos una pantalla como la siguiente:

Hacemos scroll hacia abajo hasta que aparezca lo siguiente:

Y podéis dar acceso a todos los repositorios mediante All repositories aunque yo prefiero ir dando permisos de manera individual, ya que así tengo más control sobre lo que se da acceso o no.

Vamos a seleccionar Select repositories para ir seleccionando de manera individual:

Y para confirmar los cambios aplicados con 1, pulsamos Save (2)

Si todo se ha efectuado correctamente, debería de aparecernos el nuevo repositorio, el que hemos dado acceso y hacemos click sobre el:

Llegaremos al último paso donde ya debemos de especificar los diferentes apartados del deploy como que rama será la que se publicará, cada vez que hacemos un push al repositorio remoto y demás.

1. Dueño de la cuenta, esto no lo tocamos.

2. Rama que será la que usemos para las publicaciones. Siempre que se añaden cambios con una publicación en master, se ejecuta el proceso de deploy. Por lo que si estáis trabajando en una rama de desarrollo y no queréis que se publique nada hasta estar seguros, crear diferentes ramas para features, bugfix,…y demás.

1. En este apartado no cambiamos nada, el comando para compilar es el correcto y por defecto se creará la carpeta dist resultado de esa compilación (esto en Qwik).

4. Deploy site: Para ejecutar el proceso de publicación de nuestro proyecto. Pulsamos y esperamos a que nos redireccione a una nueva página, donde se creará el proyecto en Netlify y se iniciará el proceso de deploy.

En la siguiente imagen tenemos el proyecto de Netlify creado asociado a este repositorio (1) y ya está ejecutando el deploy de producción (2)

Esperamos un instante y debería de cambiar el estado a Published:

Y aquí se ven los pasos dados y que todos están OK:

Y si nos centramos en Deploy log:

Como se puede apreciar, ha ido superando todas las etapas y el proyecto está desplegado.

¿Qué nos queda ahora? Comprobarlo obviamente.

Comprobación

Para comprobar el resultado, siguiendo en la pantalla anterior hacemos scroll hacia arriba (todo) y seleccionamos Open production deploy:

Se abre una nueva ventana y si todo va ok, debería de mostrarse algo como lo siguiente:

Llegados a este punto hemos conseguido el objetivo de publicar nuestro proyecto Qwik y lo que vamos a hacer ahora es personalizar la URL para que no quede la autogenerada como la que tenemos ahora que es https://stunning-taiyaki-4f24bb.netlify.app/ (no os funcionará en el momento de estar publico el capítulo, seguid leyendo).

Volvemos a la página inicial del proyecto en Netlify y seleccionamos Site configuration:

Y en el apartado principal, seleccionamos Change site name

Se nos abre una ventana modal:

Añadimos el nombre que queremos asignarle a nuestra aplicación desplegada, que debe de ser un nombre que no existe.

En mi caso probaré con qwik-book-quizz-app (1) y confirmamos los cambios con Save (2):

Al guardar en nuestro panel, ya se visualiza la nueva URL asignada:

Probamos a acceder a esa nueva URL: https://qwik-book-quizz-app.netlify.app/

Y como se puede observar, se visualiza el mismo contenido con la nueva URL:

Llegados a este punto ya hemos conseguido realizar el proceso completo de deploy con Netlify y tenemos las nociones básicas necesarias para poder abordar este proceso en otros servicios como Vercel.`

Alternativas

Siguiendo lo aprendido en este punto con Netlify podemos basarnos en ello para desplegar nuestro proyecto en otros servicios como Vercel.

En el siguiente enlace os dejo un artículo gratuito que escribí hace un tiempo en mi perfil de Medium:

Deploy en Vercel con Qwik