music-portfolio/README.md

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
2. Local Setup
3. Convert Music to MP3
4. Deploy to Server
5. Server Setup
6. 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:

pip install pydub

Install Node dependencies in backend and frontend:

cd backend
npm install

cd ../frontend
npm install
npm run build

---

Local Setup

Backend

cd backend
node server.js

By default, the backend runs at:

http://localhost:3001

Frontend

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:

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

# Replace <user> and <server-ip> with your server details
scp -r backend/* <user>@<server-ip>:/var/www/musicportfolio.keshavanand.net/backend/

Copy Frontend Build

scp -r frontend/* <user>@<server-ip>:/var/www/musicportfolio.keshavanand.net/frontend/

---

Server Setup

1. Backend as a systemd service

Create /etc/systemd/system/music-portfolio-backend.service:

[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:

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:

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:

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

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:

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.