Netlify para desplegar proyectos en Angular ó Estáticos

Soy desarrollador frontend, enfocado al UI/UX y últimamente he estado en el proceso de aprender formalmente Angular porque luego de 1 año y medio de trabajar continuamente con este lenguaje simplemente le agarré aprecio, ademas de que pienso de que en este momento es uno de los lenguajes del futuro, pero como ya sabemos, el mundo del desarrollo es muy volátil y evoluciona, como un virus 🦠, pero en buen sentido.

Justo hace un par de días que ya empecé a desarrollar un proyecto personal en Angular me surgió una duda, ¿Donde voy a subir esto?

Mi primera opción fue pensar en ver como hacer el deploy en mi servidor de namecheap, luego lo pensé un momento más y me puse a buscar una opción alterna ya que quería usar mi repositorio de Github para ir subiendo el proyecto y no dejar esa buena práctica, y allí fue cuando di con Netlify (se que seguramente hay muchas opciones pero esta fue la primera que pude ver y me gustó) y al ver que se integraba automáticamente con mi repositorio allí fue donde dije, ¡Aquí fue! 🤓.

So, luego de esa breve intro, aquí es donde viene lo bueno.

USAR NETLIFY PARA DESPLEGAR PROYECTOS EN ANGULAR GRATIS

Netlify es una plataforma que como muchas tiene sus versiones gratuitas y pagas, pero en la versión free me parece excelente y más que conveniente para desarrolladores que o tienen un proyecto personal y desean una plataforma super user-friendly sin casi configuraciones de servidor, o para pequeños proyectos comerciales que puedan subsistir en la plataforma tomando en cuenta las limitantes.

Lo primero, las características de la versión gratuita.

  • Custom domains
  • HTTPS (Incluido)
  • Instant Git integration
  • Continuous deployment (aquí es donde está la magia)
  • Deploy previews
  • Access to add-ons

Ya solo con esto me pareció genial, de todas formas pueden ver los planes por https://www.netlify.com/pricing/

Pasos

  • Crear el repositorio en Github (Si ya lo tienes seguir al paso dos) en caso de que no aquí te dejo un simple index.html para que puedas hacer tu Hello Word
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Netlify - Test</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
	<style>
		body{
		font-family: 'Roboto', sans-serif;
		}
	</style>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
  • Conectar Netlify con el repositorio
Conectar repositorio de Github a Netlify

Básicamente con eso tenemos el proyecto desplegado, pero hagamos una explicación de lo anterior.

El primero paso consiste en vincular Netlify a mi repositorio de Github, el típico proceso de un par de clicks en donde le das permisos a un tercero de acceder a tu cuenta, de Github en este caso, aqui pueden decirle si solo quieren que acceda a un solo repositorio o tenga acceso general a todos.

El segundo es indicarle a Netlify cual repositorio deseas que despliegue y esto se subdivide en tres elementos pincipales, el primero es elegir desde cual branch de tu repo debe de hacer el deploy, segundo es si se trata de un proyecto en angular cual es el comando para correrlo y el último es si este proyecto debe de correr en algun subdirectorio en particular.

Como en esta prueba solo se trataba de un Hello Word en html no hicimos nada en las dos últimas subdivisiones.

Al final Netlify te provee de una url no muy friendly pero la puedes cambiar en la opción Site Settings/General/Site details/Site information/Change site name, les dejo un capture por aquí.

Haciendo el cambio allí, terminan obteniendo una url algo parecido a esta https://guarrod-hello.netlify.com

Pero esa no me gusta! bueno también pueden sin ningún problema asociar un dominio propio a la plataforma y ahora si si, listo!

Comentarios finales

En este momento Netlify está haciendo su trabajo en silencio, de manera desatendida, se puede ir trabajando en el proyecto ya sea un sitio estático o en Angular/React/etc hacemos nuestro push a Github y automáticamente se inicia el deploy en Netlify, incluso tiene un log donde se va mostrando como va corriendo el deploy.

Github, Netlify


Carlos Rojas

Soy Diseñador Gráfico por formación y vocación, adoro mi trabajo y me dedico a desarrollar proyectos web, hacer fotografía, y trabajar en mis ratos libres con arduino y la carpintería.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *