Publicar web hecha con Vue.js en Netlify

Hoy vamos a ver cómo publicar una web hecha con Vue.js en Netlify. Netlify es un servicio de hosting para sitios web estáticos. Podríamos decir que es una alternativa a GitHub Pages u otros servicios del estilo. Pero Netlify no solamente hace la función de hosting, si no que también tiene varias características que lo hacen una opción muy interesante a la hora de decidir qué alojamiento elegir para nuestro sitio estático.

Las caracter’isticas que más destacan son:

• Dominio personalizado con HTTPS automático
• Integración con Git. Tanto con GitHub, como con Gitlab, como con BitBucket.
• Continuous deployment: permite automatizar los deploys de nuestro sitio web. Esto quiere decir que cada vez que subamos código a la rama indicada de nuestro repositorio, Netlify se encargará de descargar el código y actualizar el sitio.
• Previsualización de los cambios antes de publicarlos en producción
• Infinitos rollbacks: podremos volver a la versión del sitio que queramos con solamente unos clicks.

Estas son solamente algunas de las caracteráteristicas que tiene Netlify, si quieres echarle un vistazo al resto puedes visitar este link. Pero lo más interesante, es que es gratis. Tiene planes de pago, pero si es para usarlo para sitios pequeños, es gratis.

 

Crear app

Hecha la introducción a Netlify, vamos a empezar. Primero de todo, voy a crear una app simple con Vue.js. Para ello voy a utilizar Vue CLI:

 

Subir app al repositorio

Una vez tengamos la app creada, tenemos que crear el repositorio y subir el código a nuestro servicio de Git. Yo voy a utilizar GitHub, pero como ya he dicho antes, también tiene integración con Gitlab y BitBucket.

Creamos el repositorio, yo le he puesto vue-test, y subimos el código:

Cuando ya esté subido, vamos a la dirección del repositorio y deberíamos ver los archivos del proyecto.

 

Crear cuenta en Netlify

Para registrarnos o loguearnos en Netlify podemos hacerlo de varias maneras:

Una vez estemos registrados o si ya tienes cuenta y entras, deberías ver está página:

 

Publicar sitio web

Para publicar un sitio web, debemos ir al botón verde «New site from Git». Si le damos click, iremos a esta página dónde seleccionaremos el servicio donde se encuentra el código de la web que queremos publicar:

En mi caso, selecciono GitHub. Si no tiene acceso a los repositorios, te lo pedirá, se lo das y ya te saldrán los repositorios a los que le has dado acceso. Yo como de momento, solamente es para publicar un repositorio, le he dado acceso solamente al repositorio donde está el código de la web que quiero publicar.

Le damos click al repositorio en cuestión y pasará al siguiente paso.

El siguiente paso es importante. Es el paso dónde vamos a indicar en qué rama de nuestro repositorio se encuentra el código que queremos publicar (en mi caso, master), qué comando va a ejecutar para hacer el build del código (en mi caso, npm run build) y finalmente en qué directorio se encuentra el código compilado (en mi caso, dist).

Cuando tengamos esto, le damos a «Deploy site».

Nos redirigirá a un dashboard donde podremos ver toda la información del sitio creado:

Podemos ver el nombre del sitio que se puede cambiar, podemos ver los últimos deploys, entre otras cosas.

Cuando finalice, el build del código, dónde pone «Site deploy in progress» en amarillo, nos saldrá el enlace a nuestro sitio web.

Si entramos veremos, el sitio web tal como lo veíamos en local:

Como puedes ver, tiene HTTPS configurado automáticamente y si añadimos un dominio propio personalizado, seguiría teniéndolo. Si no queremos añadirle un dominio propio personalizado, podemos cambiar el nombre al sitio desde Settings->General->Site details->Change site name y nos saldrá una ventana modal dónde podremos elegir el que queramos (pero tiene que estar libre).

 

Continuous deployment

Ahora vamos a ver cómo Netlify actualiza nuestro sitio automáticamente cuando subimos código nuevo a la rama del repositorio que hemos indicado anteriormente.

Para probarlo, voy a cambiar el texto que pone «Welcome to Your Vue.js App» a «Hola Netlify». Voy a subir este codigo:

Nada más acabe de subirse, Netlify detectará que hay un nuevo commit y como tenemos marcado que se hagan auto deploys, lo descargará, hará un build nuevo del sitio y lo actualizará:

Cuando acabe de hacer el build del proyecto, dónde sale «BUILDING» se cambia por «PUBLISHED» y si vamos a nuestra URL veremos el cambio aplicado:

 

Rollback a una versión anterior

Como he comentado antes, en Netlify también podemos volver fácilmente a una versión anterior de nuestra web. Para ello, vamos a la sección «Deploys» en el menú superior. Aquí veremos todos los deploys que se han hecho de nuestro sitio web. En mi caso, son 2. El de la creación del sitio web y el del commit que he cambiado el texto.

Si por ejemplo, quisiera ir a la versión inicial de mi web en la que el mensaje que salía era «Welcome to Your Vue.js App» tendría que ir al deploy dónde esté así. Para mí, sería el primero. Hago click en el deploy y vería lo siguiente:

En esta página, se muestra toda la información sobre el deploy en cuestión. Por cierto, si te fijas, podemos ver una preview del deploy si hacemos click en «Preview deploy», lo cual es muy útil.

Si quieséramos hacer rollback a este deploy, debemos hacer click en «Publish deploy», nos saldrá un modal para confimar y le damos a «Publish». Cuando finalice, volveremos a verlo como estaba en el deploy seleccionado:

Si nos fijamos en la sección de deploys del dashboard, veremos que el primer deploy es el que está marcado como «PUBLISHED»:

 

Nota: el sitio y el repositorio están eliminados ya que simplemente era un test para este post.