sketchferret/HomeBase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add frontend components and API for system status display
Some checks failed
Deploy to BeePC / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Spencer
2026-02-05 11:02:05 -05:00
parent 8a1409b3d6
commit ea6cc3fc85
7 changed files with 327 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Dockerfile
View File

@@ -8,6 +8,9 @@ RUN npm install --omit=dev
COPY . . COPY . .
# Ensure proper permissions for node user
RUN chown -R node:node /app
EXPOSE 3001 EXPOSE 3001
USER node USER node

34
public/app.js Normal file
View File

@@ -0,0 +1,34 @@
// Fetch and display system status
async function loadStatus() {
try {
const response = await fetch('/api/status');
const data = await response.json();
// Update status message
const statusEl = document.getElementById('status-message');
statusEl.textContent = data.message;
statusEl.classList.remove('loading');
statusEl.classList.add('healthy');
// Update timestamp
const timestamp = new Date(data.timestamp);
document.getElementById('status-timestamp').textContent =
`Last updated: ${timestamp.toLocaleString()}`;
// Update domain
document.getElementById('domain').textContent = data.domain;
// Update version
document.getElementById('version').textContent = data.version;
} catch (error) {
console.error('Error loading status:', error);
document.getElementById('status-message').textContent = 'Error loading status';
document.getElementById('status-message').classList.remove('loading');
}
}
// Load status on page load
document.addEventListener('DOMContentLoaded', loadStatus);
// Refresh status every 30 seconds
setInterval(loadStatus, 30000);

8
public/favicon.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect width="32" height="32" fill="#1a1a1a"/>
<rect x="4" y="4" width="24" height="24" fill="none" stroke="#4a9eff" stroke-width="2" rx="2"/>
<circle cx="10" cy="10" r="2" fill="#4a9eff"/>
<circle cx="22" cy="10" r="2" fill="#4caf50"/>
<circle cx="10" cy="22" r="2" fill="#4caf50"/>
<circle cx="22" cy="22" r="2" fill="#4a9eff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 410 B

48
public/index.html Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HomeBase</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<div class="container">
<header>
<h1>HomeBase</h1>
<p class="subtitle">Home automation hub</p>
</header>
<main>
<section class="status-section">
<h2>System Status</h2>
<div class="status-card">
<p id="status-message" class="loading">Loading...</p>
<p id="status-timestamp" class="timestamp"></p>
</div>
</section>
<section class="info-section">
<h2>Information</h2>
<div class="info-grid">
<div class="info-card">
<h3>Version</h3>
<p id="version">1.0.0</p>
</div>
<div class="info-card">
<h3>Domain</h3>
<p id="domain">Loading...</p>
</div>
</div>
</section>
</main>
<footer>
<p>&copy; 2026 HomeBase. All rights reserved.</p>
</footer>
</div>
<script src="/app.js"></script>
</body>
</html>

176
public/styles.css Normal file
View File

@@ -0,0 +1,176 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #1a1a1a;
--bg-secondary: #2d2d2d;
--bg-tertiary: #3d3d3d;
--text-primary: #e0e0e0;
--text-secondary: #b0b0b0;
--accent: #4a9eff;
--accent-hover: #5aafff;
--success: #4caf50;
--border: #404040;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
}
header {
text-align: center;
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 2px solid var(--border);
}
header h1 {
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 0.5rem;
font-weight: 700;
}
.subtitle {
color: var(--text-secondary);
font-size: 1.1rem;
font-weight: 300;
}
main {
flex-grow: 1;
}
section {
margin-bottom: 3rem;
}
section h2 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
color: var(--text-primary);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
.status-card,
.info-card {
background-color: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
transition: all 0.3s ease;
}
.status-card:hover,
.info-card:hover {
background-color: var(--bg-tertiary);
border-color: var(--accent);
}
.status-card {
margin-bottom: 1rem;
}
#status-message {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
#status-message.loading {
color: var(--accent);
}
#status-message.healthy {
color: var(--success);
}
.timestamp {
color: var(--text-secondary);
font-size: 0.9rem;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.info-card {
text-align: center;
}
.info-card h3 {
color: var(--accent);
margin-bottom: 0.75rem;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.info-card p {
color: var(--text-primary);
font-size: 1.3rem;
font-weight: 500;
}
footer {
text-align: center;
padding-top: 2rem;
margin-top: auto;
border-top: 1px solid var(--border);
color: var(--text-secondary);
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 768px) {
header h1 {
font-size: 2rem;
}
.container {
padding: 1rem;
}
section h2 {
font-size: 1.4rem;
}
.info-grid {
grid-template-columns: 1fr;
}
}
/* Animations */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.loading {
animation: pulse 1.5s ease-in-out infinite;
}

88
scripts/deploy.ps1
View File

@@ -7,19 +7,19 @@ $REMOTE_USER = "spencer"
$REMOTE_HOST = "beepc" $REMOTE_HOST = "beepc"
$REMOTE_DIR = "/home/spencer/homebase" $REMOTE_DIR = "/home/spencer/homebase"
Write-Host "🚀 Starting deployment to $REMOTE_USER@$REMOTE_HOST..." -ForegroundColor Cyan Write-Host "[>>] Starting deployment to $REMOTE_USER@$REMOTE_HOST..." -ForegroundColor Cyan
# Create remote directory # Create remote directory
Write-Host "📁 Ensuring remote directory exists..." -ForegroundColor Yellow Write-Host "[*] Ensuring remote directory exists..." -ForegroundColor Yellow
ssh $REMOTE_USER@$REMOTE_HOST "mkdir -p $REMOTE_DIR" ssh $REMOTE_USER@$REMOTE_HOST "mkdir -p $REMOTE_DIR"
if ($LASTEXITCODE -ne 0) { if ($LASTEXITCODE -ne 0) {
Write-Host "❌ Failed to create remote directory" -ForegroundColor Red Write-Host "[!!] Failed to create remote directory" -ForegroundColor Red
exit 1 exit 1
} }
# Copy files to remote server # Copy files to remote server
Write-Host "📦 Copying files to remote server..." -ForegroundColor Yellow Write-Host "[*] Copying files to remote server..." -ForegroundColor Yellow
$files = @( $files = @(
"Dockerfile", "Dockerfile",
"docker-compose.yml", "docker-compose.yml",
@@ -33,50 +33,62 @@ foreach ($file in $files) {
Write-Host " Copying $file..." -ForegroundColor Gray Write-Host " Copying $file..." -ForegroundColor Gray
scp $file "${REMOTE_USER}@${REMOTE_HOST}:${REMOTE_DIR}/" scp $file "${REMOTE_USER}@${REMOTE_HOST}:${REMOTE_DIR}/"
if ($LASTEXITCODE -ne 0) { if ($LASTEXITCODE -ne 0) {
Write-Host "❌ Failed to copy $file" -ForegroundColor Red Write-Host "[!!] Failed to copy $file" -ForegroundColor Red
exit 1 exit 1
} }
} }
# Copy public folder recursively
Write-Host " Copying public folder..." -ForegroundColor Gray
scp -r "public" "${REMOTE_USER}@${REMOTE_HOST}:${REMOTE_DIR}/"
if ($LASTEXITCODE -ne 0) {
Write-Host "[!!] Failed to copy public folder" -ForegroundColor Red
exit 1
}
# Fix permissions on the remote server
Write-Host " Fixing permissions..." -ForegroundColor Gray
ssh $REMOTE_USER@$REMOTE_HOST "chmod -R 755 $REMOTE_DIR"
# Deploy and start the application # Deploy and start the application
Write-Host "🐳 Deploying application..." -ForegroundColor Yellow Write-Host "[*] Deploying application..." -ForegroundColor Yellow
$deployScript = @'
cd /home/spencer/homebase
echo "⏹️ Stopping existing container..." # Create the deployment script with proper Unix line endings
docker compose down 2>/dev/null || true $deployScript = "cd /home/spencer/homebase`n"
$deployScript += "`n"
echo "🔨 Building and starting container..." $deployScript += "echo '[*] Stopping existing container...'`n"
docker compose up -d --build $deployScript += "docker compose down 2>/dev/null || true`n"
$deployScript += "`n"
echo "⚙️ Setting up systemd service..." $deployScript += "echo '[*] Building and starting container...'`n"
sudo cp homebase.service /etc/systemd/system/homebase.service 2>/dev/null || echo "Note: Could not set up systemd service (may need manual setup)" $deployScript += "docker compose up -d --build`n"
sudo systemctl daemon-reload 2>/dev/null || true $deployScript += "`n"
sudo systemctl enable homebase.service 2>/dev/null || true $deployScript += "echo '[*] Setting up systemd service...'`n"
sudo systemctl start homebase.service 2>/dev/null || true $deployScript += "sudo cp homebase.service /etc/systemd/system/homebase.service 2>/dev/null || echo 'Note: Could not set up systemd service (may need manual setup)'`n"
$deployScript += "sudo systemctl daemon-reload 2>/dev/null || true`n"
echo "⏳ Waiting for container to start..." $deployScript += "sudo systemctl enable homebase.service 2>/dev/null || true`n"
sleep 5 $deployScript += "sudo systemctl start homebase.service 2>/dev/null || true`n"
$deployScript += "`n"
echo "✅ Checking container status..." $deployScript += "echo '[*] Waiting for container to start...'`n"
docker compose ps $deployScript += "sleep 5`n"
docker compose logs --tail=20 $deployScript += "`n"
$deployScript += "echo '[*] Checking container status...'`n"
if docker ps | grep -q homebase; then $deployScript += "docker compose ps`n"
echo "✅ Container is running!" $deployScript += "docker compose logs --tail=20`n"
exit 0 $deployScript += "`n"
else $deployScript += "if docker ps | grep -q homebase; then`n"
echo "❌ Container failed to start!" $deployScript += " echo '[OK] Container is running!'`n"
exit 1 $deployScript += " exit 0`n"
fi $deployScript += "else`n"
'@ $deployScript += " echo '[!!] Container failed to start!'`n"
$deployScript += " exit 1`n"
$deployScript += "fi`n"
ssh $REMOTE_USER@$REMOTE_HOST $deployScript ssh $REMOTE_USER@$REMOTE_HOST $deployScript
if ($LASTEXITCODE -eq 0) { if ($LASTEXITCODE -eq 0) {
Write-Host "✅ Deployment successful!" -ForegroundColor Green Write-Host "[OK] Deployment successful!" -ForegroundColor Green
Write-Host "🌐 App should be available at http://homebase.sketchferret.com" -ForegroundColor Cyan Write-Host "[>>] App should be available at http://homebase.sketchferret.com" -ForegroundColor Cyan
} else { } else {
Write-Host "❌ Deployment failed!" -ForegroundColor Red Write-Host "[!!] Deployment failed!" -ForegroundColor Red
exit 1 exit 1
} }

7
server.js
View File

@@ -1,9 +1,14 @@
const express = require('express'); const express = require('express');
const path = require('path');
const app = express(); const app = express();
const PORT = process.env.PORT || 3001; const PORT = process.env.PORT || 3001;
const DOMAIN = process.env.DOMAIN || 'homebase.sketchferret.com'; const DOMAIN = process.env.DOMAIN || 'homebase.sketchferret.com';
app.get('/', (req, res) => { // Serve static files from public folder
app.use(express.static(path.join(__dirname, 'public')));
// API endpoint
app.get('/api/status', (req, res) => {
res.json({ res.json({
message: 'HomeBase is running!', message: 'HomeBase is running!',
domain: DOMAIN, domain: DOMAIN,