Jacksonville Users Group Presentation on how to integrate Angular2 and Spring Boot Microservices. It also shows you how to containerize an Angular2 app as a Node.js application and Spring Boot. The code can be found in http://github.com/erwindev.

1. JAX JUGAUGUST 9, 2017
ANGULAR2+SPRING BOOT+DOCKER SWARM

2. ANGULAR2+SPRING BOOT+DOCKER SWARM
ABOUT ME
▸ Founded ScholarshipExperts.com (now unigo.com)
▸ Sr. Director of Engineering @ Schoolzilla
▸ Enterprise Solutions Architect @ Availity
▸ Connect with me
▸ LinkedIn
▸ GitHub http://github.com/erwindev
▸ Email: ealberto@icloud.com

3. ANGULAR2+SPRING BOOT+DOCKER SWARM
AGENDA
▸ Architecture Overview
▸ Build something in Angular2 using angular-cli
▸ Connect an Angular2 SPA to an API built in Spring Boot
▸ Use Docker to containerize the SPA and API Server
▸ Deploy the Docker containers in Docker Swarm

4. ANGULAR2+SPRING BOOT+DOCKER SWARM
ARCHITECTURE
▸ Architecture Components
▸ Single Page App built in JavaScript (Angular2)
▸ Spring Boot Microservices
▸ Database in PostgreSQL

5. ANGULAR2+SPRING BOOT+DOCKER SWARM
ARCHITECTURE
▸ Benefits
▸ Better User Experience
▸ Ease of Deployment
▸ Easier to Debug

6. ANGULAR2+SPRING BOOT+DOCKER SWARM
ARCHITECTURE
▸ Benefits
▸ Easy to Scale
▸ Distributed Load

7. ANGULAR2+SPRING BOOT+DOCKER SWARM
LET'S BUILD A SIMPLE ANGULAR2 APP
▸ We need…
▸ Node.js ($ brew install node)
▸ angular-cli ($ npm install -g @angular-cli)
▸ Let’s create an Angular2 app
▸ $ ng new test-angular-ui
▸ $ cd test-angular-ui
▸ $ ng serve --host=0.0.0.0 --port=4201

8. LET’S SEE SOME
CODE

9. ANGULAR2+SPRING BOOT+DOCKER SWARM
RECAP
▸ Setup a really simple Angular2 application
▸ Spun up College Tracker UI SPA
▸ Launched College Tracker API
▸ Integrated College Tracker UI SPA with the API
▸ How Session is handled in the application

10. LET’S
CONTAINERIZE

11. ANGULAR2+SPRING BOOT+DOCKER SWARM
DOCKER
▸ Tool to make it easy to develop, deploy and run
applications
▸ Containers
▸ Guarantee that your application is going to run the same
whichever environment it is running
▸ Eliminates “works on my machine” issue

12. ANGULAR2+SPRING BOOT+DOCKER SWARM
DOCKER
▸ We need…
▸ Docker Toolbox
▸ VirtualBox
▸ Dockerfile in your applications

13. LET’S RUN IT IN A
CLUSTER

14. ANGULAR2+SPRING BOOT+DOCKER SWARM
DOCKER SWARM
▸ Container orchestration
▸ Service Discovery
▸ Health checks
▸ Auto-[scaling/restart/healing] of containers
▸ Load Balancing
▸ Zero-downtime deploys

15. QUESTIONS?