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 😊

Porqué no centralizarlo?

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

3, 2, 1 🚀 To production with just one command!

By Diego Juliao

3, 2, 1 🚀 To production with just one command!

  • 613