oldvine/STATIC_WEBSITE_STRUCTURE.md

📁 Static Website Structure Analysis

🌐 Deployed Structure on Server

/public_html/
│
├── 📄 index.html (4 KB)
│   └── Single Page Application entry point
│   └── Loads React app from /static/js/main.*.js
│
├── 📁 static/ (7 MB)
│   ├── css/
│   │   ├── main.b6834280.css (392 KB - All styles)
│   │   └── main.b6834280.css.map
│   └── js/
│       ├── main.49960f27.js (392 KB - All React code)
│       ├── main.49960f27.js.map
│       └── main.49960f27.js.LICENSE.txt
│
├── 📁 images/ (1.8 GB - All static images)
│   ├── logo.png
│   ├── hero.jpg
│   ├── about-hero.jpg
│   ├── about.jpg
│   ├── room-deluxe.jpg
│   ├── room-executive.jpg
│   ├── room-presidential.jpg
│   ├── gallery/
│   │   ├── 01.jpg through 12.jpg
│   │   ├── hotel-gallery/ (31 images: 01.jpg - 31.jpg)
│   │   └── restaurant-gallery/ (31 images: 01.jpg - 31.jpg)
│   └── rooms/
│       ├── single-room/ (13 images: 01.jpg - 13.jpg)
│       ├── double-room/ (33 images: 01.jpg - 33.jpg)
│       ├── suite-room/ (13 images: 01.jpg - 13.jpg)
│       ├── twin-room/ (2 images: 01.jpg - 02.jpg)
│       ├── deluxe/ (3 images)
│       ├── executive/ (3 images)
│       └── presidential/ (4 images)
│
├── 📄 manifest.json (PWA manifest)
├── 📄 asset-manifest.json (Build manifest)
├── 📄 .htaccess (SPA routing rules)
└── 📁 uploads/ (empty - for CMS uploads)

🔧 How It Works

1. Single Page Application (SPA)

• Entry Point: index.html loads a single React application
• Routing: All routes handled client-side by React Router
• No Server-Side Rendering: Everything rendered in browser

2. Client-Side Routing

• .htaccess redirects all requests to index.html
• React Router handles navigation
• Browser history API manages URLs

3. API Dependencies

The frontend makes API calls to: http://118.139.176.130:5080

API Endpoints Used:

• /api/content/home - Homepage content
• /api/content/about - About page content
• /api/room-categories - List of room categories
• /api/room-categories/:slug - Specific category details
• /api/rooms - Individual rooms
• /api/gallery-categories - Gallery categories
• /api/gallery-categories/:slug - Specific gallery
• /api/contact/info - Contact information
• /api/contact - Submit contact form
• /api/bookings - Booking operations
• /api/admin/* - CMS/admin endpoints

📋 Pages/Routes (Client-Side)

Public Routes

• / - Homepage
• /about - About page
• /rooms - Room categories listing
• /rooms/category/:slug - Category gallery (e.g., /rooms/category/single-room)
• /rooms/:id - Individual room details
• /gallery - Gallery categories
• /gallery/:slug - Gallery category view
• /facilities - Facilities page
• /contact - Contact page
• /booking - Booking form
• /booking/confirmation - Booking confirmation

Admin Routes (Protected)

• /admin/login - Admin login
• /admin/dashboard - Admin dashboard
• /admin/content - Content management
• /admin/rooms - Room management
• /admin/bookings - Booking management
• /admin/blog - Blog management
• /admin/media - Media management
• /admin/settings - Settings management

⚠️ Current Dependencies

✅ Static (Works Without Backend)

• HTML structure and layout
• CSS styling and animations
• Image display (all images are static files)
• Basic navigation and routing
• UI components rendering

❌ Dynamic (Requires Backend API)

• Homepage: Hero content, welcome section, room categories
• About Page: Heritage section, mission, vision, values
• Rooms Page: Category cards, room details
• Gallery: Category listings and images
• Contact: Contact form submission
• Booking: Booking functionality
• CMS: All admin panel features

📊 File Sizes

• Total Build Size: ~1.8 GB
  • index.html: 4 KB
  • static/: 7 MB (CSS + JS)
  • images/: 1.8 GB (all images)
  • Other files: < 10 KB

🔄 Build Process

1. Source Code (client/src/) → React components
2. Build (npm run build) → Bundled and minified
3. Output (client/build/) → Static files ready for deployment
4. Deploy → Upload to public_html/ on server

💡 Options for Deployment

Option 1: Fully Static (No Backend)

Pros:

• No server required
• Fast loading
• Simple hosting

Cons:

• No dynamic content
• No CMS
• No booking functionality
• Requires rebuild to update content

How:

• Pre-render all pages at build time
• Generate static HTML files
• Embed data in JavaScript bundle

Option 2: Hybrid (Current Setup)

Pros:

• Full functionality
• Dynamic content
• CMS available
• Easy content updates

Cons:

• Requires backend server
• More complex setup
• Higher hosting costs

How:

• Static frontend + Dynamic backend API
• API handles all data operations

Option 3: Static with Pre-rendered Data

Pros:

• No API needed
• Fast performance
• Works on static hosting

Cons:

• Content updates require rebuild
• No real-time updates
• Limited interactivity

How:

• Fetch data at build time
• Embed in JavaScript bundle
• Rebuild when content changes

🎯 Current Status

Deployed:

• ✅ Frontend static files on server
• ✅ All images uploaded
• ✅ Routing configured (.htaccess)

Missing:

• ❌ Backend API not accessible (MongoDB issue)
• ❌ Port 5080 may be blocked
• ❌ Dynamic content not loading

📝 Recommendations

1. For Static-Only Deployment:

   • Pre-render pages with static data
   • Remove API dependencies
   • Simplify to brochure site

2. For Full Functionality:

   • Fix MongoDB connection (Atlas recommended)
   • Configure firewall for port 5080
   • Set up reverse proxy if needed

3. For Hybrid Approach:

   • Keep static frontend
   • Use serverless functions for API
   • Reduce backend complexity