Qwik — Deploy en Netlify
Claves para poder publicar nuestro proyecto de Qwik en Netlify de una manera muy sencilla
En este artículo se presentan las claves para publicar un proyecto de Qwik en Netlify de manera sencilla siguiendo unos pasos sencillos de aplicar.
Empezaremos desde cómo hacer una copia local del repositorio base en Github, y como instalar y configurar el adaptador de Netlify en el proyecto.
También se describen los pasos necesarios para hacer el deploy del proyecto en Netlify, y se incluyen instrucciones para cambiar el nombre de dominio.
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:
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) (10 de abril de 2023)
- Instalación y configuración del adaptador de Netlify en nuestro proyecto de Qwik.
- Deploy
- Comprobación.
- Cambio de nombre de dominio.
- Conclusión.
Proyecto a publicar
El proyecto que os propongo publicar es la versión 0.101.0 que a día de 10/04/2023 es la versión más reciente.
El repositorio donde tenemos el proyecto es el siguiente:
Necesitaréis tener una cuenta de Github y debéis de hacer un fork del contenido de este repositorio, para haceros una copia local en vuestra cuenta.
¿No tenéis cuenta de Github? Debéis de crearla mediante estas instrucciones ya que para seguir este tutorial es indispensable disponer de una cuenta.
Teniendo la cuenta, debemos de hacer una copia del repositorio base para tener una copia como nuestra, basándose en la base de la propuesta.
Fork del repositorio
Para hacer un fork del repositorio, pulsamos en Fork en la parte superior derecha:
Y tenemos en cuenta los siguiente puntos:
- Nombre de usuario / organización que vamos a usar para alojar el proyecto, en mi caso con el usuario
anartzdev. - Nombre del repositorio. Yo no lo cambiaría, aunque si queréis poner otro nombre, adelante.
- Descripción del repositorio.
- Para copiar solo la rama master, no hace falta más.
- Crear el fork para copiar el código del repositorio original.
Mientras se crea la copia se mostrará un estado similar al siguiente dando el feedback de que está en ello:
Y así estará el repositorio en nuestra cuenta (en mi caso en anartzdev)
Ya tenemos el proyecto, ahora ya iniciamos el proyecto en nuestro equipo clonándolo para trabajar en local.
Una vez clonado, abrimos el proyecto y ya empezamos con las instalaciones y configuraciones a realizar.
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:
Lo primero que vamos a realizar es la instalación del adaptador mediante el siguiente comando:
npm run qwik add netlify-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 Netlify 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 Netlify, 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, y si es la primera vez, os harán una especie de encuesta, que no tiene mucho misterio, la completamos hasta terminar.
Ahora estaremos en el panel principal donde tenemos que fijarnos en el apartado Sites
Como vamos a usar el proyecto alojado en Github (no olvidéis hacer un fork, para tener una copia en vuestra cuenta) debemos de ir a 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 cuentas de Github, me aparecerá.
¿Cómo podemos dar permisos para poder publicar nuestro proyecto desde un repositorio Github? Seleccionamos Configure the Netlify app on Github (2)
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
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.
- Dueño de la cuenta, esto no lo tocamos.
- 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.
- 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).
- 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)
Hacemos click en Starting up para ver el proceso:
Si esperamos a que haga todo el proceso sabremos si se efectúa correctamente o no, debemos de hacer scroll hacia abajo
En este caso se ha realizado correctamente y ya tenemos publicado nuestro proyecto en Netlify.
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:
Bien, ya 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://fabulous-beijinho-d37040.netlify.app/ (no os funcionará en el momento de estar publico el artículo, seguid leyendo)
Volvemos a la página inicial del proyecto en Netlify:
Y en el apartado principal, seleccionamos Domain settings
Accedemos a una página donde tenemos lo siguiente:
Y en el apartado Production domains(1) vamos a Options / Edit site name(2) y lo modificamos al nombre que sea de nuestro agrado y evidentemente, esté disponible.
Guardamos los cambios y vamos a acceder a esa nueva URL:
Y como se puede observar, se visualiza el mismo contenido con la nueva URL:
Conclusión
Llegados a este punto ya somos capaces de publicar de manera gratuita nuestros proyectos en Netlify, 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.
