Step by step: Jamming project on Netlify plus hiding API key using dotenv

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 with REACT_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

Lastly, in netlify site deploys, trigger deploy, and you should be able to deploy your app. Cheer!

2 Likes

Thank you for this, it was a big help!

1 Like

It worked!! You are truly a life saver! Thank you for your help!

2 Likes

Please note: dotenv is not completely safe. I would only use this with free api keys. read more For those who are using VITE, here is the guide. Happy coding :black_heart:

2 Likes

Stuck on the Jamming app for 3 months, (many reasons) - your guide walkthru here was the most valuable thing!! Thank you!!!