The new Beta Voxxed and VoxxedDays websites are data driven by the existing Devoxx and Voxxed Days CFP websites. During this talk, he will demo and explain how the new websites were designed & developed using technologies like JHipster, Angular 5, PrimeNG and CI/CD using GitLab. As a side effect, the CFP admin orchestration web app has been created which allows event organizers to configure and start a CFP instance on the fly using Docker.

1. The new DeVoxxEd websites
with JHipster, Angular &
Kubernetes
by Stephan Janssen
stephan007#Voxxed

2. • Founder of Devoxx
• Co-founder of Voxxed (Days)
• Co-founder Devoxx4Kids
• Java Champion
• Passionate Developer
• @Stephan007
Who am I ?

3. Agenda
• Objective
• Development
• Design
• Deployment
• Next steps
#Voxxed stephan007

4. Objective
Devoxxians
Website
import
talks &
ratings
Call For Papers
App
#Voxxed
Backend
Call For Papers
App
Call For Papers
App
Call For Papers
App
Call For Papers
App
Call For Papers
App
stephan007

5. Development

6. @stephan007#Voxxed

7. #Voxxed stephan007

8. #Voxxed stephan007

11. $ jhipster import-jdl voxxed.jh
@stephan007#Voxxed

12. @stephan007#Voxxed

13. #Voxxed stephan007

14. stephan007#Voxxed

15. #Voxxed stephan007

16. stephan007#Voxxed

18. #Voxxed stephan007

20. #Voxxed stephan007

21. Deployment

23. JHipster & Docker
#Voxxed stephan007

24. #Voxxed stephan007

25. #Voxxed stephan007

26. .gitlab-ci.yml

27. .gitlab-ci.yml
#Voxxed stephan007

28. Continuous Integration
#Voxxed stephan007

29. Devoxxians
import
talks &
ratings
Call For Papers
App
#Voxxed
Backend
Monolith Call For Papers
App
Call For Papers
App
Call For Papers
App
Call For Papers
App
Call For Papers
App
stephan007

31. devoxx.comLet’s do more…
Backend
Admin
import
Call For Papers
App
#Voxxed
voxxed.com
voxxedDays.com
search
Call For Papers
App
Call For Papers
App
Call For Papers
App
Call For Papers
App
stephan007

32. Design

33. #Voxxed stephan007

34. @stephan007#Voxxed

36. devoxx.comLet’s do more…
Backend
Admin
Deploy!
Call For Papers
App
#Voxxed
voxxed.com
voxxedDays.com
search
Call For Papers
App
Call For Papers
App
Call For Papers
App
Call For Papers
App
stephan007

37. Backend
MacroService
Admin
Gateway
CFP
MacroService
#Voxxed
Devoxx
Gateway
Voxxed
Gateway
Spinner
App
YouTube
MicroService
VoxxedDays
Gateway
stephan007

38. Backend
Admin
Gateway
CFP
MacroService
#Voxxed
Devoxx
Gateway
Voxxed
Gateway
Spinner
App
YouTube
Serverless
VoxxedDays
Gateway
ms ms
ms ms
stephan007

39. JHipster Microservices
#Voxxed
Client Side
Load Balancer
Service Registry
Dynamic Routing,
Monitoring, Security, …
stephan007

40. #Voxxed stephan007

41. Regenerate
JHipster projects
#Voxxed stephan007

42. Deployment
v2

43. devoxx.com
Backend
Admin
Start/Stop
Docker Images
with
“dynamic”
DNS
Call For Papers
App
#Voxxed
voxxed.com
voxxedDays.com
search
Call For Papers
App
Call For Papers
App
Call For Papers
App
Call For Papers
App

44. @stephan007#Voxxed

45. Docker CFPDocker CFP
Browser
Træfik SSO
voxxed.com
Spinner Backend
80:443
MySQL DB
voxxeddays.com
JHipster
Registry
MySQL DB
admin
Elastic Docker CFP
Redis
#Voxxed
AWS S3
Image
Service
RedisRedis
stephan007

46. #Voxxed stephan007

47. #Voxxed stephan007

49. #Voxxed stephan007

50. [consulCatalog]
endpoint = "consul:8500"
exposedByDefault = true
prefix = "traefik"
frontEndRule = "PathPrefixStrip: /{{.ServiceName}}"
Traefik.toml
Couple days later…
#Voxxed stephan007

51. ./backend
/voxxed
/voxxeddays
/consul
https://beta.voxxed.com
https://beta.voxxeddays.com
https://api.voxxed.com
https://consul.voxxed.com
#Voxxed stephan007

52. #Voxxed stephan007

53. #Voxxed stephan007

54. docker-compose.yml
#Voxxed stephan007

55. traefik.toml
#Voxxed

56. traefik.toml
#Voxxed

57. traefik.toml
#Voxxed

58. Træfik Dashboard
#Voxxed stephan007

60. Browser
Træfik SSO
voxxed.com
Spinner Backend
80:443
MySQL DB
voxxeddays.
comJHipster
Registry
MySQL DB
admin
Elastic Docker CFP
Redis
#Voxxed
S3
Image
Service
stephan007

61. Rolling Updates?
High availability?
#Voxxed stephan007

62. Kubernetes
#Voxxed stephan007

63. Docker CFP
Elastic
SSO
Spinner MySQL DB
Redis
Traefik
BrowserBackend
AWS
Docker CFPDocker CFP
RedisRedisRedis
Docker CFP
Browser
Ingress/NGINX
Backend
MySQL DB
VoxxedDaysDeVoxxEd Admin
Google Cloud
stephan007

64. Google Cloud

65. Install
#Voxxed stephan007

66. @stephan007#Voxxed
$ jhipster kubernetes
resources:
requests:
memory: "500Mi"
cpu: "500m"

67. Create Cluster
$ gcloud container clusters get-credentials voxxed —zone europe-west1-b --project voxxed-family
#Voxxed stephan007

68. cert-manager
#Voxxed stephan007

69. #Voxxed stephan007

70. Browser
Ingress/NGINX
Backend
MySQL DB
voxxeddaysDeVoxxEd admin
Google Cloud
cm-manager
cloudsql-proxy
ingress.yml
service.yml
deployment.yml
certificate.yml
Docker CFP
Elastic
SSO
Spinner MySQL DB
Redis
Traefik
BrowserBackend
AWS
Docker CFPDocker CFP
RedisRedisRedis
Docker CFP

71. Browser
Ingress/NGINX
Backend
MySQL DB
voxxeddaysvoxxed admin
Google Cloud
cm-manager
cloudsql-proxy
ingress.yml
service.yml
deployment.yml
certificate.yml
Docker CFP
Elastic
SSO
Script MySQL DB
Redis
Spinner
BrowserBackend
AWS
Docker CFPDocker CFP
RedisRedisRedis
Docker CFP

72. Next Steps?
• Remove the JHipster Gateway backends
• Refactor “Docker” Spinner to use Fabric Kubernetes Client API
• Optimize CI/CD process
• GitLab Kubernetes config eventually use Jenkins X
• Evaluate Istio Service Mesh (v1.0 this summer)
• Introduce Angular Redux framework (@NGRX)
• Use Angular Service Workers (PWA)
@stephan007#Voxxed

73. Resources
• K8S deployment steps @ https://github.com/stephanj/alfio-k8s
• Beta sites @
• https://beta.voxxeddays.com
• https://beta.devoxx.com
• https://beta.voxxed.com
@stephan007#Voxxed