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".

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 13

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

驴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

En producci贸n puede que no muestre las imagenes de media blizzard com, porque no cuenta con certificado SSL, as铆 que en local van a aparecer, pero en producci贸n posiblemente no.

Soluci贸n, cambiar url a una con certificado SSL (https):

// Lo coloco as铆 por el filtro de enlaces de platzi
// const baseUrl = 'http'+'://media.blizzard.com/'
const baseUrl = 'https://' + ' blzmedia-a.akamaihd.net/'

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 鈥楳ade 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

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:馃槼 隆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:Abrir la web: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 GitEste 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 =db5d7d6e7db543e0a3e13cf5812ce76VUE_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_SECRETAhora 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贸nAhora 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.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: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.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:Una vez que hayas elegido el repositorio que quieres desplegar, deber铆as estar en el paso de 'Configuraci贸n del despliegue' (Deploy settings):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 nameSi 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.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.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 鉂.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_IDVUE_APP_CLIENT_SECRETVUE_APP_TITLEUna 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!", "url" : "https://platzi.com/clases/1856-avanzado-vue/27771-netlify/", "wordCount" : "52", "publisher" : { "type" : "Organization", "name" : "Platzi INC" } }