feat: add Docker support for push notifications
- Update docker-compose.yml to include VAPID environment variables - Create DOCKER_PUSH_NOTIFICATIONS_SETUP.md with Docker-specific instructions - Create PUSH_NOTIFICATIONS_DOCKER_CHECKLIST.md for easy setup tracking - Update .env.example with Docker command for generating VAPID keys Setup for Docker: 1. Generate VAPID keys (npx web-push generate-vapid-keys) 2. Add keys to .env file 3. Run: docker-compose exec app npx prisma db push 4. Rebuild: docker-compose up --build The web-push package is automatically installed during docker build. All notification functionality works the same in Docker as locally.
This commit is contained in:
@@ -9,7 +9,8 @@ NEXTAUTH_SECRET=your-secret-key-here-please-change-in-production
|
|||||||
AUTH_SECRET=your-secret-key-here-please-change-in-production
|
AUTH_SECRET=your-secret-key-here-please-change-in-production
|
||||||
|
|
||||||
# Web Push Notifications (VAPID)
|
# 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_PUBLIC_KEY=your-vapid-public-key-here
|
||||||
VAPID_PRIVATE_KEY=your-vapid-private-key-here
|
VAPID_PRIVATE_KEY=your-vapid-private-key-here
|
||||||
VAPID_SUBJECT=mailto:your-email@example.com
|
VAPID_SUBJECT=mailto:your-email@example.com
|
||||||
|
|||||||
115
DOCKER_PUSH_NOTIFICATIONS_SETUP.md
Normal file
115
DOCKER_PUSH_NOTIFICATIONS_SETUP.md
Normal file
@@ -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)
|
||||||
81
PUSH_NOTIFICATIONS_DOCKER_CHECKLIST.md
Normal file
81
PUSH_NOTIFICATIONS_DOCKER_CHECKLIST.md
Normal file
@@ -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
|
||||||
|
```
|
||||||
@@ -13,6 +13,10 @@ services:
|
|||||||
- NEXTAUTH_SECRET=${NEXTAUTH_SECRET}
|
- NEXTAUTH_SECRET=${NEXTAUTH_SECRET}
|
||||||
- AUTH_SECRET=${AUTH_SECRET}
|
- AUTH_SECRET=${AUTH_SECRET}
|
||||||
- AUTH_TRUST_HOST=true
|
- 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
|
restart: unless-stopped
|
||||||
depends_on:
|
depends_on:
|
||||||
- db-check
|
- db-check
|
||||||
|
|||||||
Reference in New Issue
Block a user