From 86f3dc9cfba44af2fc3147bd3ca70bf6b1166041 Mon Sep 17 00:00:00 2001 From: KeshavAnandCode Date: Sat, 6 Dec 2025 20:59:08 -0600 Subject: [PATCH] readme added --- README.md | 221 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 221 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..fa3058e --- /dev/null +++ b/README.md @@ -0,0 +1,221 @@ +# Music Portfolio + +This project hosts a music portfolio with a **Node.js backend** serving music files and a **React frontend** displaying tracks. This guide explains how to run everything locally, convert music files to MP3, transfer files to your server, and set up the server with Nginx and SSL. + +--- + +## Table of Contents + +1. [Prerequisites](#prerequisites) +2. [Local Setup](#local-setup) +3. [Convert Music to MP3](#convert-music-to-mp3) +4. [Deploy to Server](#deploy-to-server) +5. [Server Setup](#server-setup) +6. [Nginx Configuration](#nginx-configuration) + +--- + +## Prerequisites + +* Node.js (v18+ recommended) +* npm / yarn +* Python3 + pip +* `pydub` Python library (for conversion) +* `ffmpeg` installed on both local and server machines + +Install Python dependencies: + +```bash +pip install pydub +``` + +Install Node dependencies in backend and frontend: + +```bash +cd backend +npm install + +cd ../frontend +npm install +npm run build +``` + +--- + +## Local Setup + +### Backend + +```bash +cd backend +node server.js +``` + +By default, the backend runs at: + +``` +http://localhost:3001 +``` + +### Frontend + +```bash +cd frontend +npm start +``` + +By default, the frontend runs at: + +``` +http://localhost:3000 +``` + +--- + +## Convert Music to MP3 + +All music files must be in the `backend/music` folder. The project includes a Python script: + +```bash +cd backend +python3 convert-to-mp3.py +``` + +This will: + +* Convert `.flac`, `.wav`, `.m4a`, `.ogg` files to `.mp3` +* Delete the original files +* Keep the same filename but with `.mp3` extension + +--- + +## Deploy to Server + +### Copy Backend & Music Files + +```bash +# Replace and with your server details +scp -r backend/* @:/var/www/musicportfolio.keshavanand.net/backend/ +``` + +### Copy Frontend Build + +```bash +scp -r frontend/dist/* @:/var/www/musicportfolio.keshavanand.net/frontend/dist/ +``` + +--- + +## Server Setup + +### 1. Backend as a systemd service + +Create `/etc/systemd/system/music-portfolio-backend.service`: + +```ini +[Unit] +Description=Music Portfolio Backend +After=network.target + +[Service] +User=www-data +WorkingDirectory=/var/www/musicportfolio.keshavanand.net/backend +ExecStart=/usr/bin/node server.js +Restart=always +Environment=PORT=3001 + +[Install] +WantedBy=multi-user.target +``` + +Enable and start: + +```bash +sudo systemctl daemon-reload +sudo systemctl enable music-portfolio-backend +sudo systemctl start music-portfolio-backend +sudo systemctl status music-portfolio-backend +``` + +--- + +### 2. Nginx Configuration + +Create `/etc/nginx/sites-available/musicportfolio.keshavanand.net`: + +```nginx +server { + server_name musicportfolio.keshavanand.net www.musicportfolio.keshavanand.net; + + root /var/www/musicportfolio.keshavanand.net/frontend/dist; + index index.html; + + location / { + try_files $uri /index.html; + } + + location /api/ { + proxy_pass http://localhost:3001; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + } + + location /music/ { + alias /var/www/musicportfolio.keshavanand.net/backend/music/; + autoindex off; + types { + audio/mpeg mp3; + audio/wav wav; + } + } + + listen 443 ssl; # managed by Certbot + ssl_certificate /etc/letsencrypt/live/musicportfolio.keshavanand.net/fullchain.pem; + ssl_certificate_key /etc/letsencrypt/live/musicportfolio.keshavanand.net/privkey.pem; + include /etc/letsencrypt/options-ssl-nginx.conf; + ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; +} + +server { + listen 80; + server_name musicportfolio.keshavanand.net www.musicportfolio.keshavanand.net; + return 301 https://$host$request_uri; +} +``` + +Enable site and reload: + +```bash +sudo ln -s /etc/nginx/sites-available/musicportfolio.keshavanand.net /etc/nginx/sites-enabled/ +sudo nginx -t +sudo systemctl reload nginx +``` + +--- + +### 3. SSL with Certbot + +```bash +sudo apt install certbot python3-certbot-nginx +sudo certbot --nginx -d musicportfolio.keshavanand.net -d www.musicportfolio.keshavanand.net +``` + +--- + +### 4. Permissions + +Ensure the backend can read/write files: + +```bash +sudo chown -R www-data:www-data /var/www/musicportfolio.keshavanand.net +``` + +--- + +## Notes + +* Make sure the backend is running before loading the frontend. +* Frontend calls `/api/tracks` to fetch metadata. +* All music files must be in `.mp3` format for consistent browser support. +* Clear browser cache if changes aren’t reflected immediately.