Orchestrate a Full-Stack App via Docker Compose with Source Code
Previously we could only run our Node/Typescript Angular app locally. As discussed in a previous video in this series, running code locally can be finicky and it's best to containerize our application via Docker so that we can run everything in a self-contained environment.
In this video, we dockerize our Angular application and use docker compose to orchestrate our Java Spring Boot 3 back-end docker service and our front-end Angular service so that we can start them together with a single command.
Our docker-compose.yaml file is configured to 'watch' our local front-end code and refresh the Docker image when it detects a change. This ensures we maintain the productivity gains with Angular's hot reloading during development.
----------------------------------------------------------------
Steps to run the web app locally:
1. Clone the full-stack-auth-repo: $ git clone https://github.com/pjl-software/full-... and change directories into full-stack-auth-repo with $ cd full-stack-auth-repo
2. Checkout the 06-run-app-on-docker with $ git checkout 06-run-app-on-docker
3. Start the entire application on docker using the bin bash bash script $ ./bin/docker-startup-scripts/run-app-with-docker
4. Navigate to https://localhost:4200
----------------------------------------------------------------
Chapters
0:00 - Demo running the Angular app locally
1:45 - Demo running the Angular app via Docker
3:00 - Designing a repo for developer ease of use
3:50 - Angular dockerfile and docker-compose code
6:02 - Docker compose watch configuration
9:00 - Full stack app docker-compose file