Deploy Preact en Netlify con solo 5 pasos

Ender Bonnet
Mar 28, 2018 · 4 min read

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.

Image for post
Image for post
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.

Image for post
Image for post

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:

Image for post
Image for post
Push a master listo

¡Listos con GitHub! Ahora podemos continuar con Netlify

3- Acceder a Netlify con GitHub

Iniciar sección en Netlify

Image for post
Image for post
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’

Image for post
Image for post
Botón en la esquina superior derecha

Seleccionamos el proveedor de Git, que en nuestro caso GitHub

Image for post
Image for post
1. Paso para configurar el despliegue continuo

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

Image for post
Image for post
2. Seleccionar el repositorio

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

Image for post
Image for post
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/

Image for post
Image for post
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.

Image for post
Image for post
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.

NodersJS

¿Por qué? Porque nos gusta.

Thanks to Cesar Encina Leon, Fernando Larrañaga, and Tatiana Molina

Ender Bonnet

Written by

Padawan de programador, colaborador de @NodersCL JS / Node Lover. In CL from VE. A veces Blogger, a veces cocinero, siempre nerd.

NodersJS

NodersJS

¿Por qué? Porque nos gusta.

Ender Bonnet

Written by

Padawan de programador, colaborador de @NodersCL JS / Node Lover. In CL from VE. A veces Blogger, a veces cocinero, siempre nerd.

NodersJS

NodersJS

¿Por qué? Porque nos gusta.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store