View the lyrics of the current playing Spotify song in your browser.
๐: spotify-lyrics-viewer.nitratine.net
- Clone the repo.
- Setup the server
- Execute
npm install
to install dependencies - Execute
cp .env.example .env
(orcopy
for Windows) and populate.env
by replacing XXXXXX'sGENIUS_ACCESS_TOKEN
can be obtained by creating a new API clientSPOTIFY_CLIENT_ID
andSPOTIFY_CLIENT_SECRET
can be obtained by making a new Spotify applicationSERVER_SESSION_KEYS
is random text used to sign & verify cookie values (use spaces to separate)
- Execute
- Setup the client
cd client
to change directories to the client project- Execute
npm install
to install dependencies - Execute
cp .env.example .env
(orcopy
for Windows) - Execute
npm run build
to build the client (the server will host these built files) - Go back to the project root:
cd ..
- Execute
npm start
to start the server
When running the client in development mode using npm start
, the 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 also be used for development of the server; this allows for hot-reloading. Running the client using npm start
and setting REACT_APP_API_ROOT
to where the server is running will allow for a development setup with hot-reloading.
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:
- Generate
server.cert
andserver.key
by executeopenssl req -nodes -new -x509 -keyout server.key -out server.cert
in the root directory. - Start the server by executing
npm run dev
in the root directory. - Go to
https://localhost:5000/
and click "Advanced" -> "Proceed to localhost (unsafe)", this solves ERR_CERT_AUTHORITY_INVALID for development.
launch.json
offers the ability to connect and debug the the server when runningnpm run dev
.
- Spotify authorization (Authorization Code Flow) for current song identification
- GENIUS lyric fetching
- Tokens stored in a session-like object
- Session is in a cookie due to server restrictions
- Dark theme
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.