‫-: Ya casi estamos listos para implementar nuestra aplicación.
‫Pero antes de hacer
‫eso, en realidad hay un par de
‫cosas de las que debemos ocuparnos.
‫Y hagámoslo ahora.
‫Y lo primero que quiero
‫hacer es
‫instalar un paquete que comprimirá todas nuestras respuestas.
‫Básicamente, siempre que enviamos una respuesta de texto a un cliente,
‫no importa si es código JSON o HTML.
‫Con el paquete
‫de compresión, ese texto se comprimirá drásticamente.
‫Muy bien, instalemos aquí.
‫Npm install, y simplemente, compresión.
‫Está bien.
‫Así que incluyémoslo aquí.
‫Ahora, esto expondrá una función de
‫capa intermedia muy simple
‫que simplemente tenemos que conectar
‫a nuestra pila de capa intermedia.
‫Así que hagámoslo en algún lugar de aquí.
‫Cerca del final, realmente no importa.
‫Así que app. use,
‫ingrese allí la compresión de llamadas.
‫Entonces, esto aquí devolverá una función central izquierda
‫que nuevamente comprimirá todo el
‫texto que se envía a los clientes.
‫Por lo tanto, no funcionará para las
‫imágenes porque, por lo general, ya están comprimidas.
‫Entonces, por ejemplo, un formato JPEG ya está comprimido.
‫Así que esto solo funcionará para el texto.
‫Entonces, una vez que nuestro sitio
‫web esté realmente implementado, probaremos si esta compresión está realmente activa.
‫De todos modos, el siguiente paso antes de implementar nuestra aplicación es deshacerse de
‫la mayor parte de la consola. registros que todavía tenemos
‫en nuestro código.
‫Y eso es solo porque estos inicios de sesión terminarán en
‫los registros de nuestra plataforma de alojamiento.
‫Por eso no queremos contaminar estos troncos en producción.
‫Bueno.
‫Así que busquemos rápidamente aquí la consola.
‫Y como puede ver, hay muchos de ellos.
‫Así que este ya está comentado.
‫Así que no voy a trabajar en eso.
‫Pero este de aquí, vamos a deshacernos de él.
‫Así que ahora,
‫uno por uno, vamos a echar un
‫vistazo a todos y los
‫que no sean relevantes simplemente los comentaremos.
‫Está bien.
‫Aquí, en el controlador de errores, también tenemos un montón de ellos,
‫pero algunos son realmente relevantes.
‫Ahora, este no.
‫De hecho, eliminémoslo por completo.
‫Tampoco este,
‫pero aquí tenemos estos tres que
‫realmente creamos a propósito para
‫que terminen en los registros de nuestra plataforma de alojamiento.
‫Bueno.
‫Así que recuerde que lo configuramos de manera
‫que cuando haya un error en el sitio web
‫de renderizado, obtengamos un
‫registro del error que realmente sucedió.
‫Junto con este emoji aquí.
‫Y así, cada vez
‫que vemos esto, podemos identificar fácilmente en
‫nuestros registros que algo malo sucedió de nuestro lado.
‫Bien, tenemos un par más aquí.
‫Por ejemplo, para otros errores desconocidos en los
‫que no queremos filtrar los detalles del error al cliente.
‫Y estos están bien para quedárselos.
‫Este también lo queremos mantener
‫para informarnos en los registros que la
‫conexión a la base de datos fue exitosa.
‫Estos también están aquí.
‫Este de aquí está en realidad en import-dev-data, por lo que
‫no son importantes en absoluto.
‫De todos modos, todos los registros aquí, guardémoslos.
‫Entonces aquí, tenemos este aquí,
‫que solo hicimos realmente para usar esta capa intermedia.
‫Así que apaguemos esta capa intermedia.
‫Lo cual nuevamente solo usamos
‫para probar esta publicación, encontrar la capa intermedia.
‫A continuación, en el modelo de usuario.
‫Bueno, este tampoco lo queremos.
‫Esto fue solo una vez más con fines de prueba.
‫Luego tenemos el paquete JSON, por lo
‫que en realidad ni siquiera llegan a los registros.
‫Luego tenemos que agrupar
‫donde no vamos a cambiar nada.
‫Entonces tenemos index. js.
‫Así que ese es nuestro JavaScript del lado del cliente.
‫Así que deshagámonos de esta consola. inicie sesión aquí.
‫Luego también tenemos algunos más aquí en el cierre de sesión,
‫pero este realmente vamos a mantenerlo.
‫Algunos más en raya.
‫Y no estamos interesados aquí en la sesión.
‫Pero este de aquí cuando hay un
‫error está bien.
‫Y luego en el servidor. js, tenemos
‫estos aquí, que
‫en realidad, nuevamente, hicimos a propósito.
‫Para que realmente terminen apareciendo en nuestros archivos de registro.
‫Y no se preocupe si realmente no sabe a
‫qué me refiero con los archivos de registro.
‫Verá una vez
‫que coloquemos nuestra aplicación en Heroku.
‫Entonces te mostraré los archivos de registro para entonces, de acuerdo.
‫De todos modos, todas estas consolas. Los registros aquí son
‫a propósito.
‫Y también lo es este
‫aquí sobre la conexión exitosa a la base de datos.
‫Este aquí
‫también nos informa el puerto donde se está ejecutando la aplicación.
‫Y este, y este también son importantes.
‫Está bien.
‫Y así con esto nos encargamos de
‫toda la consola innecesaria. registros de que
‫solo estamos contaminando nuestras salidas de registro.
‫Bien, cerremos todos estos archivos aquí.
‫Está bien.
‫Y ahora, el
‫siguiente paso, cambiemos las URL o los códigos API
‫en el lado del cliente, JavaScript.
‫Entonces, por ejemplo, aquí en inicio de sesión. js, ahora
‫mismo hacemos estos códigos de API
‫para esta API de desarrollo.
‫Así que aquí, por supuesto, tenemos nuestra URL de desarrollo.
‫Y
‫así, no va a funcionar
‫en producción porque, obviamente,
‫desde allí, no podremos acceder a ninguna URL de desarrollo.
‫Y lo mismo aquí arriba.
‫Pero, afortunadamente, existe una solución muy sencilla.
‫Así que todo lo que tenemos que hacer es deshacernos de esta parte.
‫Entonces, si lo eliminamos
‫así, terminaremos con esta URL relativa.
‫Y dado que la API
‫y el sitio web están alojados
‫en el mismo servidor, esto funcionará perfectamente.
‫Así que hacerlo así
‫es como especificar la ruta a las imágenes en HTML.
‫Por ejemplo, aquí en la página de
‫descripción general, donde
‫tenemos estas imágenes, simplemente decimos "/
‫img" y luego irá a
‫la URL actual y luego agregaremos esa ruta.
‫Bueno.
‫Y entonces lo mismo va a estar sucediendo aquí.
‫Bueno.
‫Ahora, nuevamente, esto solo funciona porque la API y el
‫sitio web básicamente usan la misma URL.
‫Entonces los hospedaremos en el mismo lugar.
‫Pero si estuviera alojando su
‫sitio web o su interfaz en
‫una URL, y luego su API en
‫otra URL, entonces no funcionaría así, está bien.
‫Pero en esta sencilla aplicación podemos hacerlo así porque
‫tenemos una configuración muy sencilla.
‫Así que eliminémoslo aquí en el inicio de sesión.
‫En el índice creo que no tenemos ninguna URL.
‫Sí es cierto.
‫Tampoco en las alertas.
‫No en Mapbox, creo.
‫No.
‫Pero ciertamente a rayas.
‫Así que para conseguir nuestra sesión.
‫Entonces podemos hacer exactamente lo mismo aquí.
‫Y también en updateSettings.
‫Bueno.
‫Dale una oportunidad.
‫Y todos ellos.
‫Y para que uno también esté arreglado.
‫Y ahora, finalmente, y continuando trabajando en JavaScript
‫del lado del
‫cliente, necesitamos crear nuestro paquete final.
‫Está bien.
‫Así que ahora mismo, este es nuestro archivo JavaScript de paquete.
‫Pero recuerde que esto acaba de crearse
‫con la función de reloj.
‫Entonces en nuestro paquete. json
‫tenemos este reloj. js que simplemente creará un
‫nuevo paquete cada vez que cambiemos uno de los archivos.
‫Pero sin ninguna
‫compresión o sin ninguna optimización del rendimiento.
‫Pero ahora que realmente hemos terminado con todo
‫nuestro JavaScript, estamos listos para construir nuestro JavaScript
‫en un paquete final.
‫Y aquí deberíamos reemplazar este reloj con build,
‫y eso creará
‫nuestro paquete de JavaScript comprimido final.
‫Está bien.
‫Así que probemos eso aquí ahora.
‫Con npm run.
‫Y una vez más con la pestaña para autocompletar.
‫Así que veamos si ...
‫Y esta hecho.
‫Entonces, echemos un vistazo a nuestro paquete ahora.
‫Y ver eso ahora, está realmente así
‫de bien comprimido.
‫Está bien.
‫Ahora también puede ver que tenemos un montón de estos nuevos archivos
‫aquí y eso es porque está en nuestro árbol de archivos.
‫Parcel realmente crea esta carpeta de caché.
‫Pero no queremos esa carpeta en nuestro depósito de git.
‫Derecha.
‫Así que agreguemos eso aquí.
‫Y
‫ahora verá que automáticamente tan
‫pronto como lo guardemos, volverá
‫a los archivos originales que se actualizaron.
‫Bueno.
‫Entonces, una vez más, VS Code es
‫realmente inteligente en todo lo relacionado con git.
‫Está bien.
‫Bueno.
‫Y creo que eso es todo.
‫Entonces, nuestra aplicación está ahora preparada para ser realmente implementada.
‫Y ahora el último paso es
‫enviar todos estos archivos modificados a nuestro repositorio.
‫Así que recuerde que el primer paso es agregar todos los archivos
‫al área de preparación.
‫Entonces, agregue, y en este caso, todos los archivos.
‫Está bien.
‫Y ahora todo lo que tenemos que
‫hacer es git commit,
‫luego el mensaje, y digamos, "Aplicación preparada para implementación".
‫¡Excelente!
‫Entonces ves que todas nuestras modificaciones se han ido.
‫También de aquí.
‫Lo que significa que la rama de trabajo
‫actual se denomina limpia.
‫Y sí, ahora estamos listos para implementar nuestra aplicación en
‫el siguiente video.