Complete Documentation & Deployment Guide for 3-Tier Architecture with Azure SQL Database This folder contains all SQL scripts required to set up the Azure SQL Database for the Resource Management Dashboard.
Default Admin Username = ritesh@apka.bhai
Default Password = Aagebadho
👆👆👆 Click above to view the live deployed application with complete setup guide
| File | Purpose |
|---|---|
01_create_tables.sql |
Creates all database tables |
02_insert_default_data.sql |
Inserts default theme configuration |
03_create_admin_user.sql |
Creates default admin user |
04_sample_resources.sql |
Inserts sample resources (optional) |
backup_and_restore.sql |
Backup and restore commands |
- Login to Azure Portal: https://portal.azure.com
- Search for "SQL databases"
- Click "+ Create"
- Fill in details:
- Resource Group: Create new or select existing
- Database Name:
resource-dashboard-db(CHANGE ACCORDINGLY) - Server: Create new
- Server name:
your-unique-server-name(CHANGE ACCORDINGLY) - Location: Southeast Asia (or your preferred region)
- Authentication: SQL authentication
- Admin login:
dbadmin(CHANGE ACCORDINGLY) - Password: Strong password (CHANGE ACCORDINGLY and SAVE IT!)
- Server name:
- Compute + Storage: Basic or Standard tier
- Networking:
- ✅ Allow Azure services
- ✅ Add current client IP
- Click "Review + Create" > "Create"
⏱ Wait: 5-10 minutes for deployment
- Go to your database resource
- Click "Connection strings" (left menu)
- Copy the ADO.NET connection string
- Note it down - you'll need it for
.envconfiguration
Format for PyMSSQL (Backend .env):
mssql+pymssql://USERNAME:PASSWORD@SERVER_NAME.database.windows.net:1433/DATABASE_NAME
Example (CHANGE ACCORDINGLY):
mssql+pymssql://dbadmin:MySecure@Pass123@resource-server.database.windows.net:1433/resource-dashboard-db
- Go to your database in Azure Portal
- Click "Query editor" (left menu)
- Login with:
- Authentication type: SQL authentication
- Login:
dbadmin(or your admin username) - Password: Your database password
PLEASE NOTE THAT, IN YOUR SQL SERVER FIREWALL, CLIENT IP AND BACKEND IP SHOULD BE ALLOWED,
FOR PRACTISE PURPOSE ONLY
- Run scripts in order:
- Copy content of
01_create_tables.sql→ Paste → Click "Run" - Copy content of
02_insert_default_data.sql→ Paste → Click "Run" - Copy content of
03_create_admin_user.sql→ Paste → Click "Run" - (Optional) Copy content of
04_sample_resources.sql→ Paste → Click "Run"
- Copy content of
✅ Done! Database is ready.
- Download SSMS: https://aka.ms/ssmsfullsetup
- Connect to Azure SQL:
- Server name:
your-server.database.windows.net - Authentication: SQL Server Authentication
- Login: Your admin username
- Password: Your admin password
- Server name:
- Open each
.sqlfile and execute in order
# Make sure backend .env is configured with DATABASE_URL
cd backend
source venv/bin/activate # or venv\Scripts\activate on Windows
# Run migration
python -c "from app.db.database import engine; from app.models.user import Base; Base.metadata.create_all(engine)"Run this query in Query Editor:
-- Check all tables
SELECT TABLE_NAME
FROM INFORMATION_SCHEMA.TABLES
WHERE TABLE_TYPE = 'BASE TABLE';Expected Output:
userstheme_configresources
After running 03_create_admin_user.sql, you'll have:
- Email:
admin@example.com(CHANGE ACCORDINGLY in the SQL file) - Password:
Admin@123(CHANGE ACCORDINGLY in the SQL file) - Role: admin
- Protected: Yes (cannot be deleted)
Azure Portal:
- Go to SQL database
- Click "Export"
- Choose storage account
- Enter admin credentials
- Click "OK"
Automated Backups: Azure SQL automatically backs up databases. You can restore to any point in last 7-35 days.
- Go to SQL database
- Click "Restore"
- Select restore point
- Enter new database name
- Click "OK"
Check:
- ✅ Firewall rules include your IP
- ✅ Connection string is correct
- ✅ Username/password are correct
- ✅ Server name has
.database.windows.net
Add IP to Firewall:
- SQL Database > Networking
- Add your current IP address
- Save
Solution:
- Increase connection timeout in connection string
- Check database tier (Basic might be slow)
- Upgrade to Standard tier
Check:
- Using admin credentials?
- User has proper permissions?
- Stores user accounts
- Includes authentication info
- Role-based access control
- Infrastructure resources
- Performance metrics
- User ownership
- User theme preferences
- Color schemes
- Dark/light mode settings
Development (Local):
DATABASE_URL=sqlite:///./resource_dashboard.dbProduction (Azure SQL):
# CHANGE ACCORDINGLY with your actual credentials
DATABASE_URL=mssql+pymssql://dbadmin:YourPassword@your-server.database.windows.net:1433/resource-dashboard-db💡 Architecture Benefits
- Frontend - React + Vite (Static build ready)
- Backend - Python FastAPI with JWT authentication
- Database - Azure SQL Database
project/
├── backend/ # Python FastAPI Backend
│ ├── app/
│ │ ├── api/ # API endpoints (auth, users, theme)
│ │ ├── core/ # Config & security
│ │ ├── db/ # Database setup
│ │ ├── models/ # SQLAlchemy models
│ │ ├── schemas/ # Pydantic schemas
│ │ └── main.py # FastAPI application
│ ├── requirements.txt # Python dependencies
│ ├── azure_sql_schema.sql # Database schema
│ └── README.md # Backend documentation
│
├── client/ # React Frontend
│ ├── src/
│ │ ├── components/ # UI components
│ │ ├── pages/ # Page components
│ │ ├── contexts/ # Auth context (updated for Python backend)
│ │ ├── config/ # API configuration
│ │ └── lib/ # API client (updated)
│ └── .env.example # Frontend env vars
│
└── DEPLOYMENT_GUIDE.md # Complete deployment instructions
🔧 What Included
- ✅ Python FastAPI framework instead of Node.js
- ✅ Azure SQL Database instead of Supabase Postgres
- ✅ JWT Authentication with python-jose
- ✅ SQLAlchemy ORM for database operations
- ✅ Pydantic for request/response validation
- ✅ Auth Context to use Python backend API
- ✅ API Client to call FastAPI endpoints
- ✅ API Configuration for backend URL
- ✅ Azure SQL Schema created
- ✅ Users table with email, password, roles
- ✅ Theme config table for customization
- ✅ Default theme values inserted
🚀 OUR MAIN IMPORTANT STEPS
# Azure Portal mein:
1. Create SQL Database
2. Note: server name, database name, username, password
3. Run: backend/azure_sql_schema.sql
4. Configure firewall rules for VM IPs# Backend VM mein:
cd backend
pip install -r requirements.txt
# .env file configure karo:
AZURE_SQL_SERVER=your-server.database.windows.net
AZURE_SQL_DATABASE=your-database
AZURE_SQL_USERNAME=your-username
AZURE_SQL_PASSWORD=your-password
SECRET_KEY=your-secret-key
# Run backend:
python run.py
# Production: uvicorn app.main:app --host 0.0.0.0 --port 8000# Frontend VM mein:
cd client
# Update API URL in .env:
VITE_API_URL=http://backend-vm-ip:8000
# Build frontend:
npm install
npm run build
# Deploy to nginx:
sudo cp -r dist/public/* /var/www/html/🔐 Security Notes
-
Environment Variables:
- Backend: Use
.envfile (seebackend/.env.example) - Frontend: Use
client/.env(seeclient/.env.example)
- Backend: Use
-
Production Checklist:
- Change SECRET_KEY to random secure value
- Enable HTTPS with SSL certificates
- Configure Azure SQL firewall rules
- Set up Azure Key Vault for secrets
- Enable CORS only for your frontend domain
- Use strong passwords for database
📋 Features Implemented
- ✅ User signup with email/password
- ✅ User login with JWT tokens
- ✅ Role-based access control (admin/user)
- ✅ Protected routes
- ✅ Get current user profile
- ✅ Update user profile (name, bio, avatar)
- ✅ Admin: View all users
- ✅ Admin: View user by ID
- ✅ Get theme configuration
- ✅ Admin: Update theme colors
- ✅ Default theme values
🧪 Testing
# Health check
curl http://localhost:8000/health
# Get theme config (public)
curl http://localhost:8000/api/theme
# Signup
curl -X POST http://localhost:8000/api/auth/signup \
-H "Content-Type: application/json" \
-d '{"email":"test@example.com","password":"password123"}'
# Login
curl -X POST http://localhost:8000/api/auth/login \
-d "email=test@example.com&password=password123"# Local development:
npm run dev
# Open: http://localhost:5000
# Production build:
npm run build
# Serve dist/public/ with nginx💡 Architecture Benefits
- ✅ Complete control over all layers
- ✅ Python backend (widely used in enterprise)
- ✅ Azure SQL Database (enterprise-grade)
- ✅ Scalable VM-based deployment
- ✅ Easy to demonstrate to clients
- ✅ Each tier independently deployable
🎯 Key Endpoints
POST /api/auth/signup- Register new userPOST /api/auth/login- Login user (returns JWT)GET /api/users/me- Get current user (requires auth)PATCH /api/users/me- Update profile (requires auth)GET /api/users/- Get all users (admin only)GET /api/theme/- Get theme config (public)PATCH /api/theme/{key}- Update theme (admin only)
/auth- Login/Signup page/- Dashboard (protected)/profile- User profile (protected)/settings- Settings (protected)/theme-settings- Theme config (admin only)/user-management- User management (admin only)
🎉 Summary
Our Project is now production-ready 3-tier architecture :
- ✅ Frontend: Static React build (nginx se serve hoga)
- ✅ Backend: Python FastAPI (systemd service se chalega)
- ✅ Database: Azure SQL (managed service)
All documentation and scripts are ready. now onlt step left to set environment variables and then do deploy!
Happy Deploying! 🚀
✅ Final Checklist
- Azure SQL Database created
- Connection string copied
- All SQL scripts executed successfully
- Tables verified in Query Editor
- Default admin user created
- Backend
.envupdated with DATABASE_URL - Firewall rules configured
- Test connection from backend
Resource management dashboard converted to 3-tier architecture for Azure deployment with Python FastAPI backend and Azure SQL Database. No more Supabase/PostgreSQL - pure Azure Stack!
Frontend (React/Vite) → Backend (FastAPI/Python) → Azure SQL Database
Static HTML/CSS/JS REST API (port 8000) (ritserver.database.windows.net)
/
├── client/ # Frontend - React 18 + Vite + TypeScript
│ ├── src/
│ │ ├── components/ # Shadcn UI components
│ │ ├── pages/ # Page components
│ │ ├── contexts/ # React contexts (Auth, etc)
│ │ ├── hooks/ # Custom hooks
│ │ ├── lib/ # API client, utilities
│ │ └── integrations/ # Third-party integrations
│ ├── public/ # Static assets
│ └── vite.config.ts # Vite configuration
│
├── backend/ # Backend - Python FastAPI
│ ├── app/
│ │ ├── main.py # FastAPI app + routes
│ │ ├── core/
│ │ │ └── config.py # Settings (Azure SQL credentials)
│ │ ├── api/
│ │ │ ├── auth.py # Authentication endpoints
│ │ │ ├── users.py # User management
│ │ │ └── theme.py # Theme configuration
│ │ ├── db/
│ │ │ ├── database.py # SQLAlchemy setup
│ │ │ └── models.py # Database models
│ │ └── utils/
│ │ └── jwt.py # JWT utilities
│ ├── requirements.txt # Python dependencies
│ ├── run.py # Development server entry
│ └── .env # Azure SQL credentials
│
└── docs/ # Deployment guides
├── DEPLOYMENT_GUIDE.md # Step-by-step Azure deployment
└── MIGRATION_SUMMARY.md # Lovable → Azure migration details
💡 Architecture Benefits
- ✅ React 18 + TypeScript + Vite
- ✅ Removed Supabase dependencies
- ✅ Updated API client to call Python backend
- ✅ Auth context updated for JWT
- ✅ Ready to build and deploy
- ✅ LIVE on localhost:8000
- ✅ Connected to Azure SQL Database (ritserver)
- ✅ JWT Authentication implemented
- ✅ User management endpoints
- ✅ Theme configuration endpoints
- ✅ Auto-creates database tables on startup
- ✅ CORS configured for frontend
- ✅ Azure SQL Database created (ritserver.database.windows.net)
- ✅ Schema auto-generated by SQLAlchemy
- ✅ Tables: users, user_profiles, user_roles, theme_configurations
# Health check
curl http://localhost:8000/health
# Response: {"status":"healthy"}
# Root endpoint
curl http://localhost:8000/
# Response: {"message":"Resource Management API is running"}
# API docs (interactive)
http://localhost:8000/docscd backend
python -m venv venv
venv\Scripts\activate # Windows
pip install -r requirements.txt
python run.py
# Server runs on http://localhost:8000npm install
npm run dev
# Server runs on http://localhost:5000Frontend:
- React 18, TypeScript, Vite
- Shadcn UI, Tailwind CSS
- React Router, React Query
- Axios for API calls
Backend:
- Python 3.11
- FastAPI + Uvicorn
- SQLAlchemy ORM
- PyMSSQL (Azure SQL driver)
Database:
- Azure SQL Database
- Auto-migrations via SQLAlchemy
Server: YOUR_server_NAME.database.windows.net
Database: YOUR_DB_NAME
Username: SERVER_NAME@DB_NAME
Password: YUOR_PASSWORD
-
Deploy Backend to Azure VM:
- Create Windows/Linux VM in Azure
- Install Python 3.11
- Copy backend folder
- Run:
pip install -r requirements.txt && python run.py
-
Deploy Frontend to Azure VM:
- Build:
npm run build - Serve
client/dist/with Nginx or IIS
- Build:
-
Network Configuration:
- Open port 8000 (backend) on VM security group
- Update frontend API URL to backend VM IP
- Configure Azure SQL firewall to allow VM access
-
Optional: Use Azure App Services
- Backend: App Service (Python runtime)
- Frontend: Static Web Apps
- Database: Managed Azure SQL
- Azure SQL credentials are hardcoded in
backend/app/core/config.pyfor simplicity - For production: Use Azure Key Vault for secret management
- CORS is configured for localhost - update for production URLs
- JWT SECRET_KEY should be changed before production deployment
3-Tier Deployment Guide This guide explains how to deploy the Resource Management System in a 3-tier architecture on Azure.
┌─────────────────────┐
│ Frontend (VM 1) │
│ Static Files │
│ Nginx Server │
└──────────┬──────────┘
│
│ HTTP/HTTPS
▼
┌─────────────────────┐
│ Backend (VM 2) │
│ Python FastAPI │
│ Port 8000 │
└──────────┬──────────┘
│
│ SQL Connection
▼
┌─────────────────────┐
│ Azure SQL Database │
│ Managed Service │
└─────────────────────┘
- Go to Azure Portal → Create Resource → SQL Database
- Configure:
- Resource Group: Create new or use existing
- Database Name:
resource-management-db - Server: Create new server
- Pricing Tier: Choose appropriate tier (Basic/Standard/Premium)
- Go to your SQL Server → Networking
- Add firewall rules:
- Add client IP (for your development machine)
- Add Backend VM IP (once created) -> IMPORTANT(NOT TO FORGET)
- Add Frontend VM IP (if needed)
- Connect to Azure SQL using SQL Server Management Studio or Azure Data Studio
- Run the script:
backend/azure_sql_schema.sql - Verify tables are created:
users,theme_config
- Azure Portal → Virtual Machines → Create
- Configuration:
- OS: Ubuntu 22.04 LTS
- Size: Standard_B2s (2 vCPUs, 4 GB RAM) minimum
- Ports: Open port 8000 (or use nginx reverse proxy on 80/443)
- Authentication: SSH key
# SSH into the VM
ssh azureuser@<backend-vm-ip>
# Update system
sudo apt update && sudo apt upgrade -y
# Install Python 3 and pip
sudo apt install python3 python3-pip python3-venv -y
# Install SQL Server ODBC Driver
curl https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -
curl https://packages.microsoft.com/config/ubuntu/22.04/prod.list | sudo tee /etc/apt/sources.list.d/mssql-release.list
sudo apt-get update
sudo ACCEPT_EULA=Y apt-get install -y msodbcsql18
sudo ACCEPT_EULA=Y apt-get install -y mssql-tools18
sudo apt-get install -y unixodbc-dev# Clone your repository (or upload files)
git clone <your-repo-url>
cd backend
# Create virtual environment
python3 -m venv venv
source venv/bin/activate
# Install dependencies
pip install -r requirements.txt
# Configure environment variables
nano .env.env file:
AZURE_SQL_SERVER=your-server.database.windows.net
AZURE_SQL_DATABASE=resource-management-db
AZURE_SQL_USERNAME=your-admin-username (SOMETIME IT WILL TAKE YOUR_SERVERNAME/YOUR_DBNAME AS USER_NAME)
AZURE_SQL_PASSWORD=your-password
AZURE_SQL_DRIVER=ODBC Driver 18 for SQL Server
SECRET_KEY=your-super-secret-key-change-this
ALGORITHM=HS256
ACCESS_TOKEN_EXPIRE_MINUTES=30
FRONTEND_URL=http://<frontend-vm-ip>
sudo nano /etc/systemd/system/resource-api.service[Unit]
Description=Resource Management FastAPI Backend
After=network.target
[Service]
User=azureuser
WorkingDirectory=/home/azureuser/backend
Environment="PATH=/home/azureuser/backend/venv/bin"
EnvironmentFile=/home/azureuser/backend/.env
ExecStart=/home/azureuser/backend/venv/bin/uvicorn app.main:app --host 0.0.0.0 --port 8000
Restart=always
RestartSec=10
[Install]
WantedBy=multi-user.target# Enable and start service
sudo systemctl daemon-reload
sudo systemctl enable resource-api
sudo systemctl start resource-api
sudo systemctl status resource-apisudo apt install nginx -y
sudo nano /etc/nginx/sites-available/resource-apiserver {
listen 80;
server_name <backend-vm-ip-or-domain>;
location / {
proxy_pass http://localhost:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}sudo ln -s /etc/nginx/sites-available/resource-api /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx- Azure Portal → Virtual Machines → Create
- Configuration:
- OS: Ubuntu 22.04 LTS
- Size: Standard_B1s (1 vCPU, 1 GB RAM) minimum
- Ports: Open ports 80 and 443
- Authentication: SSH key
# SSH into the VM
ssh azureuser@<frontend-vm-ip>
# Install Node.js 20
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
# Clone your repository
git clone <your-repo-url>
cd <your-repo>
# Update backend API URL in frontend
nano client/src/config/api.tsUpdate API URL:
export const API_BASE_URL = 'http://<backend-vm-ip>:8000';Build the frontend:
# Install dependencies
npm install
# Build for production
npm run build
# This creates dist/public/ foldersudo apt install nginx -y
# Copy build files to nginx directory
sudo cp -r dist/public/* /var/www/html/
# Configure nginx
sudo nano /etc/nginx/sites-available/defaultserver {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html;
server_name _;
location / {
try_files $uri $uri/ /index.html;
}
# API proxy (optional - if you want to avoid CORS)
location /api {
proxy_pass http://<backend-vm-ip>:8000/api;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}sudo nginx -t
sudo systemctl restart nginxcurl http://<backend-vm-ip>:8000/health
# Should return: {"status":"healthy"}
curl http://<backend-vm-ip>:8000/api/theme/
# Should return theme configurationsOpen browser: http://<frontend-vm-ip>
You should see the login page.
- Create a user via signup
- Login
- Navigate through the application
- Check if all features work
- Change default SSH ports
- Configure UFW firewall
- Enable HTTPS with Let's Encrypt
- Use Azure Key Vault for secrets
- Enable Azure SQL firewall rules
- Set up monitoring and alerts
- Configure backup for Azure SQL
- Use private networking (VNet) between VMs
- Implement rate limiting
- Enable logging and monitoring
# Check API status
sudo systemctl status resource-api
# View logs
sudo journalctl -u resource-api -f
# Check nginx
sudo systemctl status nginx# Check nginx
sudo systemctl status nginx
# View nginx logs
sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log- Check firewall rules
- Verify connection string
- Test with:
telnet <server>.database.windows.net 1433
- Check CORS configuration in backend
- Verify backend VM firewall
- Check API_BASE_URL in frontend
- Check if backend service is running
- Verify nginx proxy configuration
- Check backend port availability
-
Use Azure Reserved Instances for VMs
-
Choose appropriate SQL Database tier
-
Set up auto-shutdown for non-production VMs
-
Use Azure CDN for frontend static files
-
Enable Azure SQL auto-pause for dev/test environments
This section contains detailed architecture insights.