From 4d10366c8c53bcc53602d9c367a3aa4fba1eda49 Mon Sep 17 00:00:00 2001
From: bloombar <2209098+bloombar@users.noreply.github.com>
Date: Wed, 28 Feb 2024 20:55:19 -0500
Subject: [PATCH] docker compose

---
 README.md          | 20 +++++++++++++++++---
 docker-compose.yml | 29 +++++++++++++++++++++++++++++
 env.example        |  2 +-
 3 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 docker-compose.yml

diff --git a/README.md b/README.md
index a03cf9e..5902025 100644
--- a/README.md
+++ b/README.md
@@ -6,16 +6,30 @@ An example of a full-stack web application, built in Python with `flask` and `py
 
 ## Quick test drive
 
-The fastest way to see the example app in action on your own computer is to use [Docker](https://www.docker.com). _Note that you will not be able to edit the app code when running it this way... instructions below show you how to set up the app in a way that allows you to edit the code and see the changes._
+The fastest way to see the example app in action on your own computer is to use [Docker](https://www.docker.com). 
 
+First you must...
 - install and run [docker desktop](https://www.docker.com/get-started)
 - create a [dockerhub](https://hub.docker.com/signup) account
 
-Start up a MongoDB database:
+## Option 1
+Use Docker Compose to boot up both the `mongodb` database and the `flask-app` web app with one command:
+- `docker compose up --force-recreate --build` ... add -d to run in detached/background mode.
+- and then `docker compose down` in a separate terminal window to stop the containers when done.
 
+If you see an error message that a particular port is already in use, select a different port for either the `flask-app` or `mongodb` service, as necessary.  To do so, edit the first port number for that service in the `docker-compose.yml` file and try again. E.g., change the `flask-app`'s port to `10000:5000` if you want the flask app to run on port `10000` on your computer.  If changing the `flask-app` port in this way, you must also update the `FLASK_PORT` setting in the `docker-compose.yml` file to match.
+
+View the app in your browser:
+
+- open a web browser and go to `http://localhost:5000` (or change `5000` to whatever port number you used for the `flask-app`.)
+
+## Option 2
+Alternatively, it is possible to boot up the `flask-app` separately from `mongodb`.   _Note that you will not be able to edit the app code when running it this way... instructions further below show you how to set up the app in a way that allows you to edit the code and see the changes._
+
+Start up a MongoDB database first:
 - run command, `docker run --name mongodb_dockerhub -p 27017:27017 -e MONGO_INITDB_ROOT_USERNAME=admin -e MONGO_INITDB_ROOT_PASSWORD=secret -d mongo:latest`
 
-Start up the app:
+Start up the `flask-app`:
 
 - run command, `docker run -ti --rm -d -p 5000:5000 -e MONGO_DBNAME=flask-mongodb-web-app-example -e MONGO_URI="mongodb://admin:secret@host.docker.internal:27017" bloombar/flask-mongodb-web-app-example`
 - if you see an error about the port number being already in use, change the first `5000` in the command to a different port number, e.g. `-p 10000:5000` to use your computer's port `10000`.
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..9eeda6b
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,29 @@
+version: "3"
+services:
+  flask-app:
+    build: .
+    ports:
+      - 5000:5000
+    environment:
+      - MONGO_DBNAME=flask-mongodb-web-app-example
+      - MONGO_URI=mongodb://admin:secret@mongodb:27017
+      - FLASK_APP=app.py
+      - FLASK_ENV=development
+      - FLASK_PORT=5000
+    env_file:
+      - .env
+    depends_on:
+      - mongodb
+
+  mongodb:
+    environment:
+      - MONGO_INITDB_ROOT_USERNAME=admin
+      - MONGO_INITDB_ROOT_PASSWORD=secret
+    image: mongo
+    ports:
+      - 27017:27017
+    volumes:
+      - mongodb-data:/data/db
+
+volumes:
+  mongodb-data:
\ No newline at end of file
diff --git a/env.example b/env.example
index 550fb9c..20a7129 100644
--- a/env.example
+++ b/env.example
@@ -1,5 +1,5 @@
 MONGO_DBNAME=your_db_name
-MONGO_URI="mongodb://your_db_username:your_db_password@your_db_host_server_name:27017"
+MONGO_URI=mongodb://your_db_username:your_db_password@your_db_host_server_name:27017
 FLASK_APP=app.py
 FLASK_ENV=development
 FLASK_PORT=5000