3, 2, 1 🚀
To production with just one command!
Mi 1er Paquete Angular 😊
Mi 1er Paquete Angular 😊
Problemas
- Not being DRY
- Copy and Paste
- Multiple Places to fix
Mi 1er Paquete Angular 😊
Porque no centralizarlo?
Beneficios
- Fácil de reutilizar
- Más rápida implementación
- Corregir una vez
Mi 1er Paquete Angular 😊
Mi 1er Paquete Angular 😊
¿Cómo publicar a NPM?
Mi 1er Paquete Angular 😊
Mi 1er Paquete Angular 😊
-
Crear un Angular Library
-
Crear una versión del paquete
-
Compilar el paquete
-
Subir el bundle a NPM
¿Qué fue necesario?
Deployar un Emprendimiento
- Community Manager
- Diseñador
- Front End
- Back End
- Product Owner
- Devops
Deployar un Emprendimiento
¿Quién es DevOps?
Deployar un Emprendimiento
I know enough DevOps to be Dangerous
Deployar un Emprendimiento
Pude hacerlo!,
Peeero
No quedé satisfecho 😞
Deployar un Emprendimiento
Deployar un Emprendimiento
- Qué se requiere
- Cómo encajar esas soluciones
- Buenas prácticas
- Conocer su API
- Diseñar una solución
- Script
No es común entre FrontEnd Devs
Conclusión
DevOps es un Skill
🙋♂️
-
Hay que practicarlo
-
Mejorarlo
-
Refinarlo
-
Actualizarlo
-
Se mejora entre más se práctica
y como todo skill:
¿Quién Tiene Conocimientos DevOps?
Conclusión
-
Docker
-
Variables de entorno
-
Scripting
-
Algo de Linux
-
Networking (redes, telecomunicaciones)
Los Deployments requieren:
DevOps
Conclusión
Los Deployments requieren:
Angular Compilation
Conocer la API de la plataforma
Conclusión
Los Deployments requieren conocimientos en:
Conclusión
Los Deployments requieren conocimientos en:
Diseñar una solución al contexto Angular
Codificar un script para ejecutar esa solución
Conclusión
Los Deployments requieren conocimientos en:
Ng Deploy
A wild message appeared
Ng Deploy
ng deploy, permite publicar una aplicación Angular a las plataformas más populares como Firebase, Azure, Netlifly o GithubPages
Ng Deploy
¿Cómo Funciona?
# 1) Escoger la plataforma (ej: github)
# 2) Ejecutar ng add angular-cli-gh-pages
# 3) Ejecutar ng deploy
ng add angular-cli-gh-pages
ng deploy
# L I S T O! 🎉Ng Deploy
-
Conocer sobre la compilación de Angular
-
Conocer a fondo API de la plataforma
-
Diseñar una solución al contexto Angular y
-
Codificar un script para ejecutar esa solución
-
No hay que mantener el script para deployar
-
Fácil implementación en otros proyectos
-
Nos podemos enfocar en lo que nos ofrece la plataforma
-
Su implementación es mantenida por la comunidad
¿Qué nos ahorramos?
Plataformas actuales
Angular Fire
Santosh Yadav
Johannes Hoppe
Diego Juliao
Vercel
Jeffrey Bosch
Who am I?
Diego Julião
twitter: @dianjuar
Senior Software Engineer
OSS Contributor
Creator of ngx-deploy-npm
Telegram: @dianjuar
ngx-deploy-npm
Story
ngx-deploy-npm
Story
angular-schule/angular-cli-ghpages
Build your own deployer
ngx-deploy-npm
Story
ngx-deploy-npm
Story
Demo TIME!
Demo TIME!
# Añadir el Deployer
npx ng add angular-cli-ghpages
# Add on angular.json, on "deploy" property
# "baseHref": "https://dianjuar.github.io/3-2-1-to-production-with-just-one-command-talk/"
# Deploy 🚀
npx ng deploy
Waiting ⏳
Who am I?
Diego Julião
twitter: @dianjuar
Senior Software Engineer
OSS Contributor
Creator of ngx-deploy-npm
Telegram: @dianjuar