3, 2, 1 🚀
To production with just one command!
Mi 1er Paquete Angular 😊
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6959621/pasted-from-clipboard.png)
Mi 1er Paquete Angular 😊
![](https://media4.giphy.com/media/xxCNsOokj8Rxp8EtUL/giphy.gif)
Problemas
- Not being DRY
- Copy and Paste
- Multiple Places to fix
Mi 1er Paquete Angular 😊
![Porqué no centralizarlo?](https://media3.giphy.com/media/mGjv5hUEOlCPm/giphy.gif)
Porque no centralizarlo?
Beneficios
- Fácil de reutilizar
- Más rápida implementación
- Corregir una vez
Mi 1er Paquete Angular 😊
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6959634/demo.gif)
Mi 1er Paquete Angular 😊
¿Cómo publicar a NPM?
![](https://media2.giphy.com/media/fUqfaPVjiAQcfticZH/giphy.gif)
Mi 1er Paquete Angular 😊
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6959641/pasted-from-clipboard.png)
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
![](https://media2.giphy.com/media/3DnDRfZe2ubQc/giphy.gif)
- Community Manager
- Diseñador
- Front End
- Back End
- Product Owner
- Devops
Deployar un Emprendimiento
![](https://media2.giphy.com/media/Adqe9XUP3x9LO/giphy.gif)
¿Quién es DevOps?
Deployar un Emprendimiento
I know enough DevOps to be Dangerous
![](https://media0.giphy.com/media/26wkwJpBJzmLPc2oU/giphy.gif)
Deployar un Emprendimiento
![](https://media2.giphy.com/media/yob2BpR9R3ccg/giphy.gif)
Pude hacerlo!,
Peeero
No quedé satisfecho 😞
Deployar un Emprendimiento
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963289/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963290/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963293/pasted-from-clipboard.png)
Deployar un Emprendimiento
![](https://media2.giphy.com/media/YeLsS65XBEk7e/giphy.gif)
- 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:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6964287/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6964291/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6964300/pasted-from-clipboard.png)
DevOps
Conclusión
Los Deployments requieren:
Angular Compilation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6959581/pasted-from-clipboard.png)
Conocer la API de la plataforma
Conclusión
Los Deployments requieren conocimientos en:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6964507/pasted-from-clipboard.png)
Conclusión
Los Deployments requieren conocimientos en:
Diseñar una solución al contexto Angular
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6964533/pasted-from-clipboard.png)
Codificar un script para ejecutar esa solución
Conclusión
Los Deployments requieren conocimientos en:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6964969/pasted-from-clipboard.png)
Ng Deploy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963374/pasted-from-clipboard.png)
A wild message appeared
Ng Deploy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963385/pasted-from-clipboard.png)
ng deploy, permite publicar una aplicación Angular a las plataformas más populares como Firebase, Azure, Netlifly o GithubPages
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963392/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6966818/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6966782/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/10242092/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6965123/pasted-from-clipboard.png)
Angular Fire
Santosh Yadav
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/10242093/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/10242094/pasted-from-clipboard.png)
Johannes Hoppe
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6966839/pasted-from-clipboard.png)
Diego Juliao
Vercel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/10242097/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/10242100/pasted-from-clipboard.png)
Jeffrey Bosch
Who am I?
Diego Julião
twitter: @dianjuar
Senior Software Engineer
OSS Contributor
Creator of ngx-deploy-npm
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6740889/pasted-from-clipboard.png)
Telegram: @dianjuar
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6740893/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/10242103/pasted-from-clipboard.png)
ngx-deploy-npm
![](https://media1.giphy.com/media/1rf4hhXCoTQNa/giphy.gif)
Story
ngx-deploy-npm
Story
![](https://media2.giphy.com/media/3o72F8t9TDi2xVnxOE/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6965250/pasted-from-clipboard.png)
angular-schule/angular-cli-ghpages
Build your own deployer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6965710/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963501/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963499/pasted-from-clipboard.png)
ngx-deploy-npm
Story
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963512/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963514/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963518/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963519/pasted-from-clipboard.png)
ngx-deploy-npm
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963535/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6963543/pasted-from-clipboard.png)
Story
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6966802/pasted-from-clipboard.png)
Demo TIME!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6969380/pasted-from-clipboard.png)
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
![](https://media4.giphy.com/media/2WGDUTmsB4DzFuvZ2t/giphy.gif)
Waiting ⏳
Who am I?
Diego Julião
twitter: @dianjuar
Senior Software Engineer
OSS Contributor
Creator of ngx-deploy-npm
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6740889/pasted-from-clipboard.png)
Telegram: @dianjuar
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/6740893/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1139611/images/10242103/pasted-from-clipboard.png)
3, 2, 1 🚀 To production with just one command!
By Diego Juliao
3, 2, 1 🚀 To production with just one command!
- 672