# Frontend Steps
cd frontend
# Step 1: Clean up existing dependencies
rm -rf node_modules package-lock.json
# Step 2: Update API URL for local development
# Open package.json and replace `api:5000` with `localhost:5000`.
# Step 3: Install dependencies
npm install
# Step 4: Run the frontend application
npm start
# Verify the frontend is working by accessing it in the browser.
# Backend Steps
# Step 1: Install Python and pip if not already installed.
# Ensure Python 3 is available (check using `python3 --version`).
# Step 2: Run the backend application
python3 app.py
# If the app fails to run, find the correct versions for the required packages.
# Step 3: Update requirements.txt
pip freeze > requirements.txt
# Modify requirements.txt as follows:
# Flask==2.2.2
# Flask-Cors==5.0.0
# flask-mongoengine==1.0.0
# Flask-PyMongo==2.2.0
# pymongo==3.10.1
# bcrypt==4.2.1
# gunicorn==20.0.4
# Jinja2==3.1.4
# Werkzeug==2.2.3
# Step 4: Pull and run MongoDB in Docker
docker pull mongo:latest
docker run -d \
--name flask-mongo \
-e MONGO_INITDB_ROOT_USERNAME=zh \
-e MONGO_INITDB_ROOT_PASSWORD=test \
-e MONGO_INITDB_DATABASE=flaskdb \
-v /data/db:/data/db \
-v /dev/null:/dev/null \
-p 27017:27017 \
mongo:latest
# Step 5: Access MongoDB container and configure
docker exec -it flask-mongo bash
mongo -u zh -p test --authenticationDatabase admin
# Use the flaskdb database and create a user
use flaskdb
db.createUser({
user: 'ziyati',
pwd: 'test',
roles: [{role: 'readWrite', db: 'flaskdb'}]
})
# Insert sample data
db.tasks.insertOne({"title": "course"})
db.tasks.insertOne({"title": "training"})
db.tasks.insertOne({"title": "pause"})
# Step 6: Configure environment variables
export MONGODB_USERNAME=ziyati
export MONGODB_PASSWORD=test
export MONGODB_HOSTNAME=localhost
export MONGODB_DATABASE=flaskdb
# Step 7: Update app.py to use environment variables
# Replace the Mongo URI configuration with the following:
# app.config["MONGO_URI"] = 'mongodb://' + os.environ['MONGODB_USERNAME'] + ':' + \
# os.environ['MONGODB_PASSWORD'] + '@' + os.environ['MONGODB_HOSTNAME'] + \
# ':27017/' + os.environ['MONGODB_DATABASE']
# Step 8: Run the backend application again
python3 app.py
# For Docker Compose
# If using Docker Compose, set `"proxy": "http://api:5000"` in the frontend
`package.json`.
