Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kevinfjiang/vercel_spotify
Spotify player for GitHub readmes (updated 2023)
https://github.com/kevinfjiang/vercel_spotify
spotify vercel
Last synced: about 1 month ago
JSON representation
Spotify player for GitHub readmes (updated 2023)
- Host: GitHub
- URL: https://github.com/kevinfjiang/vercel_spotify
- Owner: kevinfjiang
- License: mit
- Created: 2022-12-11T00:49:08.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-24T01:58:53.000Z (8 months ago)
- Last Synced: 2024-11-12T18:29:48.314Z (3 months ago)
- Topics: spotify, vercel
- Language: TypeScript
- Homepage: https://kevinfjiang.vercel.app/now-playing
- Size: 49.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Vercel Spotify
Using vercel to display most liked songs, used for my musichum final project and my README. My previous version was broken therefore I migrated to using NextJS, something vercel will always support because they recently acquired the framework. I've updated to NextJS 13 using the app router and API routes to return an svg. This is fully deployable, granted you follow the setup guide.
# Setup Guide
Guide by [JoshLmao](https://github.com/JoshLmao)
### Part 1: Vercel & Deploy
Setup with a click of a button 😉
[](https://vercel.com/import/project?template=https://github.com/kevinfjiang/vercel_spotify)
1. Sign up or Sign in to use [Vercel](https://vercel.com/) for hosting the repo.
2. Leave the remaining settings for now and click 'Deploy'
### Part 2: Configure Environment Vars
1. Navigate to [Spotify Dashboard](https://developer.spotify.com/dashboard/) and create a new app.
2. Click, edit settings and add "http://localhost:3000/callback" to the "Redirect URIs" section then save
3. Click 'SHOW CLIENT SECRET' under Client ID. Copy both Client ID and Client Secret and paste them into `.env` file in the root directory of this repository (create the file if it does not exist) like so:
```ini
SPOTIFY_CLIENT_ID=1234567890
SPOTIFY_CLIENT_SECRET=1234567890
```
5. Next, we need to retrieve a Refresh Token through [Authoration Code flow](https://developer.spotify.com/documentation/general/guides/authorization-guide/#authorization-code-flow).
There is a node script, `generate-refresh-token.js` to get this for you. Run the following commands:
```bash
npm install
node ./generate-refresh-token.js # You will be asked to login to your spotify account
```
6. Navigate to your deployment on Vercel and click on Settings, then click on "Environment Variables"
7. Insert the following Variable names and insert your values from the previous steps
```
Name: SPOTIFY_CLIENT_ID
Value: MY_CLIENT_ID
Name: SPOTIFY_CLIENT_SECRET
Value: MY_SECRET_ID
Name: SPOTIFY_REFRESH_TOKEN
Value: MY_REFRESH_TOKEN
```
8. Once done, navigate to one of your deployment url's and place "/now-playing" at the end. For example, "https://now-playing-joshlmao.vercel.app/now-playing"
9. Replace "MY_VERCEL_DEPLOYMENT_URL" in the following code with one of your deployment url's and insert it into any ReadMe.md
```
`
```
That's it! Below is an example of what it should look like. If you have any problems, make sure to re-read the instructions and follow them precisely!
Based off the spotify readme by https://github.com/natemoo-re/natemoo-re.
## Disclaimer
I'm not a javascript/typescript developer. Please feel free to open issues and suggest best practices!