This commit represents a complete migration from Bootstrap to Tailwind CSS with modern, professional UI design: ## Major Changes: - **Tailwind CSS Integration**: Added django-tailwind package with Node.js 18.x support - **UI Redesign**: Complete template migration to modern black/white theme - **Responsive Design**: Mobile-first approach with improved navigation - **Database Enhancement**: Added DATABASE_URL support for external services (Neon, Supabase, Railway, etc.) - **Documentation**: Updated README.md and DEPLOYMENT.md with Tailwind and database guidance ## Technical Improvements: - Hot-reloading during development with django-browser-reload - Production-optimized CSS builds with purging and minification - Professional card layouts and components - Sticky footer implementation - Mobile-responsive navigation with hamburger menu - Modern alert/message styling ## Files Modified: - All HTML templates converted to Tailwind utility classes - Added theme app with Tailwind configuration - Updated Docker configuration for Node.js support - Enhanced settings for third-party database services - Comprehensive documentation updates 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
10 KiB
Deployment Guide
This guide covers how to deploy the Django Template application using various platforms including Dokploy.
🚀 Dokploy Deployment
Dokploy is a modern deployment platform that makes it easy to deploy applications with Docker.
Prerequisites
- A Dokploy account and server
- A GitHub repository with your code
- Domain name (optional but recommended)
Quick Deploy
-
Fork this repository to your GitHub account
-
Connect to Dokploy:
- Log in to your Dokploy dashboard
- Click "New Application"
- Connect your GitHub repository
-
Configure Environment Variables:
SECRET_KEY=your-very-long-random-secret-key DEBUG=False ALLOWED_HOSTS=your-domain.com,www.your-domain.com # Database (Dokploy will provide these) DB_NAME=django_db DB_USER=django_user DB_PASSWORD=secure_password DB_HOST=postgres DB_PORT=5432 # Email Configuration EMAIL_BACKEND=django.core.mail.backends.smtp.EmailBackend EMAIL_HOST=smtp.gmail.com EMAIL_PORT=587 EMAIL_USE_TLS=True EMAIL_HOST_USER=your-email@gmail.com EMAIL_HOST_PASSWORD=your-app-password DEFAULT_FROM_EMAIL=noreply@your-domain.com # Social Authentication GOOGLE_OAUTH2_CLIENT_ID=your-google-client-id GOOGLE_OAUTH2_CLIENT_SECRET=your-google-client-secret FACEBOOK_APP_ID=your-facebook-app-id FACEBOOK_APP_SECRET=your-facebook-app-secret # Security SECURE_SSL_REDIRECT=True -
Configure Database:
- Add a PostgreSQL database service
- Use PostgreSQL 15
- Database name:
django_db - Username:
django_user
-
Deploy:
- Click "Deploy"
- Dokploy will build and deploy your application automatically
Post-Deployment Steps
-
Run initial setup:
# Access your application console in Dokploy python manage.py migrate python manage.py create_groups python manage.py createsuperuser # Build Tailwind CSS for production python manage.py tailwind build python manage.py collectstatic --noinput -
Configure Domain:
- Add your domain in Dokploy dashboard
- Configure SSL certificate (Let's Encrypt recommended)
-
Set up Social Authentication:
- Configure Google OAuth2 callback URL:
https://your-domain.com/accounts/google/login/callback/ - Configure Facebook OAuth2 callback URL:
https://your-domain.com/accounts/facebook/login/callback/
- Configure Google OAuth2 callback URL:
🗄️ External Database Services
Instead of setting up your own PostgreSQL instance, you can use managed database services:
Neon (Recommended)
- Create account at neon.tech
- Create a database in your Neon dashboard
- Copy connection string from the dashboard
- Set environment variable:
DATABASE_URL=postgresql://user:password@ep-xxx.us-east-1.aws.neon.tech/database?sslmode=require
Supabase
- Create project at supabase.com
- Go to Settings > Database
- Use connection pooler URL for production:
DATABASE_URL=postgresql://postgres:password@db.xxx.supabase.co:6543/postgres?sslmode=require
Railway
- Connect GitHub repo to Railway
- Add PostgreSQL service
- Railway sets DATABASE_URL automatically
Amazon RDS
- Create RDS PostgreSQL instance
- Configure security groups for your application
- Set DATABASE_URL with RDS endpoint:
DATABASE_URL=postgresql://user:password@your-rds.amazonaws.com:5432/database
Environment Variables Reference
| Variable | Description | Required | Default |
|---|---|---|---|
SECRET_KEY |
Django secret key | Yes | - |
DEBUG |
Debug mode | Yes | False |
ALLOWED_HOSTS |
Allowed hostnames | Yes | - |
DATABASE_URL |
Full database URL | No* | - |
DB_NAME |
Database name | No* | django_db |
DB_USER |
Database user | No* | django_user |
DB_PASSWORD |
Database password | No* | - |
DB_HOST |
Database host | No* | postgres |
DB_PORT |
Database port | No* | 5432 |
DB_SSLMODE |
SSL mode for database | No | prefer |
EMAIL_HOST |
SMTP host | No | localhost |
EMAIL_PORT |
SMTP port | No | 587 |
EMAIL_HOST_USER |
SMTP username | No | - |
EMAIL_HOST_PASSWORD |
SMTP password | No | - |
GOOGLE_OAUTH2_CLIENT_ID |
Google OAuth2 ID | No | - |
GOOGLE_OAUTH2_CLIENT_SECRET |
Google OAuth2 secret | No | - |
FACEBOOK_APP_ID |
Facebook app ID | No | - |
FACEBOOK_APP_SECRET |
Facebook app secret | No | - |
Note: Either DATABASE_URL OR the individual DB_* variables are required, not both.
🐳 Docker Deployment
Production Docker Compose
# Create production environment file
cp .env.example .env.prod
# Edit .env.prod with production values
nano .env.prod
# Deploy with production compose
docker-compose -f docker-compose.prod.yml up -d --build
Manual Docker Deployment
# Build production image
docker build --target production -t django-template:latest .
# Run with environment variables
docker run -d \
--name django-app \
-p 80:8000 \
--env-file .env.prod \
django-template:latest
☁️ Cloud Platform Deployment
Heroku
-
Prepare for Heroku:
# Create Procfile echo "web: gunicorn django_project.wsgi --bind 0.0.0.0:\$PORT" > Procfile # Create runtime.txt echo "python-3.11.0" > runtime.txt -
Deploy to Heroku:
heroku create your-app-name heroku addons:create heroku-postgresql:mini heroku config:set SECRET_KEY=your-secret-key heroku config:set DEBUG=False git push heroku main heroku run python manage.py migrate heroku run python manage.py create_groups heroku run python manage.py createsuperuser
Railway
- Connect GitHub repository to Railway
- Add PostgreSQL database
- Configure environment variables
- Deploy automatically
DigitalOcean App Platform
- Create new app from GitHub
- Add managed database (PostgreSQL)
- Configure environment variables
- Deploy
🔒 Security Checklist
Before deploying to production:
- Set
DEBUG=False - Use a strong, unique
SECRET_KEY - Configure
ALLOWED_HOSTSproperly - Set up SSL/TLS certificate
- Enable
SECURE_SSL_REDIRECT=True - Configure proper database credentials
- Set up email backend for notifications
- Configure social authentication with production URLs
- Set up monitoring and logging
- Configure backup strategy for database
- Review and update all default passwords
📊 Monitoring
Health Checks
The application provides a health check endpoint:
- URL:
/(returns 200 if healthy) - Database connectivity check included
Logging
Logs are configured for production in settings/production.py:
- Application logs:
/var/log/django/django.log - Console output for container logs
Metrics
Consider adding:
- Application Performance Monitoring (APM)
- Database monitoring
- Error tracking (Sentry is pre-configured)
🔄 Updates and Maintenance
Updating the Application
-
Pull latest changes:
git pull origin main -
Rebuild and redeploy:
docker-compose -f docker-compose.prod.yml up -d --build -
Run migrations if needed:
docker-compose -f docker-compose.prod.yml exec web python manage.py migrate -
Rebuild Tailwind CSS:
docker-compose -f docker-compose.prod.yml exec web python manage.py tailwind build docker-compose -f docker-compose.prod.yml exec web python manage.py collectstatic --noinput
🎨 Tailwind CSS Production Considerations
Building CSS for Production
The project uses django-tailwind which requires Node.js to build CSS files:
-
Ensure Node.js is available in production:
# Dockerfile already includes Node.js installation RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \ && apt-get install -y nodejs -
Build process in CI/CD:
# Install dependencies python manage.py tailwind install # Build production CSS python manage.py tailwind build # Collect static files python manage.py collectstatic --noinput -
CSS Optimization:
- Production builds are automatically minified
- Unused CSS is purged based on template scanning
- CSS files are versioned for cache busting
Environment Variables
Add these to your production environment:
# Tailwind CSS
TAILWIND_APP_NAME=theme
NODE_ENV=production
Static Files Structure
After deployment, verify this structure:
/app/static/
├── css/
│ └── dist/
│ └── styles.css # Built Tailwind CSS
├── js/
└── ...
Backup Strategy
-
Database backup:
docker-compose -f docker-compose.prod.yml exec db pg_dump -U django_user django_db > backup.sql -
Media files backup:
docker-compose -f docker-compose.prod.yml exec web tar -czf media_backup.tar.gz /app/media
🆘 Troubleshooting
Common Issues
-
500 Internal Server Error:
- Check
DEBUG=FalseandALLOWED_HOSTS - Verify database connection
- Check application logs
- Check
-
Static files not loading:
- Run
python manage.py collectstatic - Check
STATIC_URLandSTATIC_ROOTsettings
- Run
-
Social login not working:
- Verify callback URLs in provider settings
- Check client ID and secret configuration
-
Email not sending:
- Verify SMTP settings
- Check firewall/security group settings
- Test email backend configuration
-
Tailwind CSS not loading:
- Verify Node.js is installed:
node --version - Check if CSS was built:
ls -la static/css/dist/ - Rebuild CSS:
python manage.py tailwind build - Ensure static files are collected:
python manage.py collectstatic
- Verify Node.js is installed:
-
Styling looks broken:
- Check browser developer tools for CSS loading errors
- Verify CSS file exists and is accessible
- Clear browser cache and hard reload
- Check for console errors
Getting Help
- Check the application logs
- Review the GitHub Issues
- Consult the Django documentation
- Check provider-specific documentation (Dokploy, Heroku, etc.)
Happy deploying! 🚀