Deploy Preact en Netlify con solo 5 pasos

Si al leer Preact lo primero que pensaste fue en React ⚛️ estás en lo correcto. Mientras Netlify es sinónimo de plataforma para despliegue continuo. Lo veremos con mas detalles adelante, por ahora es importante saber que al terminar esta guía podrás desplegar tu aplicación a producción en menos de 10 minutos.

Photo by Allen Cai on Unsplash

Preact

Es una alternativa de React minimizada a 3kB , lo que hace que sea superior en la velocidad de carga. Fue creado por Jason Miller y está disponible bajo la licencia de código abierto MIT.

El sitio de Noders corre sobre Preact. Puedes ver otras empresas que lo utilizan aquí y algunos demos.

En esta guía utilizaré preact-cli, por lo tanto es necesario instalarlo de manera global. Para eso usamos npm:

npm install -g preact-cli

Netlify

Es la plataforma para nuestra aplicación que nos permitirá realizar deploy/despliegue continuo directamente desde nuestro repositorio de GitHub.

Totalmente gratuito para los proyectos que necesites, cuenta con toda la infraestructura que necesita tu app lista para funcionar. En otras palabras tu haces el push y ellos hacen el build.

¿Estamos listos?

Lo único que necesitas para continuar con esta guía es tu cuenta GitHub, y tener instalado preact-cli.

1- Creamos la app con preact-cli

Con tu consola favorita y en el directorio de tu preferencia, debemos usar preact-cli para deployar, con el siguiente comando:

preact create default on-netlify

Deberías obtener un resultado similar al siguiente en la consola:

✅ Done! Ahora debes acceder al directorio generado con el nombre del proyecto

2- Repositorio en GitHub

Creamos un nuevo repositorio en GitHub sin archivo README, ni License.

Luego debes vincular el repositorio con tu directorio local

git init
git remote add origin git@github.com:enBonnet/on-netlify.git
git add .
git commit -m 'Commit para desplegar en netlify'
git push -u origin master

La consola debería mostrar algo como esto:

Push a master listo

¡Listos con GitHub! Ahora podemos continuar con Netlify

3- Acceder a Netlify con GitHub

Iniciar sección en Netlify

Ventana de Login

Seleccionas acceder con GitHub, y luego concedes los permisos para que Netlify acceda a tus repositorios y generar la clave para poder realizar el despliegue continuo.

4- Crear el contenedor para nuestra aplicación

Para esto utilizamos el botón ‘New site from Git’

Botón en la esquina superior derecha

Seleccionamos el proveedor de Git, que en nuestro caso GitHub

1. Paso para configurar el despliegue continuo

En la próximo paso buscas el repositorio ‘on-netlify’ y lo seleccionamos

2. Seleccionar el repositorio

Ahora debemos indicarle la rama del repositorio, el comando para construir la aplicación y el directorio publico

3. Opciones de construcción y despliegue

Una vez lleno el formulario con los datos como los muestra la imagen, usamos el botón ‘Deploy site’ y…

5- Desplegando

Netlify nos entregará una URL para poder acceder a nuestro proyecto. En este caso https://silly-pasteur-24aa88.netlify.com/

Información que muestra una vez terminado el proceso de construcción

Si todo salió bien en menos de 10 minutos deberías tener tu aplicación desplegada y funcionando.

Aplicación funcionando

Espero te sea de utilidad este pequeño artículo y puedas disfrutar tanto como nosotros de las ventajas de Netlify y Preact.

El repositorio utilizado en esta publicación lo puedes encontrar aquí.

Noders es la comunidad más electrizante de Node.js y JavaScript de Latinoamérica. Generamos iniciativas de aprendizaje e integración de comunidades de desarrollo en diferentes países y a lo largo y ancho de esta cosita llamada la Internet.

Si quieres saber más de nosotros y/o participar de lo que hacemos, únete a nuestro Slack.