Qwik — Deploy en Vercel
Claves para poder publicar nuestro proyecto de Qwik en Vercel de una manera muy sencilla
En este artículo se presentan las claves para publicar un proyecto de Qwik en Vercel de manera sencilla siguiendo unos pasos sencillos de aplicar.
Anteriormente he creado un artículo relacionado a este donde enseño a publicar nuestros proyectos en Netlify:
Empezaremos desde cómo hacer una copia local del repositorio base en Github, y como instalar y configurar el adaptador de Vercel en el proyecto.
También se describen los pasos necesarios para hacer el deploy (con los posibles problemas) del proyecto en Vercel.
Todos los artículos publicados del curso los encontraréis en la siguiente lista que iré actualizando semanalmente y estableciendo el orden natural recomendado:
El resultado final de lo que conseguiremos al publicar nuestro proyecto, será algo similar a lo siguiente:
Podremos acceder desde esta URL:
https://qwik-vercel-mugan86.vercel.app/
Para conseguir esto, deberemos de dar los pasos mencionados al inicio del artículo. Pasamos al apartado de lo que se verá al detalle, para empezar a trabajar con ello paso a paso.
Tabla de contenidos
- Proyecto a publicar( versión 0.101.0) (12 de abril de 2023)
- Instalación y configuración del adaptador de Vercel en nuestro proyecto de Qwik.
- Deploy
- Comprobación.
- Conclusión.
Proyecto a publicar
Este paso se explica en el artículo de Netlify.
El repositorio que usaremos como base para hacer la copia, será el siguiente:
Al hacer la copia del proyecto con Fork, en mi caso lo llamaré qwik-vercel
Se mostrará de la siguiente forma:
Bien, ahora ya podemos empezar con las configuraciones concretas para adaptarlo a Vercel.
Instalación y configuración del adaptador de Vercel
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 Vercel.
Los pasos que vamos a dar van a estar relacionados con la documentación oficial en el siguiente enlace:
Lo primero que vamos a realizar es la instalación del adaptador mediante el siguiente comando:
npm run qwik add vercel-edgeSe nos abre en la consola un resumen de los ficheros que se van a modificar, cuales 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)
En proceso…
Y al terminar:
Se han instalado las dependencias necesarias para esta funcionalidad, incluyendo Vercel CLI.
Los cambios que se realizan son los que se han especificado en el primer paso de la instalación del adaptador, concretamente:
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 Vercel, que se crea de manera gratuita y lo podéis hacer desde aquí
Es un proceso sencillo, lo efectuáis y entráis con vuestros credenciales.
Ahora estaremos en el panel principal donde tenemos que fijarnos en el apartado que resalto a continuación, que es donde se muestran todos los proyectos añadidos a nuestra cuenta. En mi caso ahora mismo tengo uno, que corresponde a una API de NestJS que consume información de OpenStreetMap mediante OverpassQL (de este ya os hablaré en el futuro ya que es parte de un proyecto que estoy desarrollando).
Para añadir un nuevo proyecto, importándolo desde Git, debemos de ir a la parte superior derecha de este apartado y seleccionar Add New... / Project
Nos redireccionará a una página de este estilo donde se pueden observar los proyectos de Git que tienen permisos para usarlos actualmente.
No se encuentra el proyecto que quiero usar, tal y como he hecho en el tutorial de Netlify, tenemos que dar el permiso específico a ese repositorio. Para dar permiso a un repositorio de Github, debemos de seleccionar la opción Adjust Github App Permissions
Se abre una ventana emergente con todas las cuentas y organizaciones a las que pertenecemos y tenemos permisos para dar acceso, como en el artículo anterior, pero en este caso aparecerá el logotipo de Vercel con el texto Install Vercel.
Para seguir adelante, pulsamos Configure en la cuenta donde está almacenado el repositorio que vamos a usar para publicar el contenido del proyecto de Qwik, que será como antes en el usuarioanartzdev.
Confirmamos nuestro password de Github
Ya estamos en el apartado para habilitar los permisos de los repositorios
Hacemos scroll hacia abajo hasta que aparezca el apartado Repository Access donde podéis dar acceso a todos los repositorios mediante All repositories.
Como os he comentado anteriormente en mi caso particular 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(1) y añadimos el nombre qwik-vercel (2) para confirmar los cambios aplicados con 1, pulsamos Save (3)
Si todo se ha efectuado correctamente, debería de aparecernos el nuevo repositorio, el que hemos dado acceso:
Hacemos click sobre la opción Import:
Ahora nos redirecciona a una página donde vamos a especificar las configuraciones necesarias para gestionar el proceso del deploy mediante Configure Project. La página tendrá esta apariencia actualmente:
Centrándonos en el formulario siguiente, tenemos que tener en cuenta algunos aspectos para ejecutar bien el deploy automáticamente después de realizarse la compilación.
- Nombre del proyecto, se asigna por defecto el nombre del repositorio y este será el nombre del subdominio. Podemos cambiarlo a alguno un poco más acorde de lo que queramos añadir.
- Framework seleccionado, en este caso ya ha detectado que es Qwik, si no fuese así, tenemos que seleccionarlo.
- Directorio de raíz, no tocamos nada.
- Configuraciones de compilación y deploy. No tocamos nada ya que los comando especificados son los correctos. El directorio de salida será
dista menos que lo hayamos cambiado por nuestra cuenta y los otros dos, son los habituales (a menos que hayamos cambiado, sobre todo el de compilación). - Pulsamos para ejecutar el deploy.
Comenzará con el proceso de deploy paso a paso:
Y cuando esté, nos redirecciona a una nueva página:
Si os fijáis, tenemos un problema donde se ve claramente un error 404, y esto no nos permite acceder a la página obviamente. ¿Cuál puede ser el motivo?
En este caso, puede pasar que nos hayamos olvidado subir los cambios de las configuraciones del adaptador de Vercel a nuestra rama principal del repositorio.
Por si acaso, vamos al proyecto y hacemos
git statusSiendo esto lo que se ve y claramente se observa que no se han añadido los nuevos ficheros y las modificaciones realizadas cuando hemos integrado el adaptador de manera local.
Viendo esto, lo que tenemos que hacer es publicar en la rama estos cambios.
git add --all
git commit -m "feat: implement vercel edge to work in Vercel Qwik project"
git push origin masterUna vez publicados si accedemos a
https://vercel.com/<NUESTRO_USUARIO_VERCEL>/<NOMBRE_PROYECTO>/deploymentsque en mi caso es, teniendo en cuenta que mi usuario es anartzdev y el nombre del proyecto qwik-vercel-mugan86
https://vercel.com/anartzdev/qwik-vercel-mugan86/deployments
Se visualizará de la siguiente forma
Y haciendo click sobre ello, entraremos a ver el proceso del deploy paso a paso
- Building: Proceso de compilación, sería la acción de ejecutar
npm run build
2. Apartado donde se asignan los dominios que se ve en el punto 4.
3. Previsualización del proyecto, y en este caso se ve el resultado, ya que al publicarlo, si todo va bien, realiza una captura de pantalla de la vista inicial.
4. Dominios asignados. Con cualquiera de ellos podremos acceder a nuestro proyecto.
Vamos a finalizar comprobando que todo está OK.
Comprobación
Para comprobar el resultado, siguiendo en la pantalla anterior seleccionamos en Domains cualquiera de las direcciones web que vemos
Si pinchamos en la primera, que será:
https://qwik-vercel-mugan86.vercel.app/
Se abre una nueva ventana y si todo va ok, debería de mostrarse algo como lo siguiente.
Y como se puede observar, se visualiza el mismo contenido que en el proyecto de Netlify pero con la nueva URL asignada en Vercel.
Llegados a este punto ya sabemos como hacer un deploy de otra forma de un proyecto de Qwik.
Conclusión
Llegados a este punto ya somos capaces de publicar de manera gratuita nuestros proyectos en Vercel, tanto para proyectos personales de Portfolio como prototipos para proyectos que usaremos ya de manera profesional.
Los pasos a dar son bastantes, pero como habéis podido ver son sencillos de ejecutar y una vez que lo hagamos una vez, ya seremos capaces de hacerlo sin ninguna guía como esta.
Quedo atento a vuestras publicaciones de proyectos que vayáis creando, me gustaría verlos y daros mi punto de vista.
Todos los artículos publicados del curso los encontraréis en la siguiente lista que iré actualizando semanalmente y estableciendo el orden natural recomendado:
Presencia en redes sociales
Podéis encontrarme en las siguientes redes.
