Hi!, I’m making this post to help other students who might be struggling on deploying issue. This might not be the best approach, but after digging through the issue, my code finally works!
Check my github Repo here: GitHub - SKarnjana/Jamming_React_Function_Components
and My Netlify Site here: https://my-spotify-playlist.netlify.app/
Using dotenv
- from your project’s terminal run
npm install dotenv --save - see dotenv - npm
- in your root directory, create a new file call
.env - create .gitignore and make sure to include .env file
- in .env file, add your key variables eg.
REACT_APP_NOT_SECRET_CODE="*******"// name MUST start withREACT_APP_ - see Adding Custom Environment Variables | Create React App
- in Spotify.js : set clientId =
process.env.REACT_APP_NOT_SECRET_CODE
From Netlify
Once create and import project from your github project.
- from site overview, navigate to site setting
- change site name (optional) // we will need this as our “redirectUri”.
- go to Environment Variables > Add Variable > Import from a .env file
- go back to Deploys (on sidebar) > find “Trigger deploy” > Deploy site
Set up new URI on Spotify Dashboard
- go to your devleoper dashboard > project setting
- add the Uri you created from Netlify as your Redirect URIs (see photo)
- in Spotify.js : set redirectUri to netlify uri (eg.“https://my-spotify-playlist.netlify.app/”) instead of localhost.
- don’t forget to push onto github
Lastly, in netlify site deploys, trigger deploy, and you should be able to deploy your app. Cheer!