Skip to content

Latest commit

 

History

History
72 lines (47 loc) · 3.03 KB

spotify-setup-guide.md

File metadata and controls

72 lines (47 loc) · 3.03 KB
Raw

Setup Guide

Guide by JoshLmao

Part 1: Vercel & Deploy

Setup with a click of a button 😉

Deploy to Vercel

  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 natemoo-re's original repo, or joshlmao's now-playing-profile repo 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/JoshLmao/now-playing-profile"

  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 "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:

SPOTIFY_CLIENT_ID=1234567890
SPOTIFY_CLIENT_SECRET=1234567890
  1. Next, we need to retrieve a Refresh Token through Authoration Code flow.

There is a node script, generateRefreshToken.js to get this for you. Run the following commands:

npm install
node ./generateRefreshToken.js # You will be asked to login to your spotify account

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

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

  1. 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"

  2. 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?open">
    <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!