This project is created purely for educational purposes. It should not be used to download music without proper ownership or rights. Please respect copyright laws and support artists by purchasing their music through official channels.
A web-based frontend for SpotDL, allowing you to download Spotify tracks through a user-friendly interface.
- Web-based interface for SpotDL
- Real-time download progress
- Configurable download settings
- Automatic M3U playlist generation for downloaded playlists
- Docker support for easy deployment
- Download the docker-compose.yml file:
curl -o docker-compose.yml https://raw.githubusercontent.com/tanc/SpotDL-Frontend/main/docker-compose.yml.example- Edit the docker-compose.yml file to configure your paths:
# Only the frontend port needs to be exposed
ports:
- "5173:5173" # Frontend - change first number to use different host port
# Configure volume paths
volumes:
- ./downloads:/downloads # Can keep as is for local downloads
- /path/to/your/music:/music # Change this to your music library path
- ./config:/app/backend/config # Can keep as is for local configNote: The backend runs inside the container and communicates with the frontend internally, so it doesn't need to be exposed to the host machine.
- Create the necessary directories (if you haven't changed the paths above):
mkdir -p downloads config- Start the container:
docker compose up -dThe application will be available at:
- Frontend: http://localhost:5173 (or your custom port)
NODE_ENV: Set toproductionfor production mode ordevelopmentfor development modeUSER_ID: User ID for file permissions (defaults to 1000)GROUP_ID: Group ID for file permissions (defaults to 1000)
If you prefer using docker run directly:
# Create necessary directories
mkdir -p downloads config
# Run the container
docker run -d \
-p 5173:5173 \
-v $(pwd)/downloads:/downloads \
-v $(pwd)/config:/app/backend/config \
-v /path/to/your/music:/music \
-e NODE_ENV=production \
-e USER_ID=$(id -u) \
-e GROUP_ID=$(id -g) \
ghcr.io/tanc/spotdl_frontend:latestThe project uses several important volume mounts:
-
./downloads:/downloads- Where downloaded songs are temporarily stored
- Should be persistent between container restarts
- Used for in-progress downloads
-
/path/to/your/music:/music- The final destination for downloaded music
- Should point to your music library
- Persists your music collection
-
./config:/app/backend/config- Stores application configuration
- Persists settings between container restarts
-
/app/node_modulesand/app/backend/node_modules- Anonymous volumes for node_modules
- Prevents overwriting container dependencies with local ones
- Ensures consistent dependencies in the container
To run in development mode:
- Set
NODE_ENV=developmentin your docker-compose.yml - Start the container with:
docker compose upIn development mode, the application will:
- Enable hot-reloading
- Show detailed error messages
- Mount source directories for live editing
For production deployment:
- Ensure
NODE_ENV=productionin your docker-compose.yml - Start the container with:
docker compose up -dProduction mode provides:
- Optimized builds
- Minimized logging
- Better performance
If you encounter permission issues with the mounted volumes:
- Ensure USER_ID and GROUP_ID match your host system's user
- Check the permissions of your mounted directories
- Restart the container after changing permissions
If you see port binding errors:
- Check if ports 5173 is already in use
- Modify the port mappings in docker-compose.yml if needed