I created a ReactJS movie website with TMDb movie API and my website fetches data from TMDb server which requires an API key. I have created an .env file and put my API key there and then I added that .env file to my .gitignore file, but now I want to publish my website on github pages without publicly exposing my API key, please help me by suggesting solution to this particular problem.
I have found many questions regarding how to hide my API key, but here, what I am asking is that, how to publish my page with my API key not being publicly accessible.
Depending on your usecase, you could use GitHub actions and GitHub secrets to achieve this.
The action could fetch data from the API, making it available during the build. This would almost be like cache warming, fetching upstream data and storing a static version closer to the client. Depending on your usecase, I think something like that would work.
Github Pages are supposed to be public for community/free tier.
Remove the API key from the code, where ever it is. Store API key as a variable in Github Secrets.
https://docs.github.com/en/actions/security-guides/encrypted-secrets
And then, reference it during pipeline build with ${{ secrets.API_KEY }}
Update your .env file with this key.
Add .env to .gitignore