Dockerize an Angular Application using Nginx

Summary

En este video, Junior muestra cómo decorar una aplicación Angular, la cual es la que han estado construyendo y planean dockerizar. La aplicación, que incluye funcionalidades como actualizar información de perfil, cambiar contraseña, roles y permisos, así como la capacidad de gestionar clientes y facturas, se ha desarrollado desde cero. Seguidamente, Junior explica el proceso de Dockerización, que incluye la creación de un Dockerfile para la aplicación Angular, utilizando una imagen de Node.js y Nginx. Detalla los comandos necesarios para copiar archivos, instalar dependencias, y construir la aplicación. Además, aborda la importancia de especificar una versión de Node.js para evitar problemas de compatibilidad y cómo usar el archivo '.dockerignore' para excluir archivos no necesarios en la imagen de Docker. Finalmente, Junior ejecuta el comando 'ng build' para construir la aplicación y se topa con errores de presupuesto de paquete, los cuales resuelve ajustando la configuración en el archivo 'angular.json'. El video es una guía útil para desarrolladores que deseen empaquetar su aplicación Angular en un contenedor Docker.

Takeaways

• 🛠️ Se discute cómo decorar una aplicación Angular y se menciona que se usará para dockerizar.
• 🏗️ Se detalla cómo se construyó la aplicación desde cero, incluyendo todas las funcionalidades.
• 📝 Se muestra cómo se puede actualizar información de perfil, notificaciones, actividad de la cuenta y cambiar la contraseña.
• 🔄 Se explica cómo cambiar la autorización y el rol de usuario, y cómo esto afecta los permisos del mismo.
• 🗑️ Se destaca la capacidad de eliminar permisos para clientes y usuarios si el rol cambia.
• 🖼️ Se menciona la posibilidad de actualizar la información de la cuenta, incluida la imagen de perfil.
• 👥 Se cubre cómo se pueden gestionar los clientes, incluida la adición y actualización de información de clientes.
• 📋 Se aborda el tema de la creación y gestión de facturas, incluyendo la selección de clientes y la entrada de información.
• 📂 Se indica que la aplicación fue diseñada para manejar clientes y facturas, y se sugiere que se dockerizará.
• 📁 Se describe el proceso de creación de un Dockerfile para la aplicación, incluyendo la especificación de la versión de Node.js y la configuración de un servidor web Nginx.
• 🚀 Se discute la importancia de la compatibilidad de las bibliotecas con el tiempo de ejecución de Angular IV y cómo usar el comando `ngcc` para asegurar esta compatibilidad.

Q & A

¿Qué aplicación está utilizando Junior para demostrar cómo decorar una aplicación Angular?

Junior está utilizando una aplicación Angular que ha construido previamente y planea dockerizar. La aplicación permite a los usuarios actualizar su información de perfil, recibir notificaciones, cambiar su contraseña, actualizar su rol y permisos, y también tiene funcionalidades para manejar clientes y facturas.

¿Por qué es importante especificar una versión de Node.js en el archivo Dockerfile?

Es importante especificar una versión de Node.js en el archivo Dockerfile para evitar que se utilice la última versión disponible, la cual podría contener cambios que rompan la aplicación. Es recomendable usar una versión conocida que sea compatible con la aplicación para mantener su estabilidad.

¿Qué hace el comando 'npx ngcc' en el archivo Dockerfile?

El comando 'npx ngcc' es la Compiladora de Compatibilidad de Angular, que se utiliza para compilar bibliotecas publicadas en un formato heredado y hacerlas compatibles con el tiempo de ejecución de Angular Ivy. Esto asegura que los archivos generados por 'NG build' sean compatibles con la mayoría de los navegadores.

¿Cuál es el propósito del archivo '.dockerignore'?

El archivo '.dockerignore' funciona similar al archivo '.gitignore', y se utiliza para definir los archivos y carpetas que no deben ser copiados dentro del contenedor de Docker al crear la imagen del contenedor. Esto mejora la eficiencia del proceso de construcción al excluir archivos grandes o irrelevantes.

¿Cómo se aborda el problema de los errores de dependencias externas en la aplicación Angular?

Para solucionar los errores de dependencias externas, se debe permitir explícitamente en el archivo 'angular.json' las dependencias comunes de JavaScript que la aplicación utiliza. Esto se hace agregando los nombres de las dependencias en el arreglo de 'allowedCommonJsDependencies'.

¿Qué es la configuración de 'budgets' en el archivo 'angular.json' y por qué es importante?

La configuración de 'budgets' en el archivo 'angular.json' establece un límite de tamaño para los paquetes o bundles de la aplicación. Esto es importante para monitorear y controlar el tamaño de los archivos que se cargan inicialmente, lo que puede afectar directamente el rendimiento y la experiencia del usuario.

¿Cómo se definen las variables de entorno para diferentes entornos de trabajo en Angular?

Se crean archivos de entorno separados, como 'environment.ts' para el entorno de desarrollo y 'environment.prod.ts' para el entorno de producción. Estos archivos contienen variables específicas para cada entorno y se selecciona el archivo correcto en función de la configuración de compilación de Angular.

¿Cómo se soluciona el problema de las rutas en una aplicación de página única (SPA) cuando se refresca la página?

Para solucionar este problema, se configura el servidor web (en este caso, Nginx) para que siempre sirva el archivo 'index.html' cuando no encuentra la ruta solicitada. Esto permite que Angular maneje la navegación en el lado del cliente y no interrumpa la experiencia del usuario al refrescar la página.

¿Por qué se utiliza un archivo 'default.conf' personalizado en el archivo Dockerfile?

Se utiliza un archivo 'default.conf' personalizado para incluir la configuración específica que se desea aplicar al servidor Nginx dentro del contenedor de Docker. Esto evita la necesidad de modificar manualmente el archivo de configuración dentro del contenedor y permite que la configuración sea parte del proceso de construcción de la imagen Docker.

¿Cómo se puede implementar la aplicación Angular en un servidor utilizando Docker?

Se puede crear un archivo Dockerfile que defina los pasos para construir la imagen de Docker de la aplicación Angular, incluyendo la especificación de la versión de Node.js, la instalación de dependencias, la compilación de la aplicación y la configuración del servidor web. Luego, se utiliza 'docker-compose' o los comandos de Docker para construir la imagen y ejecutar el contenedor de la aplicación en el servidor.

¿Cómo se puede acceder a los registros (logs) de un contenedor de Docker?

Se puede utilizar el comando 'docker logs' seguido del ID o el nombre del contenedor para acceder a los registros de ese contenedor. Esto permite a los desarrolladores y administradores verificar el funcionamiento y diagnósticar problemas en el contenedor de Docker.

Outlines

00:00

😀 Introducción y descripción de la aplicación Angular

Junior presenta el tutorial sobre cómo decorar una aplicación Angular. Explica que la aplicación ha sido desarrollada desde cero y que se usará para dockerizar. Detalla las funcionalidades de la aplicación, como la actualización de información de perfil, gestión de notificaciones, cambio de contraseña y autorización, y cómo se pueden modificar los roles y permisos de usuario. Además, menciona la posibilidad de habilitar la autenticación de múltiples factores y la gestión de clientes e información de cuenta.

05:02

🛠 Creación del Dockerfile para la aplicación Angular

Se inicia con la creación de un Dockerfile para la aplicación, explicando la necesidad de una imagen de Node.js y la copia de archivos dentro de un servidor web Nginx. Destaca la importancia de especificar una versión de Node.js conocida para evitar problemas de compatibilidad. Describe los comandos para copiar archivos, instalar dependencias de Node.js y ejecutar la compilación de Angular con npx ngcc, que es esencial para la compatibilidad de librerías con el tiempo de ejecución de Angular.

10:04

📄 Configuración del Dockerignore y construcción de la imagen

Se detalla la creación de un archivo .dockerignore para evitar la copia de archivos no deseados en el contenedor, similar al .gitignore. Luego, seguidamente, se ejecuta el comando npm run build para construir la aplicación, lo que resulta en la creación de la carpeta 'distribution' con los archivos estáticos generados. Se describe el proceso de copiado de estos archivos en el servidor Nginx y la exposición del puerto 80 para servir los archivos estáticos.

15:05

🚀 Ejecución del comando ng build y solución de problemas

Junior ejecuta el comando ng build y aborda el problema de 'no meeting the budget', que se refiere a la configuración de tamaño máximo de los archivos generados. Cambia la configuración en el archivo angular.json para aumentar el tamaño máximo del archivo. Posteriormente, se describe la estructura de la carpeta 'distribution' y cómo los archivos generados serán copiados en el servidor Nginx.

20:06

🔧 Configuración de entornos y variables de entorno en Angular

Se explica cómo crear archivos de entorno en Angular para diferentes configuraciones de desarrollo y producción. Se enfoca en la importancia de la bandera de producción y la URL base de la API. Se muestra cómo se utilizan estas variables en los servicios de la aplicación y cómo se configuran en el archivo angular.json para el intercambio de archivos de entorno según el entorno de producción o desarrollo.

25:06

🖥️ Creación del archivo docker-compose.yml

Se detalla la creación del archivo docker-compose.yml, donde se definen los servicios, la construcción de la imagen, la asignación de puertos y la red para la aplicación. Se resalta la importancia de este archivo para la ejecución y gestión de los contenedores de Docker.

30:09

🚧 Ejecución del contenedor y solución de errores

Se ejecuta el comando docker-compose up para construir la imagen y ejecutar el contenedor. Se aborda el problema de los errores y advertencias en la aplicación y cómo se resuelven al permitir las dependencias comunes de JavaScript en el archivo angular.json. Se menciona la necesidad de reiniciar el contenedor después de realizar cambios en la configuración.

35:10

🔄 Actualización y prueba de la aplicación en Docker

Seguidamente, se prueba la aplicación desplegada en Docker, accediendo a través de la dirección IP del host y confirmando que la aplicación se ejecuta correctamente. Se muestra cómo se puede interactuar con la aplicación, incluyendo la actualización de información de perfil y la gestión de clientes.

40:12

🛠️ Solución del problema de 404 no encontrado en la aplicación

Se identifica el problema de los errores 404 que ocurren al actualizar la página en una ruta específica en una aplicación de página única (SPA). Se explica que este es un problema común en frameworks JavaScript y se ofrece una solución sencilla para Nginx, que consiste en servir siempre el archivo index.html. Se demuestra cómo entrar en el contenedor en ejecución y modificar la configuración de Nginx para solucionar este problema.

45:13

📝 Edición de la configuración de Nginx y reinicio del contenedor

Se describe el proceso de edición de la configuración de Nginx dentro del contenedor y el reinicio del contenedor para aplicar los cambios. Se destaca la importancia de la directiva 'try_files' en la configuración de Nginx, que asegura que se sirva el archivo index.html en lugar de devolver un error 404. Además, se muestra cómo copiar una configuración predefinida en el Dockerfile para evitar la necesidad de editarla manualmente en el contenedor.

50:14

🔄 Recompilación de la imagen y confirmación del funcionamiento

Seguidamente, se recomienda la recompilación de la imagen de Docker y se ejecuta el comando para construir y reiniciar el contenedor. Se confirma que la aplicación funcione correctamente después de los cambios, evitando el error 404 al actualizar la página en cualquier ruta. Se ofrece ayuda para configurar un servidor Apache similar si es requerido.

55:15

📝 Finalización del tutorial y pruebas adicionales

Finalmente, se concluye el tutorial asegurándose de que la aplicación funcione correctamente en Docker, incluyendo la creación y edición de facturas y la actualización de información de clientes. Se invita a los espectadores a realizar pruebas en su propio entorno de desarrollo utilizando servicios en la nube como AWS o Microsoft Azure, y a ponerse en contacto a través de Discord para cualquier pregunta o asistencia adicional.

Keywords

💡Docker

Docker es una plataforma de contenedores que permite a los desarrolladores empaquetar, distribuir y ejecutar aplicaciones de manera eficiente y segura. En el video, se utiliza Docker para 'dockerizar' una aplicación Angular, lo que implica empaquetar la aplicación en un contenedor para su fácil despliegue y ejecución en diferentes entornos.

💡Angular

Angular es un framework de desarrollo web de código abierto que se utiliza para construir aplicaciones web de una sola página. En el video, la aplicación que se dockeriza es una aplicación Angular que incluye funcionalidades como la actualización de información de perfil, gestión de clientes y facturación.

💡Contenedores

Un contenedor en Docker es una unidad estándar que contiene todo lo necesario para que una aplicación funcione, incluyendo el código, las dependencias, las bibliotecas y otros archivos. En el contexto del video, los contenedores permiten que la aplicación Angular se ejecute de manera aislada y segura sin depender de la configuración del sistema anfitrión.

💡Nginx

Nginx es un servidor web de alto rendimiento广泛用于 web applications y servicios de contenido estático. En el video, se utiliza Nginx como un servidor web para servir los archivos estáticos de la aplicación Angular después de que se haya construido y empaquetado en un contenedor Docker.

💡npm

npm (Node Package Manager) es un administrador de paquetes para Node.js que permite a los desarrolladores instalar y gestionar las dependencias de sus proyectos. En el video, se utiliza npm para instalar las dependencias de la aplicación Angular y ejecutar la compilación de la aplicación con el comando 'npm run build'.

💡Dockerfile

Un Dockerfile es un script que contiene las instrucciones para construir una imagen de Docker. En el video, se crea un Dockerfile para definir el proceso de construcción de la imagen de Docker de la aplicación Angular, incluyendo la especificación de la versión de Node.js, la instalación de dependencias y la configuración del servidor Nginx.

💡Docker Compose

Docker Compose es una herramienta para definir y ejecutar aplicaciones de múltiples contenedores en Docker. En el video, se utiliza Docker Compose para crear un archivo de configuración que simplifica el lanzamiento y la gestión de la aplicación Angular en un entorno de contenedores Docker.

💡ngcc

El comando 'ngcc' es una herramienta incluida en Angular que se utiliza para compilar bibliotecas de Angular publicadas en un formato heredado, asegurando su compatibilidad con el tiempo de ejecución de Angular. En el video, se ejecuta 'npx ngcc' para procesar las dependencias y garantizar que la aplicación sea compatible con el formato de compilación de Angular.

💡Single Page Application (SPA)

Una Single Page Application (SPA) es un tipo de aplicación web que carga una única página y actualiza dinámicamente el contenido a medida que el usuario interactúa con la aplicación, en lugar de recargar la página completa. En el video, la aplicación Angular es un ejemplo de SPA, lo que requiere una configuración específica en el servidor Nginx para manejar correctamente la navegación en el cliente.

💡Environment Variables

Las variables de entorno son pares de valores de nombre que se utilizan para configurar la ejecución de una aplicación. En el video, se crean archivos de configuración de entorno para la aplicación Angular, permitiendo cambiar la configuración de la aplicación según el entorno de ejecución, como el entorno de producción o desarrollo.

💡Dockerignore

Un archivo .dockerignore es similar a un archivo .gitignore y se utiliza para especificar qué archivos o patrones de nombres de archivo se deben excluir del proceso de copia al crear una imagen de Docker. En el video, se menciona la creación de un archivo .dockerignore para evitar incluir archivos no necesarios, como el directorio node_modules, en la imagen de Docker de la aplicación.

Highlights

Junior muestra cómo decorar una aplicación Angular, la cual previamente construyeron y planean dockerizar.

La aplicación permite actualizar información de perfil, notificaciones y actividad de la cuenta.

Se puede cambiar la contraseña y la autorización, incluyendo el rol de usuario.

Se discute la importancia de las funciones de administración de permisos y la capacidad de eliminar permisos de clientes y usuarios.

Se abordan las funcionalidades de autenticación, incluyendo el registro de inicios de sesión y la autenticación de múltiples factores.

Se muestra cómo actualizar la foto de perfil y cómo afecta la barra de navegación.

Se explica cómo gestionar clientes y crear y actualizar información de facturación.

Se detalla el proceso de creación de un archivo Docker para la aplicación Angular.

Se discute la especificación de una versión de Node.js para evitar problemas de compatibilidad con versiones futuras.

Se menciona el uso de la imagen Alpine de Node.js para un contenedor más ligero.

Se define un directorio de trabajo y se copian los archivos package.json y package-lock.json.

Se instalarán las dependencias de Node.js y se ejecutará ngcc para compatibilidad con Angular Ivy.

Se describe el uso de un archivo .dockerignore para excluir archivos y carpetas grandes que no necesitan ser copiados en el contenedor.

Se ejecuta el comando ng build para crear archivos estáticos y se aborda el manejo de errores relacionados con el tamaño del paquete.

Se crean archivos de entorno para diferentes configuraciones de desarrollo y producción.

Se utiliza el archivo angular.json para configurar el reemplazo de archivos de entorno durante la compilación.

Se resalta la importancia de configurar correctamente las variables de entorno en los servicios de la aplicación.

Se crea un archivo docker-compose.yml para orquestar el contenedor de la aplicación y se explica su estructura.

Se aborda la solución de problemas comunes con aplicaciones de página única al refrescar la página o acceder a rutas específicas.

Se muestra cómo corregir la configuración de Nginx para servir correctamente las aplicaciones de Angular.

Se discute la implementación de configuraciones de Nginx dentro del propio archivo Docker para evitar la necesidad de modificarla manualmente.

Transcripts

what's going on guys this is Junior here

and today I'm going to show you how to

decorize an angular application this is

the application that we have built so

far and it's the one that we're gonna

use to dockerize and if you want to know

how we actually build this application

you can just check out the videos on the

channel then you will know how we

started working on this application and

how we built it from scratch literally

adding all the functionalities that you

see here so I'm in my profile right now

and I can update my information if I

click here I can just change anything

that I want here and then I can update

it you can see that I have a

notification and then the account

activity is popping up here and I can

also change my password give the current

password and pass in a new password I

can change my authorization so I can

change my role so if I change my role to

admin for example and then I click

update you will see that my rule will be

updated and also the permissions will

change and if you notice you see that I

don't have the delete permission for

customers and users back to rule

sysadmin which is the highest permission

and then I saved that information again

then you'll see that my permission will

be updated you can see that I have the

delete permission so I can delete

customer and I can delete user and I can

also update my account information so if

my account is locked and if it's active

and also authentication so if I want to

show the logs as you can see here I can

just click on this checkbox and it will

disappear or appear and I can also

enable multi-factor authentication so if

I enable multi-factor authentication

when I'm going to log in it's gonna send

me a text message with a code that I'll

need to put in but I'm going to go ahead

and disable that because I wanna I don't

want to have to go through this whenever

I'm logging in and I can also update my

profile picture so if I change this

picture here it will change here as well

as in the nav bar and also if I go back

to the home page I can manage all of

these customers so I can go to this

first customer for example then I can

update their information if I need to I

can add a new customer so I can do new

customer and then I can pass in the

customer information I can see all the

customers again and I can sort them and

I can also add a new invoice you know I

can select the customer and then pass in

the information the data Etc and I can

also see all of the invoices as of right

now I don't have any invoice so it's an

application that we build to manage

customers in their invoices and we can

also manage our account and that's what

I showed you in the beginning so we can

go here and then manage our account so

that's the application that we're gonna

be dockerizing so let's go ahead and

work on that right now so let's go back

to the code of the front end and the

first thing we need to do is to create a

Docker file so I'm going to right click

here or you can click on this icon right

here and then create a new file so here

we're going to create the docker file so

Docker file okay and for the docker file

it's actually going to be pretty simple

because we're just going to need a node

image and then copy everything inside of

a nginx web server so I'm going to see

from we want to get node if you want to

know what version of node that you want

to have here you can just Google it and

see what the latest version is or you

can just leave node like if you leave it

like this it will just get to the latest

version which is fine in a lot of cases

but the reason that you might not want

to do this is because if you keep this

file like this so the docker file if you

just skip it with just from node which

means every time it's going to get the

latest version of node then it might

break something in your application so

if there is a new version of node.js and

there is breaking changes then it's

going to break your application because

it's gonna get the latest version so

it's best to specify a version that you

know your application works with just

fine so that you don't have to worry

about a new version breaking your

application and if you just want to know

what you need to do here I can just go

back and then I can just say node.js

just Google it and then go to the

official node version and you can see

it's 18 17 1 which is the long term

support so we can just pass in this

number as the version of node that we

want to have in our application because

that's the version that I have in my

computer and I know that with this

version the application is working just

fine there's nothing and that is broken

okay so that's the that's usually what

you want to do you want to specify the

version that you know your application

works with just fine so that later

version of node doesn't introduce

breaking changes on your application so

now we can just say we know that our

application is going to run with version

18.17.1 and we can get an Alpine version

of that which is just going to be like a

smaller build for that particular image

and then we're gonna assign it as a

build okay so we're just defining a

reference to this entire thing so that

we can just copy the files that we need

so very similar to what we did in the

back and then I'm going to define a

working director so I'm going to see uh

word der and then I'm just gonna Define

this as app and the reason I like to

define a working directory is because if

I need to go inside of the running

container then I know exactly

um what folder I need to go to to see

the files that I'm going to copy inside

and then here we're just gonna say uh

after that we want to copy the

package.json file so I'm going to say

package that and then we're going to put

a well I have to put a star first

because we also need the lock file and

then that Json so it's going to copy

both the packet.json file in a package

Dash lock file so this other file here

this one right okay maybe I should just

leave this open in this situation and

then we're just gonna say that for slash

which means it's going to copy it inside

of this working directory because

everything we do now from this point

forward like everything we copy they

will go inside of the working directory

that we Define and then after that we're

gonna run npm install so that we can

install all of the uh node module

dependencies and then after that there's

a very important command that we need to

run and that's the npx ngcc and then

we're gonna say properties and I want

the

es2023 okay so you're going to see 2023

and browser module Main and then we want

to do first only and also dash dash

create dot IV

that entry that points okay and I have

to explain what this command is doing

but before I do that let me start from

the beginning so we're saying we need

the node version 1871 Alpine which is

just a smaller bundle of this version of

node and then we're going to give it an

alias which is going to be built the

reason we're going to give it an alias

is because we're gonna ditch this part

of the building of the image and then

just copy the result of this entire

process so we're gonna need this name to

reference this build and then copy the

file that we want and then put it in

another nginx image or container

whenever we run the container because

ultimately we don't want a node image as

the base of this image but we want an

nginx okay so maybe when it's done I'm

gonna go over it again then it's gonna

make more sense so we say get us this

version of node we're gonna give it an

alias of build we're gonna Define this

directory which is just a folder we're

gonna copy the package.json also the

package lock.json and to this app that's

what this dot forward slash means and

then after we have the packet.json files

and the package Dash lag file we're

gonna install the dependencies so we're

gonna run npm install and then after we

do that we're gonna run this command and

this is the command that I really need

to go over so that you understand what

it's doing now you don't really need to

do this but it's just the safest as of

right now so you're in a better position

when you pass in this command then when

you do not and so what exactly is this

comment doing so what this is doing is

fairly simple but it's just a very long

command so we're running so that's

coming from Docker so this run here so

all the ones in blue and capital letters

they're a keyword coming from Doc so

Docker is going to run this command and

the MPX is also coming from the node

package manager it actually stands for

the node package executor so what this

means is it's simply a package Runner so

everything that exists in the npm

registry we can just execute that using

the MPX and what we want to execute in

this case is the ngcc so so far so good

we're invoking this node package

executor which is going to allow us to

execute some command or execute some

package that is available in the npm

register and in this case that's the

ngcc so you can already see the NG here

which gives you a hint about something

being of the angular CLI and if I put a

space here you can see that just that's

just the engine command and then CC

which stands for the angular so the NG

here you can just see that's the angular

command or the CLI prefix and the CC is

the compatibility compiler for angular

so the ngcc which is the angular

compatibility compiler is a tool used to

compile libraries that have been

published in the Legacy format and you

use this when these libraries are not

compatible with the angular IV runtime

so that you can format them to uh to a

format that is compatible with the IV

that you can see that I'm mentioning

here now I don't want to get into all

these details of the IV and all that but

I really want you to understand what

this means and why we need to do this so

that's why this two parts are doing and

the properties flag which you can see

here because you have the dash dash so

that means this is a flag it's just

specifying in the format so all the

packages will be processed in this es23

which is just the ecmascript 2023 which

is just a version of JavaScript so we

want the 2023 and the browser module as

Main and the first only flag means that

ngcc is going to process the first

property that it finds in the

packet.json otherwise it will just

process everything all the format in

JavaScript so things like es2015 or esm

2015 like there's a default value that

it will use so that's why we're

overriding it with this dash dash first

only in this create IV entry point

that's just gonna tell the ngcc command

to create new properties for the IV

generated entry instead of overriding

the previous one so that's what this

flag is doing and all this coming is

doing as a whole is to make sure that it

takes non-iv libraries and generate

files that ivy can understand and this

is really just a browser thing so that

the Javascript file generated when we

run NG build to build this application

so that they can be compatible with most

browsers so that's why we're doing this

command here but don't worry too much

about it just understand that it's

somewhat important so far at the time of

recording this video which is in

September 2023 then you it's safer to do

this than not to do and then we want to

copy everything else so we're going to

say copy that and then dot so copy all

the rest of all the other files so all

of this is going to be copied inside of

the app folder and then lastly we're

gonna run npm oops not in npm run build

so you might be asking where is this

comment coming from so if I open the

packet.json you can see when we run the

npm Run build then it's going to run the

NG build which is going to build the

application it's going to create a

folder named secure Capital so whatever

the name of the application is going to

create that folder here and then it's

going to put all the build file inside

of this folder by this name and I'm

going to run this command uh in just a

moment so that you can see the result of

it so that is the first part of the

build that's what you call a multi-stage

build uh Docker file so after that what

we want to do we want to go and get an

image for nginx so we're going to say

nginx and then we want to get the stable

version of nginx and then we want to

copy from so we're going to copy from

what we defined up there so we're going

to say from the build because everything

we did up until this point we don't

really need it anymore we just need the

result of running this command so we're

gonna see we're gonna copy this time

we're copying from build so copying from

everything we just did here and we want

to copy from inside of the app folder we

want to copy everything that we have

inside of this name here and this is all

going to make sense in a second and we

want to copy this inside of the USR

share and then NG next

forward slash HTML so for the nginx web

server you want to serve your static

files inside of this folder so that's

nginx stuff so this is coming from nginx

and we're just copying all of the file

that resulted from this build that we

know that will be located inside of the

secret Capital app how do we know that's

going to be the folder because when you

run NG build it's going to look at the

name of the project and then put all the

files inside of this folder so we go

inside of the app that's what we're

working with from the build that's what

we Define from build and then copy

everything and then place them inside of

the nginx folder for serving static

resources in this case that's USR share

nginx HTML and then lastly we want to

expose Port 80. oops expose okay so you

know this is a web server serving HTTP

and that is done well it's not always

done over Port 80 but the default is

0.80 and that's just to serve the static

files that are going to be generated

from running npm run build so hopefully

this is coming together and we're gonna

continue in the next lecture so you guys

know that inside of the docker container

we're going to be copying everything as

you can see on line six here but we know

that we never want to copy this big huge

file that contains all of our

dependencies and the dependencies of

these dependencies because this file is

huge that's part of the reason we have

the packet.json file because we Define

all of our dependencies here so that we

can install them again with npm install

so what that means is that whenever

we're gonna copy everything over inside

of the container or to create the image

we know that we don't want to copy this

node modules folder so what we're going

to do is to Define another file called

that Docker oops

Docker ignore so this file is similar to

a git ignore file and here we're going

to Define everything we don't want to be

copied whenever we're running this copy

command so whenever we're going to copy

stuff from our local computer to the to

inside of the container then it's going

to look at this file and then it's going

to skip everything that we're defined

inside of this file so for example node

underscore modules will go into that

file because we never want to copy this

huge folder inside of our container

because whenever we run npm install then

it's gonna just reinstall them again

reaching out to the internet and then

recreate this folder so we never want to

copy this folder anywhere we only want

to run npm install and then that's going

to read our Json file or the packet.json

file and it's going to install all of

these dependencies so we're going to

pass this in there there's other things

that you can pass in there so things

like that git or the license or readme

file so everything that you really don't

want to copy over to The Container then

you would pass them inside of this file

so what I'm going to do is to just give

give you a standard DACA ignore file

that you can use for node.js so I'm

going to just select this and then paste

it in here and all this is doing is it's

just passing in the files and folders

that we never want to copy over inside

of the container so you can see

distribution node module that git folder

readme license Etc and you can put

whatever really you want inside of this

so for example if I didn't want to copy

this editor config file I could just

pass it in here so this is no big deal

so that's the docker ignore file really

very important because otherwise

whenever we're gonna try to build an

image from this background file copying

this huge file is going to make it slow

so you might think that there's

something wrong with your Docker file

but in reality it's just this file is so

big and we never want to do that so

that's what this is doing okay so you

can just keep this for all of your node

projects you just paste it in and then

you should be good to go whenever you're

creating a diagram so that's it for the

docker ignore file it's similar to a git

ignore file so this file that

here so everything that we don't want to

push to a git repository we're just

going to place it in here that's

literally the same idea but for Docker

as you can see okay so that's what we

have to do for the docker ignore file

the next thing that I want to show you

is what's going to happen when we run

this NG or npm run build command Okay I

want to show you what's going to happen

to the application whenever we run this

command so that you understand why we're

copying from this folder and then

placing everything inside of the nginx

folder so let's go ahead and work on

that next so I'm going to go ahead and

bring up the terminal and I'm gonna do

Ctrl C I'm also going to show you how

we're going to get rid of all of these

warnings because I know I've been seeing

this for a while now but before I'm

gonna clear the screen and you can

either do NG build that will do the same

thing and the reason this will work is

because we have the angular CLI

installed so if you go inside of the

packet.json and we go to our script so

if you do NG build then you will just do

this run this build or you can do npm

run build as the same thing so let's go

back to the terminal and we're gonna do

NG build or npm run build it's the same

thing so I'm gonna run this and we're

just gonna give it a second to finish

and it's over but it wasn't successful

okay so you can see here it tries to

generate the bundles and then at the

very bottom it says we didn't meet the

budget so the maximum budget and what

this error means is that we are watching

how Big the bundles are and there's a

default configuration in the angular

application that sets the size of the

bundle to a certain number and what that

means is that whenever we're gonna build

the project like we're doing here with

the NG build if the bundles are bigger

than what we Define in the configuration

then it's going to give us this message

so this is just a nice way that you can

keep watch on your angular application

bundle size okay so let's go ahead and

just change that real quick so if I go

back to the angular application I can go

inside of the angular.json file and if I

scroll down or there it is so you can

see here we have this budget it's an

array and you can Define the initial so

the initial is what fails because it's

1mb I think it was bigger than that yeah

so budgets 1 MB but was not met by

50.58 kilobytes so that means it was

more than one so what we can do I mean

this isn't really a big deal for me but

some people are really careful about how

big the bundle size are because that can

affect their performance but in my case

I don't really care about this too much

so I'm gonna make sure everything is

like at least two so I'm gonna change

everything here to 2 megabyte okay

because I don't really care too much

about this budget thing or if you want

you can just get rid of it all together

if your application is that big but it's

a good thing to use if you have a big

team and A lot of people are working on

the same application so that you make

sure that you control to some degree the

performance of your application by

looking at the bundle size because the

bundle size is important for the initial

load of the application whenever the

application is loading the bra is going

to download all these bundles so if

these bundles are too big then the app

is going to be slow because the browse

is going to need to take more time to

download these bundles and if the user

internet is not very good then it can

take a very long time and that's just

gonna make the user experience even

worse so that's what this is so now

let's go back and just run this command

again gonna bring back the terminal

gonna clear the screen and then run NG

building and just give it a second to

finish okay so it's over and this time

you can see that everything was

successful and if we go back now to the

application and let's close all these

files and go back here you can see now

we have this distribution so this

distribution folder was created and if

we open it we have a folder by the same

name of the application so you can see

secure capital and then it has all of

the static files that were generated so

these are the files that we're going to

copy if I open the docker file so we're

going to copy all of these files as you

can see here inside of the nginx HTML

folder and also we need to pass in

distribution here so the IST forward

slash okay because they're inside of

this distribution folder inside of this

secret Capital which is the name of the

application like this name that is

defined in the packet.json file this

name right here okay so these are the

same right here okay you can see we are

targeting these files we're copying them

over to the nginx server so what this

means is that whenever we complete all

of this we get node we create this

folder copy the package.json file

install of the dependencies run this

command for compatibility copy

everything else and then run the npm Run

build which is gonna do exactly NG build

and it's going to create these files for

us and then we're gonna say from this

first page so from all of this which

will result in this folder being created

with these files we're gonna copy

everything from the app that

distribution so the app is the working

directory because that's where

everything is copied and we want to go

to distribution secure capital which is

going to give us access to all these

files and then we're going to copy

everything over to the nginx HTML folder

which is where we serve static file in

the nginx server and then one last thing

we can do so you can see here we have

this NG build we can also pass in a

configuration for production so I can

copy this and then paste it here and

then pass in production so whenever we

run NG build you can add as many of

these scripts as you want but since I'm

going to be running NG build or npm run

build for this script then it's going to

run this command which in this case will

set the configuration to product and I'm

going to show you why we're sending this

to production actually this can be any

name that you want it doesn't have to be

production but I'm going to show you how

we're going to use this in an

environment because we can have

different environments whenever we're

building the application either for

deployment for production or deployment

for development whatever the case might

be and angular can switch different

environment files and then apply the

properties in these files whenever you

run the application in a specific

environment so that's what I'm going to

show you how to do next so what I'm

going to do is I'm gonna just collapse

this actually I can just delete this

folder altogether so let's just go here

and I'm going to do remove

recursive Force verbose so that I can

see everything and I'm gonna pass in

distribution so that's going to remove

this folder and everything inside it so

I'm going to press enter and you can see

it's removed clear the screen and if I

go back this folder is removed from here

so what I'm gonna do is I'm gonna go

inside of the source folder and then I'm

going to create another folder and then

I'm going to call it environment

so before by default whenever you use

the angular CLI to create an angular

application this folder would be created

by default like it would be here by

default with the angular CLI but for

some reason they don't do that anymore

but you can still use it as you can see

that I'm doing here I'm defining it

manually and then inside of here we can

have environment

dot TS and then we can have another file

which is going to be the

environment.prod so here we can see

environment

.prod.ts so we have two environment

files one for development you could name

this

environment.dev.ts it's really update so

but this used to be the default that

comes with the angular CLI whenever you

build an angular application with the NG

new commit that's no longer the case and

I have no idea why so inside of the

environment.ts file we can just Define a

simple uh object so we're going to say

export cost and then we're gonna say

environment

and then we're going to set it equal to

an object and then all we have to do is

to Define whatever we want but one thing

that's really important is the

production flag so we can see production

and we need to set this to false because

angular is going to need to read this to

determine what it needs to do with this

file so we're going to set this to false

and then we need to pass in the API

underscore base underscore URL

I'm gonna set this to whatever we have

inside of this service so inside of the

service remember in the customer service

we have this string here so we don't

need to pass this in like hard coded

like this so I'm gonna cut it and then

put it in here okay so this is going to

be the environment of my local computer

so this computer that's where the

backend application is running so you

can see here okay so that's running on

my local computer if I scroll up you'll

see there it is sorry application on

port 8080 and I know the IP address of

this computer is this IP address that

you can see here

19168.1.209 that's my local IP address

and another thing worth mentioning is

I'm using the local IP address because

this is going to be deployed in a darker

container and by default Docker is going

to define a bridge Network and the

bridge network has a switch that

connects to your local network so that

this application will be able to resolve

this IP address okay so don't put

localhost in here just get the IP

address on your local network and then

pass it in here instead if you put

localhost then it's gonna look at the

host container which is not gonna work

for you okay so make sure you put the IP

address in here so in the regular

environment file we just Define

production to be false and then pass in

everything else that we want in this

case we just have one other environment

variable which is the API based URL and

I'm defining it here so now all I can do

is just copy everything here and then go

to the prod paste and then just change

this to true so that's the prod in our

case the URL is going to be the same so

we're just going to keep the same URL so

now inside of the customer service we

need to pass in this environment

variable coming from this environment so

also notice they have the same name so

API based URL and also in the production

it's API b0 in our case it doesn't

really make sense because the URL is the

same but just imagine that inside of the

production environment so this file

right here this was pointing to the

production URL so it's angular that's

gonna do the switching for this files

and use the different environment

variables so now we're gonna go inside

of all of our service and then just read

that environment variable from the

environment file so instead of passing

an empty string I'm just going to call

the environment so we're going to see

the environment as you can see here and

then we're going to pass in the API b0l

okay it's the same name this is really

important and we're going to do the same

for the we don't have anything in the

service that's making HTTP call nothing

in the notification service either but

we do have something we can call in here

and we're just gonna change that as well

and make sure we import the environment

okay so we import the environment coming

from the environment so the one for the

dev or the non-prod but whenever we run

the NG build with the prod flag then

it's gonna do the switching for us so

now this is all good I'm gonna close

these files and there's one last

configuration we have to do before when

you create an angular application with

the angular CLI so using angular NG new

command it would do all of this for you

and they changed it in these newer

versions of angular so I'm not sure why

because I still use

um this setup the way it is maybe it's

because they want to start off with less

files and you just Define these if you

want them so this might be the reason

but in any case we need to go inside of

the angular.json file and tell angular

about the switching of these files

otherwise it's not going to do that so

you want to go inside of your

angular.json file and also by the way

this is a very important file for the

angular ecosystem or an angular

application this file right here the

English that Json file so instead of

that file we want to scroll down and

then go to configuration and in

configuration you can see we have the

production object here it only has the

budget so instead of here we can do

something called a file replacement so

we're going to do file replacement you

can see it coming up here and it's on

array so in here we're gonna say we want

to replace so we're going to say replace

we want to replace something in the

source forward slash environment

for a slash environment that TS I think

I need to rename these so inside of the

source this is supposed to be

environment so let's rename this to

environments okay so because it's

multiple environments so this is

supposed to be environments so Source

environment and then we want to switch

the environment.ts file to a new file

which in this case is going to be oops

the prod file so we just copy this and

then change it to prod.ts

and then we want to say with it's very

intuitive so we say for file replacement

which is a configuration we're giving to

this angular.json file look for this

file replace it with this file and we

want to do this when the configuration

is production okay so instead of the

production object this yellow open curly

braces here so when the configuration is

production configuration production

switch the environment file to the

product okay so that's all we have to do

here and I think we should be good to go

now everything should work just fine the

only thing we have left to do is to

create the docker compose file just to

make it easier to run containers using

this Docker image and this is going to

be just like a few lines of code so

let's go ahead and work on that right

now so I'm gonna go ahead again click in

this file explorer here and create a new

file this time it's going to be the

docker compose file so we're going to

say Docker compose that EML press enter

and then we're going to Define our

services so we're going to say services

and then we're gonna see a this is the

secure Capital so that's the name of the

service and then we need to pass in a

container underscore name uh we can say

secure copy the app container this is a

long name I should change this also to

app this is a weird name because we have

like two A's touching each other so you

can come up with a better name so we're

defining our services and the first one

is going to be the secure camera or the

only one because that's the only service

that we're gonna have in here the

container name whenever the container is

created it's going to be secure Capital

app container and then we're gonna

Define the build so we're gonna say

build

a DOT to denote the current directory

because that's where the docker file is

if the docker file was in a folder we

would say you know folder name

folder that blah blah blah okay in our

case it's in the same directory so we

just put a dot and then the image is

going to be uh secure

Capital app V1 like version one or

latest if you want and then we're gonna

Define some Port so we're gonna say

ports which is on array and then we're

gonna see we're gonna map 80 to Port 80.

so map 80 under container which we're

exposing here because that's what nginx

use we're also mapping it to Port 80 on

the host okay and we expose

so that's import

ant and also Define a network so

Networks

and this is going to be the same network

so internal net and then I need to

Define this network so we're going to

say Network or networks and then we're

gonna give it the same name so

copy paste we can give it a driver so

we're gonna say

driver

Bridge that's the default anyway but I

just like to specify it so all this is

gonna do when we run Docker compost up

it's going to look at this Docker file

build an image and then run the

containers expose the sports so that's

all we have to do for this Docker

compose file as you can see it's just

really just 16 or 15 lines of code and

that's all we have to do here so

everything is pretty much done the only

thing we have to do now is to run this

container and see everything in action

and that's what we're going to be

working on next so the last thing that I

want to show you is how to get rid of

all these errors that we've been seeing

in the application so let's close

everything here and I'm just gonna bring

back the terminal and then we're gonna

run the application and just so that we

can see them so I'm going to do NG serve

and then let this finish okay so it's

over and you can see we have all of

these warnings for external dependencies

and all we need to do is to pass them in

as we gonna allow them as common

JavaScript dependencies so we have to go

back to the application and open the

angular.json file and we already started

doing this we just didn't finish it so

let's cool up a little more so you can

see here we're passing in the jspdf so

the jspdf is a library that we brought

in to help us with the PDF generation so

what we want to do is to also pass in

the file saver that's another library

that we brought in let me see if I can

grab the package.json file and put it on

the side so if you scroll down in our

dependency we have this one which is an

external Javascript dependency so we are

allowing it as an external Java

JavaScript dependency also the file

saver so I'm passing in the file saver

but the thing with this is it also

sometimes complain for dependencies of

these dependencies so if jspdf or

fastsaver has a dependency on some other

library then sometimes it's going to

complain for it as well so all you have

to do is to just look inside of the

terminal and see what those dependencies

names are and then just pass them inside

of this array so let's go back and

scroll up so you can see they're still

here but I'm going to stop and rerun I'm

gonna fast forward the video so that you

don't have to wait for this and if I

scroll up so it's over we still have

some and if I scroll up you can see now

it's complaining for this gorgeous

module so you can see core core core all

of these are core and then there's a

raft and then there's a RGB color and

then there's this uh don't purify and

then this HTML canva so we just need to

pass all of these in so let's do Ctrl C

so I'm just going to copy them one by

one and then I'm just gonna put them in

so I'm gonna copy this gorgeous thing go

back go here get another entry in this

array which is core.js oops I don't need

this single quote and then we're gonna

do it for the next one which is Raf so

copy that go back pass in ref and then

we need to do it for RGB color copy that

and then

bust this in here and also for the uh

this dumb purify copy that I can close

this now and pass it in here

lastly we're gonna do it for the HTML to

Canvas to copy that and then we're gonna

paste it in here

just like that okay so now it shouldn't

complain anymore so let's just give it a

try here just to make sure we're good so

NG serve and then let it finish all

right and you can see now we don't have

These Warnings anymore so it's really

just look at the warnings just see what

the dependency is sometimes it's not the

dependency that you install but a

dependency of the dependency that you

install so just grab the name and then

put it in the allowed common JS

dependency as you can see and I know I

say I would do this I just keep

forgetting but that's how you solve this

okay so now everything looks clean and

they just make you feel good because I

was having a hard time dealing with this

errors all the time okay so the next

thing we're gonna do is to just run this

container using this Docker file in the

docker compose and then see everything

in action so that's why we're going to

be working on next so I log into my

Linux computer and I actually log inside

of another machine which is the same one

that I was using to deploy the back in

because that's why I have darker install

so if I do Docker it's going to give us

something because I have darker install

and if I clear the screen and I do you

name Dash a for example you can see that

I'm using a Linux computer so obviously

it's not this Mac that you're looking at

I'm just sshing inside of this computer

that you can see here okay so that's why

I have Docker install and I have also

added the application in there so we can

do secure copy that just so that we can

go inside of this application and if I

do an LS here you can see we have all of

our files so the docker file is here and

the dock compose file is also here so

now all we have to do is to run the

direct compose command and then launch

this Docker container so I'm gonna do

backer

Dash compose

that up Dash D and then we need to

pattern dash dash build because we have

a Docker file that we need to build so

the same command that we use in the back

end we're just going to use the same one

here so what this is going to do it's

just gonna create the darker image and

then run that image with the

configuration that we gave it instead of

the docker compose file so I'm going to

go ahead and press enter and we're just

gonna let this finish this can take a

minute because it needs to pull images

from the internet so let's just give

this a second to finish everything is

finished you can see we have the steps

that we've ran and the darker image was

created the container was started and

the network was also created so now I'm

going to go ahead and clear the screen

and just do Docker PS and we want to

grip for the

secure copy that so I can just say

secure and then press enter as you can

see here it says it's up 26 seconds ago

so it's up and running and another thing

I can do is I can do darker logs and

then look at the logs so in this case I

can pass in the ID of that container so

that ID that you see here or I can pass

in the name of the container which is

the secure Capital app container and

also I want to point out you can see the

image that was used is the secure

cabinet app version one which is the

image that we specify and the docker

compose file so the name of the email so

if you want to see the log we can do

secure Capital container you can see

these are the logs coming from inside of

that container here so if we go to the

browser and we and just access the IP

address of this computer we don't even

have to pass an 80 because that's the

default for HTTP then we should be able

to see our application so I'm going to

clear the screen again and then do

hostname Dash I so that we can see the

IP address of this computer so the first

two IP addresses and those are the one

that we're interested in everything else

that you here this is just IP addresses

coming from the the docker engine and

the reason I have two IP addresses

because I have this computer connected

to the Wi-Fi and also to the network

using a cable so I can just copy this

right here oops I didn't mean to do that

but I need to copy this and then I'm

going to open my browser then I'm gonna

bring it over here so we need to go to

192.168.1.164 or 216 should give us the

same thing so if I press enter here you

can see the application is running so

it's deployed using Docker and it's

asking me to log in now remember this is

using the backend that is connected to

my computer running on the same network

because I didn't pass in localhost so I

should be able to access this

application if I use the same credential

Outlook gmail.com and then one two three

four five six so if I press enter and

just give this a second and you can see

that I logged in successfully so now we

know that everything is working and the

application has been containerized so I

can go to my profile I can update the

information I can do everything that I

was doing before so everything should

work as expected you can see I can

update my MFA I'm gonna disable that I

can go to my profile and make an update

here

and then I can save everything should

work as expected I can also update the

customers so you guys can feel free to

change whatever you want

I'm gonna change this to Gmail update

I'm just doing random stuff at this

point because you know uh if I do rig

you can see that everything is working

go back to the home page so the

application has been fully containerized

and everything should be working as

expected you shouldn't have any problem

now there's one thing that I do want to

show you and I'm going to show it to you

right now so if you look here you can

see that I'm looking at the specific IP

address because I'm in the root or the

home page of the application so if I

refresh this you'll see that the

application just refresh like normal

however if I for example go to my

profile and I try to refresh the

application you can see now I get this

404 not found now this is a problem that

you probably gonna find in all of the

main Frameworks the JavaScript framework

so angular react.js and also a view

because the navigation is done in the

front end and not in the back end and

what happens when we try to refresh the

page and we go to forward slash profile

or forward slash anything for that

matter we get a 401 not found because

the nginx server could not find this

path on the server so what the browser

did the browser sent this request all

the way back to the server requesting a

file by that name which doesn't exist

because this is a single page

application we only have one index file

so it's angular with the browser that is

managing this navigation or in other

words just JavaScript that is managing

the navigation it's looking at this path

and then deciding what piece of UI to

show in the application which is why it

works uh like if I refresh the home page

which is going to serve the index file

by default and also if I click on a link

which is being managed by the angular

router so angular knows exactly what I'm

trying to do so it takes me there but

when I refresh the browser the browser

actually send this request all the way

back to the server so the nginx server

requesting a file by that name profile

which doesn't exist which is why when

refresh not found so there are many ways

that you can handle this but we're just

gonna do it the simple way which is to

always serve the index file no matter

what path that is serve here so this is

a problem that I had for a while and I

was using the Apache server before and I

fixed it on the Apache server and now

I'm using the nginx server and I also

fix it on the nginx server so you cannot

deploy your application this way so for

example if I look at this first customer

here and then I refresh the page and

then the page is broken so obviously you

cannot have your application this way so

that's what I'm gonna show you how to

fix in the next lectures and if you want

to go back to have the application

running so that you can see something

you just have to go back to the root so

this route right here and then refresh

it because in this case the browser is

going to request the index file

index.html which we do have on the nginx

server which is really the only file

that we have so if I refresh this you

can see now I work so I'm going to show

you how we can fix this problem it's

really just a simple fix but it's really

important because you can't have your

application breaking like this so that's

what I'm going to show you how to fix

next and this fix is going to work for

react.js and possibly for you I haven't

worked with View at all so I'm not

entirely sure but single page

application JavaScript Frameworks will

have this problem so this problem exists

and angular it also exists in react.js

and I'm going to show you how to fix it

using just the nginx server for the

Apache server it's a little bit

different because the configuration is

totally different but the solution is

similar you just want to always serve

that one index.html file because that's

the only file that we have in the nginx

server all the other files are

Javascript file and the browser cannot

serve these files the browser can read

these files but it cannot serve them and

then show them as the UI so that's what

we need to fix so I'm gonna go back to

the terminal and we're gonna go ahead

and take a look at this so what we need

to do we need to go inside of the

container so if I go up a little more

we're gonna grab this container so the

secure Capital container press enter so

you can see that we have this container

running right so that's the application

that we have running so now we need to

go inside of this container and we can

do that using the docker exec command

and then we pass in the interactive mode

and we pass in the name of the container

so the secure Capital container and then

we want to execute the bash shell so to

do this we just do bin Dash bash which

is the location of the shell and then

we're going to press enter you can see

now my prompt just changed because now

I'm inside of the container so I'm going

to clear this and if I loot LS you can

see that we have some files in here and

I'm also going to see if I can minimize

this okay just so that we can see this a

little better and then I need to go

inside of the four slash

Etsy and we want to go to the nginx and

if I list everything in here you can see

we have this conf.d so that first folder

here right here and that's what we need

to go into so I'm

cdconf.d and then LS so you can see in

here we have this default.configuration

so that's a configuration that nginx is

using and also if we go to the main

configuration so this nginx config right

here uh let's see if I have VM so nginx

okay I don't have them let's do update

so that we can well need to do apt

update because I need to install them so

otherwise we won't have any text editor

so I'm gonna do apt install them you can

install Nano if that's easier for you

but at this point you're inside of a

container so now you really will see why

you need to uh to some level be able to

use the terminal because I cannot use vs

code inside of the dagger container so

let's clear this in LS again so we need

to go into this

nginx configuration so this is the

configuration and you can see at the

very bottom if I scroll to the bottom

you can see here here they're including

everything that is inside of the conf.d

folder okay so everything that we put

inside of this folder will be included

in this file so what this means is that

we don't have to touch this file

directly I mean we can but we don't have

to so if I LS again so we don't have to

touch this file we just have to put

whatever configuration we want inside of

this folder so if I list everything

inside of this folder you can see it's

gonna look for everything that ends with

conf and then included inside of this

file which is what I just showed you so

if I do an L nginx if I don't know if I

oh I have NL so you can see here at the

very bottom on line 20 that's what it's

doing say include everything inside of

this itsy nginx conf.d everything that

ends with cough in that case this file

will be included inside of this

configuration so let's see what's inside

of this file so I'm gonna clear the

screen again and then oops I'm gonna go

up so LS we want to go inside

D and then LS and then Vim go to this

and I'm gonna go here well not here

I'm gonna go down here and then I'm

gonna say try underscore files and again

I'm going to put a dollar sign I'm gonna

say URI and I'm gonna say forward slash

index.html and then put a semicolon so

every time that it cannot find a file

it's going to go ahead and try this

index file so in this case that's always

going to return the index file whenever

it cannot find the file and then angular

will handle the route that is present in

the URL bar in the browser so that we

don't have this problem anymore so just

telling nginx to try the index file

whenever you cannot find the file that

is being requested by the browser so try

files dollar sign URI and then forward

slash index.html so now I can save and

quit and I'm gonna exit out of here and

then I'm gonna clear this and then we're

gonna restart the container so I can see

Docker restart and then we're gonna say

secret copy and then press enter and

then now we can do Docker PS and then

grab that secure copy that again

you can see now it's running so I'm

gonna bring back the browser and I'm

gonna move it over here and if I refresh

this everything should work as expected

but now if I for example go to my

profile and I refresh the page you can

see that it's not giving me this photo

or not okay so if I can keep refreshing

it you can see that it still works the

same and I can update my information

well let me just delete this part so

that you can see an actual update so I

can update that and it should work the

same I can go to the customers again I

can update them everything should work

as expect okay and well if I go to this

customer again and then refresh the page

and can I can keep refreshing it it's

not giving me this snap because it's

returning the same index file and then

angular is handling the route that is

present here okay so that's what we have

to do for this and the last thing that I

want to show you is you saw that to fix

this problem we have to go inside of the

container and update a specific

configuration file so that is definitely

a lot of work so what I'm gonna show you

is how you can just create that

configuration and you can just copy that

file over whenever you're going to build

the docker image and then run the

container so that you don't have to you

know separately go inside of the

container and then do that every time

obviously that wouldn't be a good idea

so that's what I'm going to show you how

to do so that we don't have to do this

manually I'm just going to show you how

we're going to take that config file and

then just copy it in that particular

location so that we don't have to deal

with this problem in the first place so

that's what I'm going to show you how to

do right now so I'm going to go back to

the terminal and what I'm going to do is

do condacker

Dash compose down so this is going to

destroy everything so it's going to stop

the containers and then remove these

containers now I'm also going to remove

the image so I'm going to say Docker

image RM and then I'm gonna say secure

copy that version one and then remove it

I think you can do Docker RMI for remove

image that should work as well I'm gonna

say Docker image rune so that we can

remove any dangling image and then I'm

gonna say Docker Network

prune gonna do the same thing so clean

any dangling image and networks that we

weren't using and then clean this so at

this point this application should be

broken so if I go back and refresh the

page you can see it's broken and we

clean everything so back in the terminal

I just need to go inside of the darker

file so I'm going to say vim and then

Docker file

and then I'm gonna scroll down so

whenever we get the nginx image I want

to go ahead and then copy the

configuration file so to do this I'm

going to say copy and I'm going to copy

a file name default dot conf okay and we

need to copy this file in that same

location so we're gonna say Etc forward

slash nginx for slash conf.d okay so

we're just gonna copy this file inside

of this folder now we don't have this

file yet but I'm just going to show you

what that file will look so I'm going to

save that so we're technically doing

everything else but the only difference

is after we get the nginx table image so

that's happening on line eight as you

can see I'm highlighting here then when

I copy this configuration file that we

don't have yet but we're gonna create it

which is I'm gonna call default.conf and

we're going to copy it over to that

particular location because we know

that's where it belongs so I'm going to

save this and then I'm gonna quit and

then I'm gonna create this file so I'm

gonna say vim and I'm gonna say

default.conf so this is the file you can

see at the bottom that we just created

this file and then I'm just gonna go

ahead and paste it just to see what it

looks like so this is what the file

looks like it's literally the same

configuration I just really copied it

from inside of the container and then I

just paste it here and then I just add

this line on line 9. so just say try

files that'll sign URI and then the

index.html so that way we know that

whenever we're gonna run this nginx

container it's going to copy this

configuration file and it's going to

make that one change on line 9 so that

we don't have to do it ourselves as you

can see that I'm highlighting because

it's going to override the existing file

that is going to come with the container

image itself so we're just overriding

that one line as you can see here

everything else is the same okay and I

don't think we need that part here at

the bottom because we don't have any 500

HTML file that we return but I just left

them here it doesn't really matter but

if you want you can clean this up as

well this is what's really important

that location and all the way to the

closing curly bracket here and we just

added this line nine okay so hopefully

that makes sense and also if you want

you can remove this

index.htm so I can just really remember

of that because we only have the

index.html we don't have any HDM file

okay so always serve the index.html and

if you can find anything just return the

index.html again so that angular can

handle the routing and the front end so

I'm going to save that and quit and if I

LS everything you can see now we have

the configuration file so

thedefault.conf and if I NL the docker

file so Docker file you can see we're

copying this file so the default.conf

this file right here and its location

which is the Etsy nginx and then the

config so all we have to do now is to

just run this command again and

everything should work as expected but

this time when we refresh the

application on a particular route it's

not going to give us this forward so I'm

gonna go up and then run this command

again okay so this is the command and

then I'm just going to run it and then

we're going to let it finish all right

so let's just give it a second

all right everything is completed I'm

going to include this one more time I'm

gonna do docker

BS and then we're gonna grab

here press enter you can see it's up and

running so now let's bring the browser

just gonna move it over here and I'm

just gonna make it full screen and then

reload you can see we're back in and if

I go to my profile for example and then

I reload you can see it's still working

as expected because we pass in the

configuration in so we didn't have to do

it manually and that's typically what

you want to do but I wanted to show you

the solution because it's really

important that you understand how all

these things work so let's go back to

the terminal and let's just go inside of

the container again so that we can

confirm so if I go up some more where we

go inside of that container so right

here and we want to go to Etsy

see we want to go to nginx

LS so you can see the cough so that

folder right here that's why we need to

go so path D clear that one more time

now s so this is the file that we

overwritten so I can do NL I don't know

if I have that installed but let's see

okay so you can see this is our file

because we overrode this file when we

copy it to that particular location in

the docker file okay so this location

right here that we have in the docker

file which is where we are okay so we

have this in there now so we don't have

to worry about going in there and doing

manual and if you want to know how to do

the same thing in Apache I can probably

give you the file because before I was

using nginx I was using Apache for this

I just recently started using nginx so

if you want the configuration the same

configuration for Apache just let me

know I can just send you the

configuration that you need to add and

I'll tell you uh where you need to put

it okay so that's all we have to do here

and if you have any questions let me

know I think that's everything that I

wanted to cover when it comes to the

deploying the front-end application and

if I go back again you can see

everything is working as expected that

can save my information I can change my

authorization I can save update

everything should work as expected I'm

gonna make me a super admin again okay

so admin and update my profile I can go

to the customers I can create a new

invoice if I want it I can edit an

invoice here and then select the

customer I can go to the invoice I don't

have an invoice but you guys feel free

to test that but everything should work

and then I can also access the customers

I can update their information blah blah

blah so everything is working as

expected so if you just want to test

this you can create an ec2 instance on

AWS or Microsoft Azure just get some

server in the cloud that you can use and

then you can install Docker on it and

then you can deploy your application I

already showed you guys how to pass

sensitive information to the docker

compose in the docker file when we were

deploying the backend so you can use the

same logic and then pass insensitive

information but you don't save them in

any of the config file but that's all I

want to to show you obviously that

doesn't really have anything to do with

the application that we built in this

course but it's also important that you

know how to work with Docker because

Docker is like super popular and it

solves a lot of problems that that

developers used to have so it's a very

important piece of technology that you

should know in this day and age when it

comes to software development so I hope

this was useful to you and if you have

any questions just ask me in the Discord

and I should be able to help and I'll

see you guys in the next one