diff --git a/.env.example b/.env.example index 26cb140..4336419 100644 --- a/.env.example +++ b/.env.example @@ -9,7 +9,8 @@ NEXTAUTH_SECRET=your-secret-key-here-please-change-in-production AUTH_SECRET=your-secret-key-here-please-change-in-production # Web Push Notifications (VAPID) -# Generate keys with: npm run vapid:generate +# Generate keys with: npx web-push generate-vapid-keys +# Or in Docker: docker run --rm -it node:20-slim sh -c "npm install -g web-push && web-push generate-vapid-keys" VAPID_PUBLIC_KEY=your-vapid-public-key-here VAPID_PRIVATE_KEY=your-vapid-private-key-here VAPID_SUBJECT=mailto:your-email@example.com diff --git a/DOCKER_PUSH_NOTIFICATIONS_SETUP.md b/DOCKER_PUSH_NOTIFICATIONS_SETUP.md new file mode 100644 index 0000000..4707d8b --- /dev/null +++ b/DOCKER_PUSH_NOTIFICATIONS_SETUP.md @@ -0,0 +1,115 @@ +# Push Notifications Setup for Docker + +## Quick Setup (3 Steps) + +### Step 1: Generate VAPID Keys + +Run this **on your host machine** (not in Docker): + +```bash +npx web-push generate-vapid-keys +``` + +Or if you prefer, you can run it in a temporary container: + +```bash +docker run --rm -it node:20-slim sh -c "npm install -g web-push && web-push generate-vapid-keys" +``` + +This will output: +``` +======================================= +Public Key: +BNxxx... + +Private Key: +xxx... +======================================= +``` + +### Step 2: Add Keys to .env File + +Add these three lines to your `.env` file: + +```env +VAPID_PUBLIC_KEY=BNxxx... +VAPID_PRIVATE_KEY=xxx... +VAPID_SUBJECT=mailto:your-email@example.com +``` + +⚠️ **Important**: +- Replace `BNxxx...` with your actual public key +- Replace `xxx...` with your actual private key +- Replace `your-email@example.com` with your actual email +- Keep the VAPID_PRIVATE_KEY secret! + +### Step 3: Update Database Schema + +Run this to add the PushSubscription table: + +```bash +docker-compose exec app npx prisma db push +``` + +Or if your containers aren't running yet: + +```bash +docker-compose up -d +docker-compose exec app npx prisma db push +``` + +### Step 4: Rebuild and Restart + +```bash +docker-compose down +docker-compose up --build +``` + +## That's It! + +Your app now has push notifications enabled! When users open the app: +- After 3 seconds, they'll see a notification prompt +- They can enable notifications with one click +- Notifications will be sent automatically for list events + +## Verify It's Working + +1. Open your app at `http://localhost:3500` +2. Log in +3. Wait 3 seconds for the notification prompt +4. Click "Enable Notifications" +5. Open another browser/incognito window +6. Log in as a different user +7. Add an item to a shared list +8. See the notification in the first browser! + +## Troubleshooting + +### "Push notifications not configured" error +- Make sure VAPID keys are in `.env` +- Make sure you rebuilt the containers: `docker-compose up --build` +- Check logs: `docker-compose logs app` + +### Database table missing +- Run: `docker-compose exec app npx prisma db push` +- Check if it succeeded: `docker-compose exec app npx prisma studio` + +### Environment variables not loading +- Make sure `.env` is in the same directory as `docker-compose.yml` +- Restart containers: `docker-compose restart` +- Check if variables are loaded: `docker-compose exec app env | grep VAPID` + +## Docker-Specific Notes + +- The `web-push` package is automatically installed during `docker-compose up --build` +- VAPID keys are loaded from your `.env` file into the container +- The database schema update must be run inside the container +- All notification functionality works the same in Docker as locally + +## Production Deployment + +For production: +1. Generate production VAPID keys (different from dev) +2. Add them to your production environment variables +3. Run `npx prisma db push` in production container +4. Ensure your production URL uses HTTPS (required for push notifications) diff --git a/PUSH_NOTIFICATIONS_DOCKER_CHECKLIST.md b/PUSH_NOTIFICATIONS_DOCKER_CHECKLIST.md new file mode 100644 index 0000000..a323c50 --- /dev/null +++ b/PUSH_NOTIFICATIONS_DOCKER_CHECKLIST.md @@ -0,0 +1,81 @@ +# Push Notifications Docker Setup Checklist + +## ✅ What's Already Done + +- [x] Code implementation complete +- [x] Docker configuration updated +- [x] Environment variables added to docker-compose.yml +- [x] Dependencies added to package.json (will install on build) + +## 🔧 What You Need to Do + +### [ ] 1. Generate VAPID Keys + +Run this command: +```bash +npx web-push generate-vapid-keys +``` + +Or if you don't have Node locally: +```bash +docker run --rm -it node:20-slim sh -c "npm install -g web-push && web-push generate-vapid-keys" +``` + +### [ ] 2. Add Keys to .env + +Copy the output and add to your `.env` file: +```env +VAPID_PUBLIC_KEY=BNxxx... +VAPID_PRIVATE_KEY=xxx... +VAPID_SUBJECT=mailto:your-email@example.com +``` + +### [ ] 3. Update Database + +Start containers and run migration: +```bash +docker-compose up -d +docker-compose exec app npx prisma db push +``` + +### [ ] 4. Rebuild Containers + +```bash +docker-compose down +docker-compose up --build +``` + +## ✅ Verify It Works + +1. Open http://localhost:3500 +2. Log in +3. Wait 3 seconds +4. See notification prompt appear +5. Click "Enable Notifications" +6. Test by adding items from another browser + +## 🎉 Done! + +Once you complete these 4 steps, push notifications will work automatically! + +## Quick Reference + +**Check if VAPID keys are loaded:** +```bash +docker-compose exec app env | grep VAPID +``` + +**Check database tables:** +```bash +docker-compose exec app npx prisma studio +``` + +**View logs:** +```bash +docker-compose logs -f app +``` + +**Restart after .env changes:** +```bash +docker-compose restart +``` diff --git a/docker-compose.yml b/docker-compose.yml index 40cca7f..d18204d 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -13,6 +13,10 @@ services: - NEXTAUTH_SECRET=${NEXTAUTH_SECRET} - AUTH_SECRET=${AUTH_SECRET} - AUTH_TRUST_HOST=true + # Push Notifications (VAPID) + - VAPID_PUBLIC_KEY=${VAPID_PUBLIC_KEY} + - VAPID_PRIVATE_KEY=${VAPID_PRIVATE_KEY} + - VAPID_SUBJECT=${VAPID_SUBJECT} restart: unless-stopped depends_on: - db-check