Self-Hosted Dashboard Homepage for Homelab Services

Expected Outcome

A functional dashboard homepage that displays the status of various homelab services with live updates and links for maintenance tasks.

Assumptions

• Basic understanding of Docker and Docker Compose
• A running homelab environment with services to monitor
• Access to a web server or a local machine to host the dashboard

Bill of Materials

• Docker
• Docker Compose
• Node.js (for dashboard development)
• Nginx (for reverse proxy setup)

Build Steps

1. Set up the project directory

   Create a directory for your dashboard project and navigate into it.

   Example pattern only. Adjust for your environment before running.

   mkdir homelab-dashboard
   cd homelab-dashboard

2. Create a Docker Compose file

   Create a docker-compose.yml file to define the services needed for the dashboard.

   Safe to run: read-only

   echo 'version: "3.8"' > docker-compose.yml
   echo 'services:' >> docker-compose.yml
   echo '  dashboard:' >> docker-compose.yml
   echo '    image: node:14' >> docker-compose.yml
   echo '    volumes:' >> docker-compose.yml
   echo '      - ./app:/app' >> docker-compose.yml
   echo '    working_dir: /app' >> docker-compose.yml
   echo '    command: npm start' >> docker-compose.yml
   echo '    ports:' >> docker-compose.yml
   echo '      - "3000:3000"' >> docker-compose.yml

3. Develop the dashboard application

   Create a simple Node.js application that fetches the status of your services and serves the dashboard.

   Safe to run: read-only

   mkdir app
   cd app
   npm init -y
   npm install express axios

4. Create the dashboard logic

   Write the logic to fetch service statuses and render them on the dashboard.

   Example pattern only. Adjust for your environment before running.

   echo 'const express = require("express");' > index.js
   echo 'const axios = require("axios");' >> index.js
   echo 'const app = express();' >> index.js
   echo 'app.get("/status", async (req, res) => {' >> index.js
   echo '  // Fetch service statuses here' >> index.js
   echo '});' >> index.js
   echo 'app.listen(3000, () => console.log("Dashboard running on port 3000"));' >> index.js

5. Run the dashboard

   Use Docker Compose to build and run your dashboard application.

   Changes system state: review before running

   cd ..
   docker-compose up -d

6. Set up Nginx as a reverse proxy

   Configure Nginx to route traffic to your dashboard application.

   Changes system state: review before running

   sudo apt-get install nginx
   echo 'server {' | sudo tee /etc/nginx/sites-available/dashboard
   echo '    listen 80;' | sudo tee -a /etc/nginx/sites-available/dashboard
   echo '    server_name your_domain_or_ip;' | sudo tee -a /etc/nginx/sites-available/dashboard
   echo '    location / {' | sudo tee -a /etc/nginx/sites-available/dashboard
   echo '        proxy_pass http://localhost:3000;' | sudo tee -a /etc/nginx/sites-available/dashboard
   echo '    }' | sudo tee -a /etc/nginx/sites-available/dashboard
   echo '}' | sudo tee -a /etc/nginx/sites-available/dashboard
   sudo ln -s /etc/nginx/sites-available/dashboard /etc/nginx/sites-enabled/
   sudo systemctl restart nginx

Validation

• Access the dashboard by navigating to http://your_domain_or_ip in a web browser.
• Check that the status tiles reflect the current state of your homelab services.

Troubleshooting

• If the dashboard does not load, check the Docker container logs using 'docker-compose logs'.
• Ensure that Nginx is running and properly configured by checking 'sudo nginx -t'.

Cleanup or Rollback

• To stop the dashboard, run 'docker-compose down'.
• Remove the Nginx configuration with 'sudo rm /etc/nginx/sites-enabled/dashboard' and restart Nginx.

Next Improvements

• Customize the dashboard with additional services and maintenance links.
• Consider adding authentication to secure access to the dashboard.