View the lyrics of the current playing Spotify song in your browser
Currently, Node 17 and above is the only dependency.
npm install
to install dependenciescp .env.example .env
(or copy
for Windows) and populate .env
SPOTIFY_CLIENT_ID
and SPOTIFY_CLIENT_SECRET
can be obtained by making a new Spotify application
SERVER_SESSION_KEYS
is random text used to sign & verify cookie values (use spaces to separate)GENIUS_ACCESS_TOKEN
can be obtained by creating a new API client (optional - if this is not provided, Genius will not be used as a backup to lrclib.net)npm run build
to build the servercd client
to change directories to the client projectnpm install
to install dependenciescp .env.example .env
(or copy
for Windows)npm run build
to build the client (the server will host these built files)cd ..
npm start
to start the serverThe client will use the REACT_APP_API_ROOT
environment variable value to decide where to send requests. If this is not provided, the current hosted URL will be used.
npm run dev
can be used for development of the server; this allows for hot-reloading. Running the client using npm start
and setting REACT_APP_API_ROOT
on the client to where the server is running will allow for a development setup with hot-reloading.
The "Debug Server" launch configuration in vs code can be used to debug the server
When running the server locally, HTTPS needs to be setup due to the use of Secure=true on cookies (due to SameSite="none"). The server will look for server.cert
and server.key
in the current working directory to use for SSL. When first setting up the server, do the following:
server.cert
and server.key
by execute openssl req -nodes -new -x509 -keyout server.key -out server.cert
in the root directory.npm run dev
in the root directory.https://localhost:5000/
and click "Advanced" -> "Proceed to localhost (unsafe)", this solves ERR_CERT_AUTHORITY_INVALID for development.I often get curious of what the lyrics of the current playing song is. I use Spotify a lot so having somewhere where I could login and it immediately provide the lyrics of the current playing song would be very helpful and save a lot of time.
Spotify has added lyrics back into their application, but if you don't have access to their app and do have access to a web-browser, this can be used to view lyrics.
The backend can be deployed on any host with Node.js. The frontend can be hosted on any web server that can serve static files (like GitHub Pages).
If you are not hosting the application at the root path, for example https://www.example.com/my-app
, some extra config needs to be set:
CLIENT_DEPLOYMENT_SUBDIRECTORY
.REACT_APP_BASENAME
and PUBLIC_URL
.