Now Playing: A Quick Intro to Spotify's API with React

This is a quick intro to using Spotify's API wit Node and React.
Here's the finished code:
github.com/jon...
Here's The Medium Article that goes through the steps in this video:
/ now-playing-using-spot...
And here's where you can find all of the resources we used:
developer.spot...

[@barack_obama2074]

This is so real. I love when you were looking what was wrong with the page and it turned out to be a typo. Such a programmer moment

[@yash.0119]

This is exactly what I was looking for. You saved me weeks of trying to figure this out on my own. Thanks!

[@d0m2288]

Concise, intuitive, and informative. Thanks for taking the time to share dude.

[@abhisheksah]

anyone checking out this tutorial in 2021, the function for getting the current playing track is getMyCurrentPlayingTrack()

[@JonnyKalambay]

Thanks for that!

[@mikee1513]

Awesome video, thanks Jonny

[@Ay0Pat]

you dont know how much you just helped a beginner like me. Thank you very much! You should continue making more. i subbed

[@pstyrn1812]

Nice one thanks, now I am going to try live updates without a button and use more information from the response

[@abhijoshi1946]

This was a fantastic intro! Really helped with the authentication and logging into Spotify piece. Thank you!

[@howiemandealt]

Thanks! This is exactly what I was looking for!

[@SpencerColaco]

Thanks for the tutorial! I feel much more confident moving forward and building my Spotify applet. Cheers

[@JonnyKalambay]

That means a lot Spencer - thanks!

[@eladjosef4202]

Amazing guide ! Thanks!

[@dagobertduck3100]

very nice video, keep up the good work! i will def subscribe

[@jayeshsawant6734]

This was really a great head start and everything was clear and concise! Thanks for doing this intro.

[@AutoTeqTV]

For people tinkering and haven't really learned coding yet like myself, The following code replaces the original VAR for client_id and client_secret to pull it from another file in a higher directory as it is good practice to keep your secrets separate from codes even if in the backend In apps.js replace "VAR client_id" and "VAR client_secret" with the following. const config = require('../YOUR-NEW-FILENAME.js'); const credentials = require('../YOUR-NEW-FILENAME.js'); const client_id = YOUR-NEW-FILENAME.client_id; const client_secret = YOUR-NEW-FILENAME.client_secret; ---------------------------------------------------------------------------------------------------------------------------- This will be the lines of code in your new security file. module.exports = { client_id: 'YOUR-CLIENT-ID', client_secret: 'YOUR-CLIENT-SECRET' }; hope this helps others save time.

[@richardlu6706]

Very helpful, clear and concise intro. Thanks dude!

[@Lofausto66]

Very clear explanations, you should keep going with these cool tutorials!

[@aycanocal6506]

Great tutorial and easy to follow. I enjoyed trying this out. Thank you!

[@gabrielpeter4544]

simple and straightforward! Big Thanks

[@riklamers2753]

This was really helpful​! Thanks! Looking forward to your next tutorial, and what it might be covering! :)

[@KevinHoltabc]

amazing video, this set me up for my project very nicely :)

[@daveclydesdale6514]

Thanks so much for the video and article, I was really struggling to figure out the Spotify API and you helped me so much!

[@kaishajones]

Thank you for this video, and showing where everything goes. I'm trying to do this now. Cool video, just became a new subbie 🙏🏾❤️

[@sarchstar]

This is such a good tutorial! super easy to follow, you explain things really well.

[@tdsimpson]

Well done. Very good tutorial Jonny!

[@mindbound777]

this was a great tutorial. still up to date!!

[@MisterGorbatjov]

This is so awesome :-) Was searching for a way to learn react through a project, and this definitely helped my understanding of the framework - and the Spotify API :-)

[@JonnyKalambay]

I'm really glad this helped! Thank you for watching

[@boam9678]

Exactly what I needed, thanks a bunch!

[@adamhermansson6216]

Fantastic guide, my dude! Looking forward to more API tutorials. :) Cheers!

[@declansullivan498]

Thanks so much for this tutorial, really well done! Can't wait to expand off of this

[@JonnyKalambay]

Glad you liked it! Thanks for watching

[@devsCafe1980]

Thanks for the tutorial, was really awesome. Like to see more from you

[@makro5073]

Thank you so much, you were really clear about your process throughout the tutorial :)

[@JonnyKalambay]

Thank you, I'm glad you enjoyed it :)

[@kaeliflanagan5213]

Really great tutorial, much appreciated!!

[@alanbm94]

Thank you very much for this video, it helped me a lot to understand how to use the Spotify API

[@shanoonahs]

This video helped me so much with a project I'm working on.

[@dorpeled4768]

Thank you so much friend, this helped me a lot :)

[@GriffinBoyd]

Such an awesome tutorial!! Subscribed!

[@JonnyKalambay]

Thank you!

[@RogerThat902]

I'm late on this but cool video. You explain things well!

[@yongwooklee6247]

Thank you so much for your video!

[@eric2esca]

thanks for mentioning spotify-web-api-js made everything super easy. No need for ajax, axios, fetch etc and shows cleaner code

[@makImBeacher]

This video helped me out a lot and saved me hours. Is it possible for you to make a tutorial video as to how to logout by removing the access token or other methods? There aren't many useful resources about it online.

[@eidenblock]

Thank you very much! Well done.

[@GhOsTGaMingz]

Thank you !

[@EclipticalD]

Thanks for the tutorial man, very helpful :)

[@JonnyKalambay]

Thanks, glad you found it useful!

[@purplesomeone]

Hey thanks for your hard work! this was a great intro for me!

[@baptisterebours9330]

Thank you very very much it was so clear

[@christinejurewicz3057]

Great tutorial and explanations!!

[@JonnyKalambay]

Thanks Christine :)

[@stevenkveton2451]

Thank you for this!

[@262fabi]

Let's Goooo Great Video! Keep it up

[@timothywoldt8649]

Very cool sir!!

[@precisemotion3308]

Thanks so much dude!

[@love.ly.]

Thanks for this tutorial

[@yummiestbiscuit]

Thank you so much 💕

[@leorzeb]

good work

[@stevemackidd1249]

I had trouble getting the backend server to work properly. Turns out the code from Spotify's github includes a deprecated Buffer method. I had to change the line 85 and 129: headers: { 'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64')) } to: headers: { 'Authorization': 'Basic ' + (new Buffer.from(client_id + ':' + client_secret).toString('base64')) }

[@francoacosta6091]

Thanks a lot!!

[@THEAVISTER]

First and foremost, thanks for posting this awesome tutorial! I am currently at the last part of the tutorial where I am setting the state data regarding the track name and the image URL. Right now before I set the state, I am trying to log how the response object looks after getMyCurrentPlayingTrack() returns the promise. Right now though it is returning as undefined, and I am not sure why because it is setting the access token correctly and everything.

[@THEAVISTER]

Would love to get any insight as to why this could be happening, because the code, looks pretty much similar to what you have done in the tutorial. Here is a reference to a question on github from this very same tutorial hahaha. github.com/spotify/web-api-auth-examples/issues/42

[@keilabraden2141]

Also having the same issue -- were you able to figure things out?

[@THEAVISTER]

@@keilabraden2141 Hey! So it turns out that getMyCurrentPlayingTrack() will return an empty promise if you are inactive on Spotify for a while, if you are playing a track and you call it, it should work. I would suggest using the call getMyRecentlyPlayedTracks(), which returns a list of 20 objects represent the 20 tracks you played recently. This call shouldn't give you an empty promise

[@ingmarkieferle2293]

Thanks! Thanks! Thanks!

[@Rmiller07]

Thanks!! Great video, just wish the volume wasn't so low.

[@jamesgibbs5577]

sick tutorial!

[@TommyChelios]

Hello Jonny! Thanks for the tutorial! Quick question (I apologize if this has already been answered): Can you render the data from a public playlist on a page without authorization?

[@anonimul3379]

great video

[@yanathelama1]

Thanks so much for such a great tutorial! Moving forward though, how do you generalize this to work for any users that can log in (instead of hardcoding your own client id and client secret)??

[@anirbanchakraborty690]

hey, why am i getting this error 'Unhandled Rejection (TypeError): Cannot read property 'name' of undefined' , my backend and frontend both are running fine, accesstoken is also being generated and passed on through the URI.

[@CelalettinErbulut]

very goog bro

[@iamsh4r106]

I was motivated to make a player application, only to be discouraged by the fact that premium is required :( Great tutorial though, I learnt quite a bit

[@behindthescenex]

Mr.jonny thank you so much for your tutorials, and yes i enjoyed it :) Sorry but i didnt familiar with javascript framework yet. If you would, could make an tutor example how to use the spotify web api just with plain javascript ? I really want to learn how to use the api for my final task. Thank you so much before :))

[@JonnyKalambay]

Hi Joe, I know it's been a while since you asked this question. Thank you for the suggestion - I've been trying to make more tutorials that use plain Javascript lately, instead of frameworks

[@tonphan2446]

When I click Check Now, the browser errors (Do not accept rejection (TypeError): Unable to read attribute 'name' unknown) I get the code right at your github.

[@kennystanleyjr]

I'm getting the same thing. Followed the instructions straight off the readme and everything.

[@brycekilker4754]

Fantastic video!

[@hogdoctor2079]

Pretty new to all of this. I was wondering if it is possible to to only use one server instead of two? I see that you used two different ports, 3000 and 8888, and I was wondering if it was possible to achieve the same results using only one port and only one localhost?

[@patrykk755]

Hi! Tutorial is great. Everything works fine - it was my first time with some API. Unfortunately it work locally, but dont now how to deploy it. I have both my app and web-api-auth on github and I do deploy using netlify, but after deploy Netifly inform me that web-api-auth page is not found. Can somebody help?

[@richardguerre3475]

When deploying, you need to set up your login button (on client app) to redirect to your web-api-auth URL, which will be on netlify (which is something like [include_api_project_name].netlify.com) instead of localhost:8888/. And when redirecting back to the client app (after user logs in), you need to set it up to redirect to [include_client_project_name].netlify.com instead of localhost:3000/.

[@patrykk755]

@@richardguerre3475 Hi, I understand that, but after deploy on netlify, when I click preview, I just see "Page Not Found Looks like you've followed a broken link or entered a URL that doesn't exist on this site. Back to our site" On my computer I see correctly displayed website, on Netlify - Page Not Found .

[@patrykk755]

This is link to my netlify: app.netlify.com/sites/dreamy-brown-178c8a/overview

[@umitao]

I have been interested in programming all my life but never have written a line of JS code myself so far, but thanks to the Spotify template, first I got to the profile page, and by reading Spotify Devs page, the code, and replicating it, I did what you did in the index.html. After I was done, I started thinking, I need to do this with React and refresh it every minute to show what I'm listening to on a webpage. The next day I saw your video and you made it look very easy, so kudos to you here. What do you think? Would I have problems with the access token? Is it possible to wrap this in a component on a public webpage?

[@believelody5531]

Awesome tut John, you really helped me! I noticed the access token expires after 1 hour approximatively. How can I do to use spotify api permanently or refresh token without login every time?

[@JonnyKalambay]

Believe Lody I'm glad this helped! You should only have to log in once, to receive the first token! To get a new one after an hour, just have your code make a request using your refresh token. Check out the following link and go down to #7 developer.spotify.com/web-api/authorization-guide/#authorization_code_flow

[@bat76640]

Hey ! Thanks to help me to understand how Spotify's API work. I have a question, I want to make an automatic update of my website page when a new song is reading. Does it possible ? Thank for this video ! (Sorry for my english, I'm french ^^)

[@JonnyKalambay]

Hey! The Spotify API doesn't have webhooks, so when I built an app with it, I just made a request to check the song every 3 seconds (using the setInterval function), and if the song was different than before, then I would update the app. It's not ideal, but it seems to be all we can do without webhooks

[@suryap4527]

can you explain how to go use refresh tokens when the access token is expired?

[@Huggowasright]

Hey, guys. I am new to all this API things. Any ideas why I get 204 status?

[@mehdi-kamal]

Where is the node_modules file? it is not on his github, but it is on his screen there. So where do I have to store it?

[@x3lnguyen]

hi! I am new to web development. Why do you need an entirely different port to run the spotify web auth? Is it possible to just run on the same port? If you were to actually deploy it as a real website, how would you run two ports?

[@JonnyKalambay]

Hi Lindsey! Technically we could have it all on the same server. It's just that for the sake and getting something up and running quickly for this video, I used create-react-app (which uses webpack dev server) and the boilerplate code for the Spotify Auth that I got from their website. It's very much possible to combine servers into one, but that would require ejecting and tinkering with the webpack configuration, with is beyond the scope of what I wanted to teach in this video (I wanted to focus on how the API works, not on Webpack). TLDR: yes, it can be done in one server with one port, but would require a lot more set up. When my friends and I used this in our bootcamp final project last year, we deployed 2 separate servers to Heroku, one for the Auth server, and one for the app. Thanks for watching and I hope that answers your question!

[@nickzanetti137]

@@JonnyKalambay Hi Jonny, I am trying to deploy my version of this project on Heroku using this same method you used (2 separate servers to Heroku). My problem is I am not sure exactly what I need to use as my redirect_uri variable on the auth server app. Before, this was set to 'localhost:8888/callback'. I tried setting it to my deployed auth app's address, but when I click the 'Log in with Spotify' button on my deployed auth app, I get an error screen that says "INVALID_CLIENT: Invalid redirect URI"

[@JonnyKalambay]

@@nickzanetti137 Hi Nick, for a redirect_uri to be valid, it needs to be registered for your application in the Spotify Developer website developer.spotify.com/dashboard/applications/, you can add as many urls as you want, including 'localhost:8888/callback' ''www.yoursite.com/callback'

[@nickzanetti137]

@@JonnyKalambay Ah, forgot about that part, thanks! Thanks for your help and for making this guide. Here's my deployed app using your template if you're curious: most-played.herokuapp.com/

[@wazzupweek]

try npx create-react-app client if there's something not working

[@derekcross22]

hey, the tutorial is awesome, one small problem, Spottily now redirects you to their new API console so you can no longer create an app with the API that you use in this tutorial and it was kind of frustrating finding out after following all the steps you gave. If you could update your blog with the corrections it will be awesome, thanks!

[@JonnyKalambay]

Thanks for pointing that out! I'll make revisions before the new year :)

[@derekcross22]

I don't know what happened but it is working now

[@derekcross22]

I only installed spotify-web-api-node module, weird

[@lucasborges1303]

Hi. It's 2020 and i cant get the "res.redirect" to work. the code is a little different as well, someone?

[@stevemackidd1249]

I had to change the line 129: headers: { 'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64')) } to: headers: { 'Authorization': 'Basic ' + (new Buffer.from(client_id + ':' + client_secret).toString('base64')) }

[@RacleandRaHill]

for some reason my localhost:3000 and localhost:8888 cant run at the same time. i can only run one at a time, not simutaneously. is there a reason for that?

[@wazzupweek]

try to use two powershell terminal and run on both

[@FrankiDaTank]

keep getting a no token provided error when calling getCurrentState()

[@codedance856]

How do you manage switching between localhost 8888 and 3000 if only one can be active in terminal?

[@JonnyKalambay]

Hey, you can run both! Simply open another terminal tab or window to run the second one.

[@codedance856]

True! I should have thought about that. Thanks for the fast reply and the great tutorial!

[@moemixlol301]

can you make a tutorial on how to implement this in android studio?

[@JonnyKalambay]

Hey, thanks for watching! I don't have much experience with Android development as I'm a web developer, but I'll look into trying this with React Native, which could then be used to build an android app. I'll keep you posted!

[@nagavikaspulluri9929]

Thanks for your video. I am also waiting for android SDK tutorial. If any reference you have let me know

[@noahperez9631]

Dude you need to update this, it a great video but I can't you use it

[@ton2142]

if me want auto check now playing no button How do it sorry my english bad.

[@JonnyKalambay]

Hi Mavic. Great question! As far as I know, there's no way to check it automatically. What you can do instead is set up an interval to check the now playing periodically. In one project, I had a function that would check the nowPlaying every 5 seconds. You can check it as often as you'd like, but keep in mind that the API has rate limits. So if you check it too often (for example 100 time per second), the requests will fail with a status code of 429. You can read more about this here developer.spotify.com/web-api/user-guide/#rate-limiting I hope this helps!

[@ton2142]

Thank bro. I use setTimeout function it work But when spotify play advertising project is show state error because spotify can't send json object. So can i catch error ?

[@stephon8654]

"dev•°•create°•°react°•°board"

[@rsvpcheech]

any update coming soon ??

[@Leswix1]

Hi there, hopefully someone can respond to this in a promptly manor. I am having a problem re creating the 8888 server. It worked one time, i waited an hour, it worked again, but any time inbetween that, It is not responding to the server. Do you know why at all? I have copied everything exactly as you have done, and put in my own client id and secret id. I have gotten it to work 2 times but it will not work now. Do i have to clear some sort of node process? If so, the information I have gathered from stackOverflow has not been helpful. Please help! feel free to message me directly or respond to this comment. Great video and I have been working on this for several hours! It truly is an amazing video! Not sure where I went wrong. Thank you for your time and effort -Chris.

[@JonnyKalambay]

Hey! When it doesn't work, what exactly does the error say?

[@Leswix1]

It actually does not throw any errors, it did have an error earlier and said it could not find cookie-parser so I re installed the node module which got rid of the error. After running the authorization code line within the auth server it says "listening on 8888" as it is console logging it out. When I go to my localhost:8888 it just says nothing is found. I am currently going to re create the project and see if things will work again. I may have broken something somehow.

[@jpatel7575]

Leswix1 how are you handling requests to your server. Think about that

[@hardcorecode]

I can't hear shit??

[@sss7017]

hi do you have instagram so i can contact you?

[@JonnyKalambay]

Sharif Seyed you can email me at [e-mail]