Despliegue de Aplicaciones Angular en Netlify paso a paso
Resumen
Es momento de desplegar tu aplicación en un entorno productivo para tener acceso al mismo desde cualquier parte del mundo. Es importante, como desarrollador o desarrolladora de software, que conozcas herramientas que te permitan desplegar aplicaciones rápidamente y mostrar tu trabajo al mundo.
Veamos como hacerlo con Netlify.
Desplegar una aplicación con Netlify
Netlify es un importante proveedor de hosting cloud que puedes utilizar de forma gratuita para jugar y hacer pruebas desplegando aplicaciones fácilmente.
1. Creación de cuenta
Si aún no la tienes, crea una cuenta en Netlify. Te recomiendo hacerlo utilizando tu cuenta de GitHub (o GitLab/Bitbucket) para tener acceso rápido al repositorio de tu proyecto.
2. Creación de archivo de configuración
Crea en la raíz de tu proyecto un archivo llamado netlify.toml con el siguiente contenido:
[build] publish = "dist/angular-modules" command = "npm run build"[[redirects]] from = "/*" to = "/index.html" status = 200
Dicho archivo posee la configuración básica para enlazar el repositorio de tu proyecto con Netlify. Asegúrate de configurar correctamente la ruta en publish con el build de tu aplicación dentro de la carpeta dist.
3. Crear nuevo proyecto en Netlify
Un vez tengas preparado tu proyecto, ve a Netlify, selecciona crear nuevo proyecto y a continuación selecciona tu proveedor de repositorios.
4. Sincronizando con el repositorio
Busca dentro de tu cuenta el repositorio que quieres desplegar.
5. Desplegando tu aplicación
Selecciona finalmente la rama de tu repositorio que Netlify utilizará y has clic en "Deploy site".
Luego de algunos minutos, tu aplicación quedará desplegada en una URL pública de prueba que Netlify provee.
Haciendo clic en "Open published deploy", podrás ver tu app corriendo en un entorno de producción.
Para que te sirve un sistema de CI/CD
Un sistema de CI/CD hace referencia a Integración Continua y Entrega Continua, por sus siglas en español. Un concepto muy importante que tienes que al menos conocer del mundo DevOps.
En pocas palabras, es una técnica para automatizar los despliegues cada vez que se hace commit en X rama. En este caso, el sistema de CI/CD está conectado con la rama "Master". Cada vez que hagas un push de un commit a dicha rama, Netlify actualizará tu proyecto sin que tengas que hacer nada.
Muy buen curso,me agrado mucho. Un like si te parecio igual.
Excelente curso. Ya había hecho una aplicación en Angular. Pero esto de los Lazy Loading component es otro nivel. Puedo decir que tuve que desaprender y volver a aprender Angular. Muchas gracias Profe
Compañeros, les recomiendo hacer el deployment por firebase!! Es muchisimo mejor y no necesitas netlify.toml
Gracias por haber comentado esta recomendación! Lo hice así y me siento genial por que fue algo nuevo que aprendí! 😁
Cuando netlify hace el build de forma automatica, puede que les dé algún error, entonces debemos de agregar un archivo en la raíz de nuestro proyecto llamado .npmrc (npm run command) para indicar como se debe de armar el comando npm run build, ahí dentro ponemos las banderas que queramos, por ejemplo force: true y luego hacemos commit y push a la llama main/master, y listo.
Muchas gracias, anduve un buen rato y gracias a esto encontré una solución.
Si quieren saber donde se hace el build de su aplicacion en angular sin tener que hacer un ng buid
Vayan al archivo angular.json y busquen projects > [mi proyecto] > architect > build > options ahi encontran la configuracion de outputPath esa es.
tengo el siguiente erro al desplegar el cambio del archivo toml
Cuando trabajo con documentos, siempre trato de optimizar el flujo de trabajo tanto como sea posible. En el pasado, siempre firmaba documentos a mano, y tardaba demasiado en hacerlo. En este momento estoy usando una firma electrónica que creé aquí usando el sitio en línea https://www.zoomtecnologico.com/2022/09/16/crear-firma-digital/ . Recomiendo prestar atención a esto.
no te entiendo para que una firma
Si estas como yo hiciste el curso 2 a;os despues te va a salir un error con la instalacion de netlify debido por los packages que estan sin actualizaciones...
Para hacer resolver eso puedes hacer esto:
Excelente curso, muy buenas las clases. Por favor, un curso completo de rxjs para complementar.
El tema es de una pizzeria la Api la hice con el curso de nestJs
link
Enlace a netlify aqui
[build] publish ="dist/my-store-router" command ="ng build"[[redirects]]from="/*" to ="/index.html" status =200
Si les sale el siguiente error al correr el ng build.
An unhandled exception occurred:Transform failed with1error:error:Invalid version:"15.2-15.3"
Lo solucione de la siguiente manera:
Debes ir hasta el archivo
" .browserslistrc "
Dentro de este archivo esta la compatibilidad para los navegadores. Comenta o borra la linea que dice
"last 2 Safari major versions"
Guarda el archivo modificado, y al ejecutar de nuevo el comando compilará sin problemas.
Buneas tardes a alguien le a pasado este error
Potential solutions:-IfUserService is a provider, is it part of the current UserModule?-IfUserService is exported from a separate @Module, is that module imported within UserModule? @Module({imports:[/* the Module containing UserService */]})
Buen dia.
al crear la cuenta en netlify, pide escanear mi documento de identidad, para valga la redundancia verificar mi identidad. Al tratar de verificar esto en internet, tras ver varios tutoriales en ninguno mencionan esta verificacion. Es una nueva politica ?, puedo subir mi documento con tranquilidad ?. Gracias por su atencion.
No es recomendable enviar tu documento de identidad por medios digitales, ya que puede ser utilizado para robo de identidad. Es importante tener precaución y no compartir información sensible de forma indiscriminada.
Cuando se esta configurando Netlify se le podria dar la opcion de
--base-href
Solo he usado una ves esa configuracion y tengo la duda de si funcionaria
6:24:02PM:2.Deploy site
6:24:02PM: ────────────────────────────────────────────────────────────────
6:24:02PM:
6:24:02PM:Section completed: deploying
6:24:02PM:
6:24:02PM:Configuration error
6:24:02PM: ────────────────────────────────────────────────────────────────
6:24:02PM:
6:24:02PM:Error message
6:24:02PM:Deploy did not succeed:Deploy directory 'dist/angular-modules' does not exist
6:24:02PM:
6:24:02PM:Resolved config
6:24:02PM: build:6:24:02PM: command: npm run build
6:24:03PM:Failed during stage 'building site':Build script returned non-zero exit code:2(https://ntl.fyi/exit-code-2)6:24:02PM: commandOrigin: config
6:24:02PM: publish:/opt/build/repo/dist/angular-modules
6:24:02PM: publishOrigin: config
6:24:02PM: redirects:6:24:03PM:-from:/*
status: 200
to: /index.html
redirectsOrigin: config
Caching artifacts
Pueden ayudarme por favor con lo siguiente.
Tengo una aplicación conformada así:
Una base de datos MySql alojada en un servidor local a la cual accedo con la IP de la máquina y las respectivas credenciales de la base de datos.
Tengo un BackEnd desarrollado en node.js que se conecta a una base de datos mencionada en el punto anterior
El FrontEnd desarrollado en Angular que se comunica con el BackEnd perfectamente.
¿Cuál sería la mejor forma de hacer el Deploy en un servidor de aplicaciones local?
