Okay, I can help you set up the basic structure for a web application that acts as an AWS S3 dashboard. This initial setup will include: 1. A simple Node.js/Express backend to interact with the AWS SDK. 2. A basic HTML/CSS/JavaScript frontend to display buckets and objects. **IMPORTANT SECURITY NOTE:** This example requires you to provide AWS credentials. For simplicity, it uses a `.env` file. **NEVER commit credentials directly into your code or version control.** In a real-world application, use more secure methods like AWS IAM roles, Cognito Identity Pools, or a dedicated secrets management service. { "name": "aws-s3-dashboard", "version": "1.0.0", "description": "Basic AWS S3 Dashboard", "main": "server.js", "scripts": { "start": "node server.js" }, "dependencies": { "aws-sdk": "^2.1641.0", "cors": "^2.8.5", "dotenv": "^16.4.5", "express": "^4.19.2" }, "engines": { "node": ">=18.0.0" } } # IMPORTANT: Replace with your actual AWS credentials and region # NEVER commit this file to version control! # For production, use more secure methods like IAM roles or Cognito. AWS_ACCESS_KEY_ID=YOUR_ACCESS_KEY_ID AWS_SECRET_ACCESS_KEY=YOUR_SECRET_ACCESS_KEY AWS_REGION=us-east-1 require('dotenv').config(); const express = require('express'); const AWS = require('aws-sdk'); const path = require('path'); const cors = require('cors'); // Import cors const app = express(); const port = 3000; // --- AWS Configuration --- // WARNING: Ensure credentials are configured securely, not hardcoded for production. // Reads from .env file or environment variables AWS.config.update({ accessKeyId: process.env.AWS_ACCESS_KEY_ID, secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, region: process.env.AWS_REGION }); const s3 = new AWS.S3(); // --- Middleware --- app.use(cors()); // Enable CORS for all origins (adjust for production) app.use(express.json()); // For parsing application/json app.use(express.static(path.join(__dirname, 'public'))); // Serve static files // --- API Routes --- // List Buckets app.get('/api/buckets', async (req, res) => { console.log(`Received request for /api/buckets`); try { const data = await s3.listBuckets().promise(); console.log('Successfully listed buckets:', data.Buckets); res.json(data.Buckets || []); } catch (err) { console.error("Error listing buckets:", err); res.status(500).json({ error: 'Failed to list buckets', details: err.message }); } }); // List Objects in a Bucket app.get('/api/objects', async (req, res) => { const bucketName = req.query.bucket; console.log(`Received request for /api/objects?bucket=${bucketName}`); if (!bucketName) { return res.status(400).json({ error: 'Bucket name query parameter is required' }); } const params = { Bucket: bucketName }; try { const data = await s3.listObjectsV2(params).promise(); console.log(`Successfully listed objects for bucket ${bucketName}:`, data.Contents); res.json(data.Contents || []); } catch (err) { console.error(`Error listing objects for bucket ${bucketName}:`, err); // Provide more specific error messages if possible if (err.code === 'NoSuchBucket') { res.status(404).json({ error: `Bucket not found: ${bucketName}`, details: err.message }); } else if (err.code === 'AccessDenied') { res.status(403).json({ error: `Access denied for bucket: ${bucketName}`, details: err.message }); } else { res.status(500).json({ error: `Failed to list objects in bucket ${bucketName}`, details: err.message }); } } }); // --- Serve Frontend --- // Fallback to index.html for single-page application routing (optional) app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'public', 'index.html')); }); // --- Start Server --- app.listen(port, () => { console.log(`Server listening at http://localhost:${port}`); console.log(`AWS Region: ${AWS.config.region}`); if (!process.env.AWS_ACCESS_KEY_ID || !process.env.AWS_SECRET_ACCESS_KEY) { console.warn('WARNING: AWS credentials not found in environment variables or .env file. API calls will likely fail.'); } else { console.log('AWS Access Key ID found (ending with): ...' + process.env.AWS_ACCESS_KEY_ID.slice(-4)); } }); S3 Dashboard

AWS S3 Dashboard

Buckets

Loading buckets...

Objects (Select a bucket)

body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; } h1, h2 { color: #333; } .container { display: flex; gap: 20px; } .panel { background-color: #fff; padding: 15px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex: 1; min-width: 250px; max-height: 70vh; /* Limit height */ overflow-y: auto; /* Add scrollbar if content overflows */ } ul { list-style: none; padding: 0; } li { padding: 8px; border-bottom: 1px solid #eee; cursor: default; /* Default cursor */ } li.bucket-item { cursor: pointer; /* Pointer only for buckets */ transition: background-color 0.2s ease; } li.bucket-item:hover { background-color: #e9e9e9; } li:last-child { border-bottom: none; } .object-details { font-size: 0.8em; color: #666; margin-left: 10px; } #object-list li { display: flex; justify-content: space-between; align-items: center; } document.addEventListener('DOMContentLoaded', () => { const bucketList = document.getElementById('bucket-list'); const objectList = document.getElementById('object-list'); const objectsTitle = document.getElementById('objects-title'); const API_BASE_URL = ''; // Assuming backend runs on the same origin // --- Helper Functions --- function clearList(ulElement, message = '') { ulElement.innerHTML = message ? `

${message}

` : ''; } function displayError(element, action, error) { console.error(`Error ${action}:`, error); let errorMessage = `Error ${action}.`; if (error && error.message) { errorMessage += ` ${error.message}`; } else if (typeof error === 'string') { errorMessage += ` ${error}`; } // Check if element is a list or a general container if (element.tagName === 'UL') { clearList(element, `

${errorMessage}

`); } else { element.innerHTML = `

${errorMessage}

`; } } // --- Fetch and Display Buckets --- async function fetchBuckets() { clearList(bucketList, '

Loading buckets...

'); try { const response = await fetch(`${API_BASE_URL}/api/buckets`); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.details || `HTTP error! status: ${response.status}`); } const buckets = await response.json(); clearList(bucketList); // Clear loading message if (buckets.length === 0) { clearList(bucketList, '

No buckets found.

'); return; } buckets.forEach(bucket => { const li = document.createElement('li'); li.textContent = bucket.Name; li.classList.add('bucket-item'); // Add class for styling/event handling li.dataset.bucketName = bucket.Name; // Store bucket name li.addEventListener('click', () => fetchObjects(bucket.Name)); bucketList.appendChild(li); }); } catch (error) { displayError(bucketList, 'loading buckets', error); } } // --- Fetch and Display Objects --- async function fetchObjects(bucketName) { objectsTitle.textContent = `Objects in ${bucketName}`; clearList(objectList, '

Loading objects...

'); // Highlight selected bucket (optional) document.querySelectorAll('#bucket-list li').forEach(li => { li.style.fontWeight = li.dataset.bucketName === bucketName ? 'bold' : 'normal'; }); try { const response = await fetch(`${API_BASE_URL}/api/objects?bucket=${encodeURIComponent(bucketName)}`); if (!response.ok) { let errorData; try { errorData = await response.json(); } catch (e) { // Handle cases where the response is not JSON errorData = { details: `Server returned status ${response.status}` }; } throw new Error(errorData.details || `HTTP error! status: ${response.status}`); } const objects = await response.json(); clearList(objectList); // Clear loading/error message if (objects.length === 0) { clearList(objectList, '

No objects found in this bucket.

'); return; } objects.forEach(obj => { const li = document.createElement('li'); const nameSpan = document.createElement('span'); const detailsSpan = document.createElement('span'); nameSpan.textContent = obj.Key; detailsSpan.textContent = `(${(obj.Size / 1024).toFixed(2)} KB, ${new Date(obj.LastModified).toLocaleDateString()})`; detailsSpan.classList.add('object-details'); li.appendChild(nameSpan); li.appendChild(detailsSpan); objectList.appendChild(li); }); } catch (error) { displayError(objectList, `loading objects for ${bucketName}`, error); objectsTitle.textContent = `Objects (Error)`; // Update title on error } } // --- Initial Load --- fetchBuckets(); }); **To run this:** 1. **IMPORTANT:** Edit the `.env` file and replace the placeholder values with your actual AWS Access Key ID, Secret Access Key, and desired AWS Region. Remember the security warning above. 2. Install dependencies: `npm install` 3. Start the server: `npm start` The server will start, and you can access the basic S3 dashboard in the preview window. It will list your buckets, and clicking a bucket name will list the objects within it.