El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Angular 2 práctico: Sitio de consumo de videos

Compilar y publicar proyecto final para distribución web

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Una vez terminado el proceso de desarrollo, es momento de compilar el código fuente, que hasta ahora está basado en TypeScript y separado en múltiples archivos, para convertirlo en una aplicación basada en CSS, HTML y JavaScript ,100% compatible con todos los navegadores web modernos.
04:36

Transcripción

Tenemos listo y terminado nuestro sitio de videos. Es momento de publicarlo y ponerlo disponible para todos los usuarios de Internet. ¿Cómo vamos a hacer esto? Si revisamos el código en el que estamos trabajando, vamos a ver que nuestra aplicación tiene varias carpetas, en donde hemos estado trabajando, y de hecho, estas carpetas pueden hacer que se vuelva algo incómodo trabajar y publicar nuestra información, en especial porque vamos a trabajar con una gran cantidad de archivos. Nosotros no vamos a tomar la carpeta en la que estamos trabajando nuestro código y la vamos a poner en un servidor, esto no va a funcionar correctamente. Lo que vamos a hacer es exportar nuestra aplicación para optimizarla, dejarla lista para un servidor, y que pueda trabajar correctamente con un código optimizado y de tamaño reducido. ¿Cómo vamos a hacer eso? Bueno, en este momento, estoy trabajando en mi aplicación, y de hecho tengo activo el servidor. Voy a detener el servidor, presionando la tecla Ctrl+C y voy a incluir un nuevo comando llamado "ng build". "ng build" lo que va a hacer es que va a compilar todo el contenido de mi aplicación, lo va a optimizar y lo va a dejar listo para publicar directamente dentro de un servidor. En este caso, como estamos trabajando desde Angular, y, en el caso de Angular es completamente tecnología desde el lado del cliente, no vamos a tener que preocuparnos por el lenguaje en el que se encuentra el servidor. Así que, básicamente, podemos publicarlo en cualquier servidor que tenga soporte para "html", que es prácticamente el 100% de los servidores en los que podemos trabajar de Internet. Ahora, en el momento en el que acaba el proceso, vamos a revisar que tenemos una nueva carpeta llamada "dist". Esta carpeta "dist" es la carpeta que nos va a servir a nosotros para distribuir nuestra aplicación. Acá se encuentra todo compilado debidamente. Vamos a revisarlo dentro del explorador, y vamos a ver que acá, tengo la información de mi sitio. Como pueden notar, ya no existen las carpetas, como por ejemplo las de la aplicación, tales como las de "e2e", "node_modules", "src", toda esta información ha sido reemplazada, únicamente tenemos la aplicación y todo está funcionando como debe ser. Ahora, yo tengo, —vamos a copiar este código— un servidor Apache funcionando. Mi servidor Apache está funcionando para darme la información de las APIs en "php" con las que he estado trabajando este sitio. En este servidor Apache, voy a guardar la información. Durante el desarrollo de esta aplicación, he estado trabajando con un servidor local para poder depurar mi aplicación. Sin embargo, ahora que lo voy a publicar, lo voy a poner dentro de este servidor Apache, en este caso estoy dentro de la carpeta "htdocs", y lo que voy a hacer es que voy a copiar los contenidos que se encontraban dentro de la carpeta "dist". En este caso, vamos a ver cómo está el archivo "index", donde se encuentran los archivos principales de mi aplicación, y también tenemos archivos en Javascript, que van a tener toda la información compilada de los archivos fuente que nosotros trabajamos en TypeScript. Esto es compatible con todos los navegadores, y también tenemos una carpeta llamada "assets", donde se encuentran todos los archivos que nosotros hemos almacenado. En este caso, he almacenado acá, una librería adicional llamada "font-awesome", que instalé para poder utilizarlo como ejemplo ¡Listo! Tenemos la información necesaria, tenemos ya, detenido, el servidor que utilizamos para depuración, de hecho, vamos a cerrar, ya directamente"Visual Studio". Ahora, nada más me queda probar mi aplicación, que ya tengo dentro del servidor Apache, y como está dentro de la carpeta "htdocs", y tengo el archivo llamado "index.html", simplemente tengo que entrar a "localhost". En este caso, estaba trabajando en el puerto 4200, que era el que utilizaba para depuración, pero ya no lo voy a necesitar más, estoy dentro del servidor Apache. Vamos a entrar directamente al "localhost" y acá tenemos la aplicación que hemos estado trabajando directamente en Angular con el código optimizado listo para funcionar y para distribuirse a través de la Internet.

Angular 2 práctico: Sitio de consumo de videos

Aprende a crear un sitio web de consumo de vídeos con Angular 2, desarrollando el back-end y conectando con el servidor local, terminando por la personalización del reproductor.

2:41 horas (26 Videos)
Actualmente no hay comentarios.
 
Formadores:
Fecha de publicación:12/04/2017
Duración:2:41 horas (26 Videos)

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.