The soon-to-be-released-brand-new 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 organisers to configure and start a CFP instance on the fly using Docker.

1. The new Voxxed websites
with JHipster, Angular
and GitLab
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
@stephan007#Voxxed

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

5. Development

6. @stephan007#Voxxed

7. @stephan007#Voxxed

8. @stephan007#Voxxed

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

12. @stephan007#Voxxed

13. @stephan007#Voxxed

14. @stephan007#Voxxed

15. @stephan007#Voxxed

16. Query by Example
@stephan007#Voxxed

17. @stephan007#Voxxed

19. @stephan007#Voxxed

21. @stephan007#Voxxed

23. Deployment

25. JHipster & Docker
@stephan007#Voxxed

26. @stephan007#Voxxed

27. @stephan007#Voxxed

28. .gitlab-ci.yml

29. .gitlab-ci.yml

30. .gitlab-ci.yml

31. .gitlab-ci.yml

32. .gitlab-ci.yml

33. .gitlab-ci.yml
@stephan007#Voxxed

34. .gitlab-ci.yml
@stephan007#Voxxed

35. Continuous Integration
@stephan007#Voxxed

36. @stephan007#Voxxed

38. Let’s do more…
Backend
Admin
import
Call For Papers
App
@stephan007#Voxxed
voxxed.com voxxedDays.com
search
Call For Papers
App
Call For Papers
App
Call For Papers
App
Call For Papers
App

39. and more
Backend
Admin
deploy
Call For Papers
App
@stephan007#Voxxed
voxxed.com voxxedDays.com
search
Call For Papers
App
Call For Papers
App
Call For Papers
App
Call For Papers
App

40. Design

41. @stephan007#Voxxed

42. @stephan007#Voxxed

43. @stephan007#Voxxed

44. Backend
Admin
deploy
Call For Papers
App
@stephan007#Voxxed
voxxed.com voxxedDays.com
search
Call For Papers
App
Call For Papers
App
Call For Papers
App
Call For Papers
App

45. MacroService
Gateway
MacroService
@stephan007#Voxxed
Gateway Gateway
MicroService

46. MacroService
Gateway
MacroService
@stephan007#Voxxed
Gateway Gateway
Serverless

47. Gateway
MacroService
@stephan007#Voxxed
Gateway Gateway
Serverless
ms ms
ms ms
ms ms
msmsms

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

49. @stephan007#Voxxed

50. Deployment
v2

51. @stephan007#Voxxed

52. @stephan007#Voxxed

53. @stephan007#Voxxed

55. @stephan007#Voxxed

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

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

58. @stephan007#Voxxed

59. @stephan007#Voxxed

60. docker-compose.yml
@stephan007#Voxxed

61. traefik.toml
#Voxxed

62. traefik.toml
#Voxxed

63. traefik.toml
#Voxxed

64. Træfik Dashboard
@stephan007#Voxxed

66. Browser
Træfik SSO
Gateway
Microservice 1 Microservice 2
80:443
MySQL DB
Gateway
JHipster
Registry
MySQL DB
Gateway
Ribbon
Zuul Proxy
Ribbon
Zuul Proxy
Ribbon
Zuul Proxy
Eureka Server
Config Server
@stephan007#Voxxed
Client Side
Load Balancer
Dynamic Routing,
Monitoring, Security, …

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

68. Rolling Updates?
Scaling?
…

69. VS
Next Steps?
@stephan007#Voxxed

70. Next Step
@stephan007#Voxxed
v0.6