Hello Python Web App

A beginner-friendly Flask starter app that works in desktop and phone browsers.

1) Run locally

cd hello-python-webapp
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python app.py

Open on computer:

• http://127.0.0.1:5001

Open on phone (same Wi-Fi):

1. Find your Mac IP:

ipconfig getifaddr en0

2. Open http://YOUR_IP:5001 on your phone.

2) Deploy on Render (free tier)

A) Create a GitHub repo and push your code

In this folder:

git init
git add .
git commit -m "Initial Flask web app with PWA support"
git branch -M main
git remote add origin YOUR_GITHUB_REPO_URL
git push -u origin main

B) Create web service on Render

1. Go to https://render.com and sign in with GitHub.
2. Click New + -> Blueprint.
3. Select your repository (hello-python-webapp).
4. Render reads render.yaml and creates the service automatically.
5. Wait for deploy to finish, then open your Render URL.

3) Install on phone like an app (PWA)

After deployment, open your Render URL on phone:

• iPhone (Safari):
  1. Tap the Share button
  2. Tap Add to Home Screen
• Android (Chrome):
  1. Open browser menu
  2. Tap Install app or Add to Home screen

4) What was added

• render.yaml - Render deployment configuration
• requirements.txt - includes gunicorn for production server
• static/manifest.webmanifest - PWA app metadata
• static/sw.js - service worker (basic offline caching)
• static/main.js - registers service worker
• static/icons/icon.svg - app icon
• db.py - Uses SQLite locally (hello_app.db, gitignored) and PostgreSQL on Render when DATABASE_URL is set
• render.yaml - Provisions a free Render PostgreSQL database and injects DATABASE_URL into the web service
• /login + /admin - Simple admin login (password) and admin page to delete/clear greetings

Local vs production: With no DATABASE_URL, the app uses SQLite. On Render, DATABASE_URL points at Postgres so greetings persist across deploys and restarts.

Admin login setup (Render)

Your Blueprint now defines:

• SECRET_KEY: auto-generated (required for sessions)
• ADMIN_PASSWORD: you set this in Render (required to log in)

After you push these changes, go to Render → your web service → Environment and set ADMIN_PASSWORD to something strong, then redeploy.

First-time PostgreSQL on Render (Blueprint)

1. Commit and push the updated render.yaml and requirements.txt.
2. In the Render dashboard, open your Blueprint and click Manual sync / Apply (wording varies) so Render creates the hello-db database and wires DATABASE_URL.
3. Wait for the web service to redeploy.

If you already had a web service without a database, the sync may add Postgres and set the env var automatically. If anything fails, open your web service → Environment → confirm DATABASE_URL exists (from the linked Postgres instance).

Optional: use Postgres on your Mac

Set DATABASE_URL to your database URL before python app.py (e.g. from Render’s External Database URL in the database dashboard, or a local Docker Postgres). The app will use Postgres whenever DATABASE_URL is set.

Project structure

• app.py - Flask app routes and logic
• db.py - SQLite (local) or PostgreSQL (DATABASE_URL) setup and queries
• templates/index.html - UI template
• static/style.css - app styling