Netlify

26/27

Lectura

Seguramente hayas oído hablar de Netlify, pues últimamente está en boca de todos. A mi, personalmente, es la plataforma que más me gusta de todas las que hay.
Hace tiempo que he sustituido Github Pages por este servicio. Me gustaba describirlo como “Github Pages con super-poderes”.

net

Como te habrás dado cuenta, la web original del proyecto está alojada en Netlify.

Vamos a configurar este servicio para tener nuestra web online, con despligue automático, para que cada vez que hagamos un commit a la rama master en el repositorio de GitHub, se ejecuten las tareas correspondientes y la web se despliegue con el nuevo contenido.

Variables de Entorno

Lo primero que deberíamos hacer antes de subir nuestra app a Netlify es buscar una forma para no subir las claves del cliente de Diablo III, el clientSecret y el clientId.

Esto lo vamos a hacer usando variables de entorno. Las variables de entorno nos van a permitir 2 cosas:

  • La primera, securizar nuestra app, pues no vamos a compartir nuestras claves del cliente de Diablo III (https://develop.battle.net/access/clients)
  • La segunda es que la app sea más flexible y modular, pues vamos a poder configurarla a través de un fichero.

📗 Lee la documentación de las variables de entorno aquí: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

Vamos a crear nuestra primera variable de entorno. Imagina que quieres que el título de la aplicación se pueda configurar con una variable de entorno.

El CLI de Vue nos ofrece una forma muy sencilla para poder usar las variables de entorno. Lo primero es crear un archivo llamado .env, lo segundo es meter nuestras variables. Un archivo .env simplemente contiene pares clave=valor.

Para que Vue lo entienda, todas las variables de entorno que crees deben empezar, obligatoriamente, por VUE_APP_.

Crea tu archivo .env en el directorio raíz del proyecto, y crea la variable VUE_APP_TITLE=D3PF:

env

Webpack se va a encargar de que nuestra variable esté accesible desde cualquier parte de la aplicación. Podemos acceder a ella a través de process.env.VUE_APP_TITLE.

Para probar que funciona, podemos ir al componente src/components/HeaderBar/Index.vue donde tenemos el icono y el título de la app. Cambiamos el título por nuestra variable de entorno de la siguiente forma:

<template>
  <div class="header-bar">
    <div class="navigation-bar">
      <b-navbar toggleable="lg" type="dark" variant="dark">
        <b-navbar-brand :to="{ name: 'Home' }">
          <img src="@/assets/img/diablo-iii.svg" alt="D3" width="30">
          <!-- Variable de Entorno -->
          <span class="font-diablo ml-2">{{ title }}</span>
        </b-navbar-brand>
      </b-navbar>
    </div>

  </div>
</template>

<script>

export default {
  name: 'HeaderBar',
  data () {
    return {
      // 🔥 Note that only variables that start with VUE_APP_ will be statically embedded
      // into the client bundle with webpack.DefinePlugin.
      // Recuperamos la variable de entorno y la guardamos en 'title'
      title: process.env.VUE_APP_TITLE
    }
  }
}
</script>

Todas las variables de entorno las puedes encontrar bajo process.env.

Continuando con el proceso anterior, si abres la web, deberías ver algo como esto:

env2

😳 ¡El título ha desaparecido! No pasa nada, está todo controlado. Solo necesitamos reiniciar el servidor (npm run serve) para que se reflejen los cambios. Y ahora sí, deberías ver esto:

  • Levantamos server:
    server

  • Abrir la web:
    env3

Ya sabes cómo crear variables de entorno y cómo usarlas. Estas variables de entorno son “públicas”, para crear variables de entorno de tipo “privado” Vue CLI nos da otro método. Simplemente hay que crear el fichero de variables de entorno con otro nombre: .env.local.

En resumen:

.env                # Cargada en todos los casos
.env.local          # Cargada en todos los casos, ignorado por Git

Este modo de crear variables de entorno nos interesa más, ya que queremos que Git lo ignore y no lo suba. Es justo lo que necesitamos para trabajar con nuestros datos del cliente de Diablo III (clientId y clientSecret).

Creamos el fichero .env.local, al mismo nivel que el otro que hemos creado antes y le damos el contenido de nuestras variables:

VUE_APP_CLIENT_ID =db5d7d6e7db543e0a3e13cf5812ce76
VUE_APP_CLIENT_SECRET=wuf4Ym9jX5kOurOUnmnB8wdBO6VKSm6

Recuerda usar tus claves, estas no te van a funcionar ☝️.

A continuación deberíamos cambiar las variables de clientId y clientSecret que creamos al principio por las variables de entorno. Para ello, vamos al fichero de /api/oauth.js y cambiamos:

// Variables de Entorno
- const clientId = 'db5d7d6e7db543e0a3e13cf5812ce76d'
- const clientSecret = 'wuf4Ym9jX5kOurOUnmnB8wdBO6VKSm60'
+ const clientId = process.env.VUE_APP_CLIENT_ID
+ const clientSecret = process.env.VUE_APP_CLIENT_SECRET

Ahora nuestras claves están a salvo (en un fichero local), pues git las va a ignorar, pero cuando levantemos el servidor, Vue las va a saber interpretar. Recuerda que tienes que reiniciar después de hacer estos cambios.

Desplegando la aplicación

Ahora sí, ya tenemos todo preparado para poder desplegar nuestra app en la nube ☁️. Antes de nada, necesitas tener una cuenta en Netlify, si es que no la tienes ya.

Mi recomendación es que lo hagas con la cuenta de GitHub, pero puedes usar el método que quieras.

login

Una vez tengas la cuenta creada y estés en el panel de control de Netlify (ver imagen abajo), vamos a crear un nuevo sito a partir de git con el botón New site from Git:

arrow

En el siguiente paso tenemos que elegir el servicio en el cual tenemos alojado nuestro código. En mi caso se corresponde con “GitHub”, los pasos deberían ser similares en los 3 casos.

options

Te pedirá que inicies sesión con el GitHub, o con el servicio que hayas seleccionado. Una vez estés logeado, lo siguiente que tienes que hacer es buscar el repositorio que quieres desplegar en el listado que aparece:

repo

Una vez que hayas elegido el repositorio que quieres desplegar, deberías estar en el paso de “Configuración del despliegue” (Deploy settings):

build-opts
build-opts-2

Vamos a revisar las opciones que tenemos para configurar:

  • Owner: Lo dejamos tal cual está.
  • Branch to deploy: Elige la rama dónde está el código para subir, en este caso, en master.

Ahora viene lo más importante (y lo que más me gusta 😍)

  • Build command: El comando con el que hacemos el build de nuestra aplicación. Escribimos npm run build.
  • Publish directory: El directorio que se genera al hacer el build. Escribimos dist.

Cuando lo tengas listo, le das a Deploy site y voilà! Tu sitio web está a punto de desplegarse. Por defecto, tendrás una URL autogenerada, pero le puedes poner un nombre. En mi caso le he puesto diablo3, por lo que la url completa es la siguiente: https://diablo3.netlify.com.

Si te interesa cambiar el nombre debes hacer click en Site settings y luego en Change site name

change-name

Si aún no te has enamorado de Netlify, te cuento más:

  • Cada vez que subas un cambio a la rama master (o la rama que hayas configurado), tus cambios se desplegarán automágicamente 😱.
  • Tienes acceso al historial de todos los despliegues (deploys) de tu app, vas a poder ver cómo estaba tu app hace 1 semana (por ejemplo) 🤯.
  • En caso de que hagan un Pull Request en Github, te genera un deploy (automático) del PR para que puedas ver cómo queda 🤯🤯
  • ¡Todo esto de manera gratuita! 👏

En la siguiente imagen se puede ver la vista de detalle de un deploy, el 21 de Febrero. Si hacemos click en ese link, podemos ver cómo estaba la web ese día.
preview-deploy.

En la imagen vemos un Pull Request en Github. Como lo tenemos configurado con Netlify, automáticamente nos va a generar una URL para que podamos ver el resultado, antes de aceptar el PR.
PR.

En caso de que todo en la app esté OK, aparece un check ✅ indicándonos que la app se ha podido desplegar sin problemas (Ver la siguiente imagen).
Si hubiera algún error, aparecería una X de color rojo ❌.

PR-OK

Desde que conocí Netlify, es mi hosting personal en el cual subo todos mis proyectos.
Me hace la vida más fácil, y si lo necesitas, puedes comprar el dominio y hostear la web sin utilizar un subdominio de Netlify.

Con tu app funcionando, puedes compartir el enlace de tu app en el sistema de comentarios.
¿Cómo que no te funciona? ¿¿Un error?? 🤔

¿Qué crees que ha pasado? 😜 Si pensaste en variables de entorno, acertaste.

La app no puede funcionar correctamente, ya que no las hemos configurado en Netlify. Desde el panel de control de Netlify vamos a ser capaces de configurar las variables de entorno de nuestra app muy fácilmente.

Para configurar las variables de entorno vamos a Site settings > Build & Deploy (del menú de la derecha) > Environment. Le das a Edit variables y metes las variables de entorno que hemos configurado antes:

  • VUE_APP_CLIENT_ID
  • VUE_APP_CLIENT_SECRET
  • VUE_APP_TITLE
env-var

Una vez hayas hecho eso, ya debería funcionarte la app sin problemas. Hay que desplegarla de nuevo, para que tenga la configuración nueva. Para ello, vamos a la pestaña deploys y hacemos click en Trigger deploy (un botón, a la derecha). Esto va a lanzar manualmente un despliegue. En cuanto terminé el despliegue, tu sitio web estará listo. ✌️

Ahora que ya tienes tu app corriendo en Netlify, es el momento de que compartas tu enlace a través del sistema de comentarios. ¿Has hecho algún cambio? 🎨 ¡Muéstrale al mundo tu creación!

Aportes 12

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

¿Has subido tu aplicación a Netlify? Comparte tu enlace aquí 👇

Listo! Misión Cumplida!💪🏽 Lo he desarrollado con PUG, a diferencia del Proyecto del curso, para quien desee ver como seria desarrollar con PUGy he agregado algunos Tooltips. Por alguna razón algunas clases no me están funcionando, he revisado y nada, por si alguien quiere checar.

APP: D3PF
REPO: Github

Muy bueno el curso, comparto mi deploy https://diablo3-jcdelrioe.netlify.app/ y mi repo: https://github.com/jcdelrioe/DiabloIII

Al analizar la pagina generada se e presenta un error que no lo entiendo completamente, analizando las páginas de otros compañeros me sale el mismo error, no se si es mi laptop o es general

Aun no le realizo cambios pero ya quedo como en el curso por cierto el babel-eslint en la version 10 me dio error al hacer el deploy aun con las moficaciones que habian propuesto en los aportes de clases pasadas asi que lo deje en la version recomendada por el profesor la 7.2.3 y funciono perfecto.
https://stoic-morse-9a68ae.netlify.app

Muy bueno ya he hecho mi deploy DiabloIII

También aprovecho a añadir algunos comentarios:

1.- Si estuvieron subiendo sus commits a GitHub, recomiendo relanzar sus llaves de Blizzard, ya que aunque hayas añadido el .env.local, en commits anteriores sus llaves aún serán visibles

2.- A mi me gusta mucho Laravel, y siempre trato de generar estructuras similares a Laravel, entonces, para lo archivos .env me gusta más tener los archivos:

.env
.example.env

Así el que untrackeo es el .env

3.- Al momento de desplegar en Netlify recomiendo añadir únicamente los repositorios que vayan a despleegar, no todos, por seguridad:D! Si no ven sus repositorios al momento de elegirlos, abajo hay una opción en donde puedes configurar Netlify con GitHub para añadirlos.

Y por último, Netlify es gratuito… ¿Hasta qué punto? ¿Me sirve para hacer deploy de aplicaciones que realmente van a estar en producción y no pagar ni un centavo? ¿Qué pasa si empiezo a generar tráfico en mi aplicación?

Yo no añadí funcionalidades a la app, a excepción del ‘Made by’ ;D pero tengo todo mi código comentado a mi forma (mucho) para poderlo tomar como apuntes para futuras consultas.

Mi deploy es https://d3nhd.netlify.app/
Mi repositorio Github es https://github.com/tetric0/platzi-d3pf

Nice! Aquí está el mio:D! El funcionamiento es el mismo pero retoqué pequeñas, diminutas y precisas partes del código pra que tuviera mi estilo de programación:

https://retaxmaster-diablo3.netlify.app/#/

Y claro, igual mi repo en GitHub:
https://github.com/RetaxMaster/diablo-3-profile-finder