setup-guide.md

Setup Guide

Guide by JoshLmao

Part 1: Vercel & Deploy

Setup with a click of a button 😉

1. Sign up or Sign in to use Vercel for hosting the repo. You could use another service like Heroku but this guide will use Vercel
2. Fork spotify-now-playing-widget which is just a skeleton repo that contains the Spotify Now Playing specific features
3. Go to your Vercel dashboard and select Import Project
4. Paste the Git url of your forked repo. For example "https://github.com/manjillama/spotify-now-playing-widget"
5. Leave the remaining settings for now and click 'Deploy'

Part 2: Configure Environment Vars

1. Navigate to Spotify Dashboard and create a new app.

2. Click, edit settings and add "https://localhost:3000/callback" to the "Redirect URIs" section

3. Next, we need to do a Authoration Code flow auth request to retrieve a Refresh Token.

   • Replace "MY_CLIENT_ID" in the following url with your Client ID from your Spotify Dashboard and paste the url in your browser. Your client id and secret id can be found in your dashboard, pic below

   • https://accounts.spotify.com/authorize?client_id=MY_CLIENT_ID&response_type=code&redirect_uri=https%3A%2F%2Flocalhost%3A3000%2Fcallback&scope=user-read-playback-state%20user-read-currently-playing

   • Once done, you will get a blank page with a different url which is like "https://localhost:3000/callback?code=MY_CODE"

   • Next, navigate to Base64Encode and insert your client id and secret id separated with a colon. For example, "CLIENT_ID:SECRET_ID"

   • Then, insert your base 64 encoded string and code from the previous steps in the following command and press enter to run.

     curl -H "Authorization: Basic MY_BASE_64_STRING" -d grant_type=authorization_code -d code=MY_SPOTIFY_CODE -d redirect_uri=https%3A%2F%2Flocalhost%3A3000%2Fcallback https://accounts.spotify.com/api/token

     

   • Once done correctly, you will get JSON which contains your refresh token, shown in the blue box in the image above. Take out the refresh token, blocked out in green above, and save it somewhere

4. Navigate to your deployment on Vercel and click on Settings, then click on "Environment Variables"

5. 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
   

6. Once done, navigate to one of your deployment url's and place "/now-playing" at the end. For example, "https://spotify-now-playing-widget.vercel.app/api/now-playing"

7. Replace "MY_VERCEL_DEPLOYMENT_URL" in the following code with one of your deployment url's and insert it into any ReadMe.md

   <a href="https://MY_VERCEL_DEPLOYMENT_URL/now-playing">
       <img src="https://MY_VERCEL_DEPLOYMENT_URL/now-playing" width="256" height="64" alt="Now Playing">`
   </a>
   

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!