readme added
This commit is contained in:
221
README.md
Normal file
221
README.md
Normal file
@@ -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 <user> and <server-ip> with your server details
|
||||||
|
scp -r backend/* <user>@<server-ip>:/var/www/musicportfolio.keshavanand.net/backend/
|
||||||
|
```
|
||||||
|
|
||||||
|
### Copy Frontend Build
|
||||||
|
|
||||||
|
```bash
|
||||||
|
scp -r frontend/dist/* <user>@<server-ip>:/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.
|
||||||
Reference in New Issue
Block a user