feat: add website hosting configuration for buckets

Signed-off-by: Noste <83548733+Noooste@users.noreply.github.com>

backend/internal/handlers/buckets.go

@@ -67,11 +67,13 @@ func (h *BucketHandler) ListBuckets(c fiber.Ctx) error {
 		}
 
 		bucketInfo := models.BucketInfo{
-			Name:         bucketName,
-			CreationDate: adminBucket.Created,
-			Region:       "", // Garage doesn't have regions
-			ObjectCount:  &detailedInfo.Objects,
-			Size:         &detailedInfo.Bytes,
+			Name:          bucketName,
+			CreationDate:  adminBucket.Created,
+			Region:        "",
+			ObjectCount:   &detailedInfo.Objects,
+			Size:          &detailedInfo.Bytes,
+			WebsiteAccess: detailedInfo.WebsiteAccess,
+			WebsiteConfig: detailedInfo.WebsiteConfig,
 		}
 
 		buckets = append(buckets, bucketInfo)
@@ -306,3 +308,77 @@ func (h *BucketHandler) GrantBucketPermission(c fiber.Ctx) error {
 
 	return c.JSON(models.SuccessResponse(result))
 }
+
+// UpdateBucketWebsite updates the website access configuration for a bucket
+//
+//	@Summary		Update bucket website configuration
+//	@Description	Enables or disables static website hosting for a bucket
+//	@Tags			Buckets
+//	@Accept			json
+//	@Produce		json
+//	@Param			name	path		string												true	"Name of the bucket"
+//	@Param			request	body		models.UpdateBucketWebsiteRequest				true	"Website configuration"
+//	@Success		200		{object}	models.APIResponse{data=models.GarageBucketInfo}	"Website configuration updated"
+//	@Failure		400		{object}	models.APIResponse{error=models.APIError}			"Invalid request"
+//	@Failure		404		{object}	models.APIResponse{error=models.APIError}			"Bucket not found"
+//	@Failure		500		{object}	models.APIResponse{error=models.APIError}			"Failed to update bucket"
+//	@Router			/api/v1/buckets/{name}/website [put]
+func (h *BucketHandler) UpdateBucketWebsite(c fiber.Ctx) error {
+	ctx := c.Context()
+
+	bucketName := c.Params("name")
+	if bucketName == "" {
+		return c.Status(fiber.StatusBadRequest).JSON(
+			models.ErrorResponse(models.ErrCodeBadRequest, "Bucket name is required"),
+		)
+	}
+
+	var req models.UpdateBucketWebsiteRequest
+	if err := c.Bind().JSON(&req); err != nil {
+		return c.Status(fiber.StatusBadRequest).JSON(
+			models.ErrorResponse(models.ErrCodeBadRequest, "Invalid request body: "+err.Error()),
+		)
+	}
+
+	if req.Enabled && req.IndexDocument == "" {
+		return c.Status(fiber.StatusBadRequest).JSON(
+			models.ErrorResponse(models.ErrCodeBadRequest, "indexDocument is required when enabling website access"),
+		)
+	}
+
+	bucketInfo, err := h.adminService.GetBucketInfoByAlias(ctx, bucketName)
+	if err != nil {
+		return c.Status(fiber.StatusInternalServerError).JSON(
+			models.ErrorResponse(models.ErrCodeInternalError, "Failed to get bucket info: "+err.Error()),
+		)
+	}
+
+	if bucketInfo == nil {
+		return c.Status(fiber.StatusNotFound).JSON(
+			models.ErrorResponse(models.ErrCodeBucketNotFound, "Bucket does not exist"),
+		)
+	}
+
+	websiteAccess := &models.UpdateBucketWebsiteAccess{
+		Enabled: req.Enabled,
+	}
+	if req.Enabled {
+		websiteAccess.IndexDocument = &req.IndexDocument
+		if req.ErrorDocument != "" {
+			websiteAccess.ErrorDocument = &req.ErrorDocument
+		}
+	}
+
+	updateReq := models.UpdateBucketRequest{
+		WebsiteAccess: websiteAccess,
+	}
+
+	result, err := h.adminService.UpdateBucket(ctx, bucketInfo.ID, updateReq)
+	if err != nil {
+		return c.Status(fiber.StatusInternalServerError).JSON(
+			models.ErrorResponse(models.ErrCodeInternalError, "Failed to update bucket website: "+err.Error()),
+		)
+	}
+
+	return c.JSON(models.SuccessResponse(result))
+}

backend/internal/handlers/objects.go

@@ -1,6 +1,7 @@
 package handlers
 
 import (
+	"bufio"
 	"io"
 	"strconv"
 	"time"
@@ -176,11 +177,10 @@ func (h *ObjectHandler) GetObject(c fiber.Ctx) error {
 			models.ErrorResponse(models.ErrCodeObjectNotFound, "Object not found: "+err.Error()),
 		)
 	}
-	defer body.Close()
 
 	// Set response headers
 	c.Set("Content-Type", objectInfo.ContentType)
-	c.Set("Content-Length", string(rune(objectInfo.Size)))
+	c.Set("Content-Length", strconv.FormatInt(objectInfo.Size, 10))
 	c.Set("ETag", objectInfo.ETag)
 	c.Set("Last-Modified", objectInfo.LastModified.Format(time.RFC1123))
 
@@ -189,8 +189,11 @@ func (h *ObjectHandler) GetObject(c fiber.Ctx) error {
 		c.Set("Content-Disposition", "attachment; filename=\""+key+"\"")
 	}
 
-	// Stream the object body to the client
-	return c.SendStream(body)
+	// Stream the object body to the client without buffering the entire file
+	return c.SendStreamWriter(func(w *bufio.Writer) {
+		defer body.Close()
+		io.Copy(w, body)
+	})
 }
 
 // DeleteObject deletes an object from a bucket

backend/internal/models/requests.go

@@ -59,3 +59,10 @@ type UpdateUserRequest struct {
 	Status     *string `json:"status,omitempty"`     // "active" or "inactive"
 	Expiration *string `json:"expiration,omitempty"` // ISO 8601 date string
 }
+
+// UpdateBucketWebsiteRequest represents a request to update bucket website configuration
+type UpdateBucketWebsiteRequest struct {
+	Enabled       bool   `json:"enabled"`
+	IndexDocument string `json:"indexDocument,omitempty"`
+	ErrorDocument string `json:"errorDocument,omitempty"`
+}

backend/internal/models/responses.go

@@ -40,11 +40,13 @@ type HealthResponse struct {
 
 // BucketInfo represents information about a bucket
 type BucketInfo struct {
-	Name         string    `json:"name"`
-	CreationDate time.Time `json:"creationDate"`
-	ObjectCount  *int64    `json:"objectCount,omitempty"`
-	Size         *int64    `json:"size,omitempty"`
-	Region       string    `json:"region,omitempty"`
+	Name          string               `json:"name"`
+	CreationDate  time.Time            `json:"creationDate"`
+	ObjectCount   *int64               `json:"objectCount,omitempty"`
+	Size          *int64               `json:"size,omitempty"`
+	Region        string               `json:"region,omitempty"`
+	WebsiteAccess bool                 `json:"websiteAccess"`
+	WebsiteConfig *BucketWebsiteConfig `json:"websiteConfig,omitempty"`
 }
 
 // BucketListResponse represents a list of buckets

backend/internal/routes/routes.go

@@ -60,6 +60,7 @@ func SetupRoutes(
 		buckets.Get("/:name", bucketHandler.GetBucketInfo)                      // Get bucket info
 		buckets.Delete("/:name", bucketHandler.DeleteBucket)                    // Delete a bucket
 		buckets.Post("/:name/permissions", bucketHandler.GrantBucketPermission) // Grant bucket permissions
+		buckets.Put("/:name/website", bucketHandler.UpdateBucketWebsite)        // Update bucket website configuration
 	}
 
 	// Object routes

backend/internal/services/s3.go

@@ -317,13 +317,19 @@ func (s *S3Service) UploadObject(ctx context.Context, bucketName, key string, bo
 
 // GetObject retrieves an object from a bucket
 func (s *S3Service) GetObject(ctx context.Context, bucketName, key string) (io.ReadCloser, *models.ObjectInfo, error) {
+	// Get bucket-specific MinIO client
+	client, err := s.getMinioClient(ctx, bucketName)
+	if err != nil {
+		return nil, nil, fmt.Errorf("failed to get MinIO client for bucket %s: %w", bucketName, err)
+	}
+
 	var object *minio.Object
 
 	// Call MinIO GetObject API with retry logic
 	retryConfig := utils.DefaultRetryConfig()
-	err := utils.RetryWithBackoff(ctx, retryConfig, func() error {
+	err = utils.RetryWithBackoff(ctx, retryConfig, func() error {
 		var getErr error
-		object, getErr = s.client.GetObject(ctx, bucketName, key, minio.GetObjectOptions{})
+		object, getErr = client.GetObject(ctx, bucketName, key, minio.GetObjectOptions{})
 		return getErr
 	})
 	if err != nil {
@@ -351,10 +357,16 @@ func (s *S3Service) GetObject(ctx context.Context, bucketName, key string) (io.R
 
 // DeleteObject deletes an object from a bucket
 func (s *S3Service) DeleteObject(ctx context.Context, bucketName, key string) error {
+	// Get bucket-specific MinIO client
+	client, err := s.getMinioClient(ctx, bucketName)
+	if err != nil {
+		return fmt.Errorf("failed to get MinIO client for bucket %s: %w", bucketName, err)
+	}
+
 	// Call MinIO RemoveObject API with retry logic
 	retryConfig := utils.DefaultRetryConfig()
-	err := utils.RetryWithBackoff(ctx, retryConfig, func() error {
-		return s.client.RemoveObject(ctx, bucketName, key, minio.RemoveObjectOptions{})
+	err = utils.RetryWithBackoff(ctx, retryConfig, func() error {
+		return client.RemoveObject(ctx, bucketName, key, minio.RemoveObjectOptions{})
 	})
 	if err != nil {
 		return fmt.Errorf("failed to delete object %s from bucket %s: %w", key, bucketName, err)

frontend/src/components/buckets/BucketListView.tsx

@@ -9,7 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { FolderIcon, Loader2, MoreVertical, Plus, Search, Settings, Trash2 } from 'lucide-react';
+import { FolderIcon, Globe, Loader2, MoreVertical, Plus, Search, Settings, Trash2 } from 'lucide-react';
 import { formatBytes } from '@/lib/file-utils';
 import { formatDate } from '@/lib/utils';
 import type { Bucket } from '@/types';
@@ -23,6 +23,7 @@ interface BucketListViewProps {
   onOpenSettings: (bucket: Bucket) => void;
   onCreateBucket: () => void;
   onDeleteBucket: (bucket: Bucket) => void;
+  onWebsiteSettings: (bucket: Bucket) => void;
 }
 
 export function BucketListView({
@@ -34,6 +35,7 @@ export function BucketListView({
   onOpenSettings,
   onCreateBucket,
   onDeleteBucket,
+  onWebsiteSettings,
 }: BucketListViewProps) {
   const filteredBuckets = buckets.filter((bucket) =>
     bucket.name.toLowerCase().includes(searchQuery.toLowerCase())
@@ -94,7 +96,15 @@ export function BucketListView({
                   className="cursor-pointer hover:bg-muted/50"
                   onClick={() => onViewBucket(bucket.name)}
                 >
-                  <TableCell className="font-medium truncate max-w-[200px]">{bucket.name}</TableCell>
+                  <TableCell className="font-medium max-w-[200px]">
+                    <span className="truncate">{bucket.name}</span>
+                    {bucket.websiteAccess && (
+                      <Badge variant="outline" className="text-xs ml-2">
+                        <Globe className="h-3 w-3 mr-1" />
+                        Website
+                      </Badge>
+                    )}
+                  </TableCell>
                   <TableCell className="hidden sm:table-cell">
                     <Badge variant="secondary">{bucket.region || 'default'}</Badge>
                   </TableCell>
@@ -123,6 +133,13 @@ export function BucketListView({
                           <Settings className="h-4 w-4" />
                           Settings
                         </DropdownMenuItem>
+                        <DropdownMenuItem onClick={(e) => {
+                          e.stopPropagation();
+                          onWebsiteSettings(bucket);
+                        }}>
+                          <Globe className="h-4 w-4" />
+                          Website Settings
+                        </DropdownMenuItem>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem
                           className="text-destructive"

frontend/src/components/buckets/BucketWebsiteDialog.tsx

@@ -0,0 +1,133 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { Switch } from '@/components/ui/switch';
+import type { Bucket } from '@/types';
+
+interface BucketWebsiteDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  bucket: Bucket | null;
+  onSave: (
+    bucketName: string,
+    payload: { enabled: boolean; indexDocument?: string; errorDocument?: string }
+  ) => Promise<boolean>;
+}
+
+export function BucketWebsiteDialog({
+  open,
+  onOpenChange,
+  bucket,
+  onSave,
+}: BucketWebsiteDialogProps) {
+  const [enabled, setEnabled] = useState(false);
+  const [indexDocument, setIndexDocument] = useState('index.html');
+  const [errorDocument, setErrorDocument] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (open && bucket) {
+      setEnabled(bucket.websiteAccess);
+      setIndexDocument(bucket.websiteConfig?.indexDocument ?? 'index.html');
+      setErrorDocument(bucket.websiteConfig?.errorDocument ?? '');
+    }
+  }, [open, bucket]);
+
+  const handleSave = async () => {
+    if (!bucket) return;
+    setSaving(true);
+    const success = await onSave(bucket.name, {
+      enabled,
+      indexDocument: enabled ? indexDocument : undefined,
+      errorDocument: enabled && errorDocument ? errorDocument : undefined,
+    });
+    setSaving(false);
+    if (success) onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Website Hosting — {bucket?.name}</DialogTitle>
+          <DialogDescription>
+            Configure this bucket to serve a static website.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">Website access</p>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                Allow public HTTP access to bucket objects
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <Badge variant={enabled ? 'default' : 'secondary'}>
+                {enabled ? 'Enabled' : 'Disabled'}
+              </Badge>
+              <Switch checked={enabled} onCheckedChange={setEnabled} />
+            </div>
+          </div>
+
+          {enabled && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  Index document <span className="text-destructive">*</span>
+                </label>
+                <Input
+                  value={indexDocument}
+                  onChange={(e) => setIndexDocument(e.target.value)}
+                  placeholder="index.html"
+                />
+                <p className="text-xs text-muted-foreground">
+                  The file served when a directory is requested (e.g. index.html)
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Error document</label>
+                <Input
+                  value={errorDocument}
+                  onChange={(e) => setErrorDocument(e.target.value)}
+                  placeholder="404.html (optional)"
+                />
+                <p className="text-xs text-muted-foreground">
+                  The file served when an object is not found (optional)
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            variant={!enabled && bucket?.websiteAccess ? 'destructive' : 'default'}
+            disabled={saving || (enabled && !indexDocument)}
+          >
+            {saving
+              ? 'Saving...'
+              : !enabled && bucket?.websiteAccess
+              ? 'Disable Website'
+              : 'Save'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/ui/switch.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, checked, onCheckedChange, ...props }, ref) => {
+    return (
+      <label className="relative inline-flex cursor-pointer items-center">
+        <input
+          type="checkbox"
+          className="sr-only peer"
+          ref={ref}
+          checked={checked}
+          onChange={(e) => onCheckedChange?.(e.target.checked)}
+          {...props}
+        />
+        <div
+          className={cn(
+            'relative h-6 w-11 rounded-full border transition-colors',
+            checked ? 'border-[#ff9329] bg-[#ff9329]' : 'border-[#6b7280] bg-[#6b7280]',
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background',
+            'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+            className
+          )}
+        >
+          <span
+            className="absolute left-[2px] h-5 w-5 rounded-full bg-white shadow transition-transform"
+            style={{ top: '50%', transform: `translateY(-50%) translateX(${checked ? '20px' : '0px'})` }}
+          />
+        </div>
+      </label>
+    );
+  }
+);
+Switch.displayName = 'Switch';
+
+export { Switch };

frontend/src/lib/api.ts

@@ -2,6 +2,7 @@ import axios from 'axios';
 import {toast} from 'sonner';
 import type {
   AccessKey,
+  ApiResponse,
   Bucket,
   BucketDetails,
   ClusterHealth,
@@ -192,6 +193,17 @@ export const bucketsApi = {
   updateSettings: async (name: string, settings: Partial<BucketDetails>): Promise<void> => {
     await api.patch(`/v1/buckets/${name}/settings`, settings);
   },
+
+  updateBucketWebsite: async (
+    name: string,
+    payload: { enabled: boolean; indexDocument?: string; errorDocument?: string }
+  ) => {
+    const response = await api.put<ApiResponse<any>>(
+      `/v1/buckets/${encodeURIComponent(name)}/website`,
+      payload
+    );
+    return response.data.data;
+  },
 };
 
 // Objects API

frontend/src/pages/Buckets.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
 import { Header } from '@/components/layout/header';
 import { useBuckets, useCreateBucket, useDeleteBucket, useGrantBucketPermission } from '@/hooks/useApi';
@@ -8,8 +9,10 @@ import { ObjectBrowserView } from '@/components/buckets/ObjectBrowserView';
 import { CreateBucketDialog } from '@/components/buckets/CreateBucketDialog';
 import { DeleteBucketDialog } from '@/components/buckets/DeleteBucketDialog';
 import { BucketSettingsDialog } from '@/components/buckets/BucketSettingsDialog';
+import { BucketWebsiteDialog } from '@/components/buckets/BucketWebsiteDialog';
 import type { Bucket } from '@/types';
 import { toast } from 'sonner';
+import { bucketsApi } from '@/lib/api';
 
 export function Buckets() {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -21,6 +24,8 @@ export function Buckets() {
   const [selectedBucket, setSelectedBucket] = useState<Bucket | null>(null);
   const [settingsDialogOpen, setSettingsDialogOpen] = useState(false);
   const [settingsBucket, setSettingsBucket] = useState<Bucket | null>(null);
+  const [websiteDialogOpen, setWebsiteDialogOpen] = useState(false);
+  const [websiteBucket, setWebsiteBucket] = useState<Bucket | null>(null);
 
   // Object browser state - initialize from URL params
   const [viewingBucket, setViewingBucket] = useState<string | null>(searchParams.get('bucket'));
@@ -51,6 +56,7 @@ export function Buckets() {
   }, [searchParams]);
 
   // Custom hooks
+  const queryClient = useQueryClient();
   const { data: buckets = [], isLoading: bucketsLoading } = useBuckets();
   const createBucketMutation = useCreateBucket();
   const deleteBucketMutation = useDeleteBucket();
@@ -139,6 +145,25 @@ export function Buckets() {
     setSettingsDialogOpen(true);
   };
 
+  const handleOpenWebsiteSettings = (bucket: Bucket) => {
+    setWebsiteBucket(bucket);
+    setWebsiteDialogOpen(true);
+  };
+
+  const handleSaveWebsite = async (
+    bucketName: string,
+    payload: { enabled: boolean; indexDocument?: string; errorDocument?: string }
+  ): Promise<boolean> => {
+    try {
+      await bucketsApi.updateBucketWebsite(bucketName, payload);
+      queryClient.invalidateQueries({ queryKey: ['buckets'] });
+      toast.success('Website configuration updated');
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
   const handleRefreshObjects = async () => {
     if (isRefreshing) return;
     try {
@@ -224,6 +249,7 @@ export function Buckets() {
           onSearchChange={setSearchQuery}
           onViewBucket={handleViewBucket}
           onOpenSettings={handleOpenSettings}
+          onWebsiteSettings={handleOpenWebsiteSettings}
           onCreateBucket={() => setCreateDialogOpen(true)}
           onDeleteBucket={(bucket) => {
             setSelectedBucket(bucket);
@@ -252,6 +278,13 @@ export function Buckets() {
         bucket={settingsBucket}
         onGrantPermission={grantPermission}
       />
+
+      <BucketWebsiteDialog
+        open={websiteDialogOpen}
+        onOpenChange={setWebsiteDialogOpen}
+        bucket={websiteBucket}
+        onSave={handleSaveWebsite}
+      />
     </div>
   );
 }

frontend/src/types/index.ts

@@ -5,6 +5,11 @@ export interface Bucket {
   objectCount?: number;
   size?: number;
   region?: string;
+  websiteAccess: boolean;
+  websiteConfig?: {
+    indexDocument: string;
+    errorDocument?: string;
+  };
 }
 
 export interface BucketDetails extends Bucket {

helm/garage-ui/Chart.yaml

@@ -3,8 +3,8 @@ name: garage-ui
 description: A Helm chart for Garage UI - Web interface for Garage S3 object storage
 icon: https://helm.noste.dev/garage.png
 type: application
-version: 0.1.13
-appVersion: "v0.1.2"
+version: 0.1.15
+appVersion: "v0.1.15"
 keywords:
   - garage
   - s3