Next/Firebase example breaks when deployed

[Heiacc]

Hi, I'm trying to work through the Next/Firebase example and am getting stuck at a few points:

First, I can get mostly everything working locally. I can log in and out and correctly display my user email. However it doesn't want to show my 'foods!' I instead see both the failed to fetch foods! error message and Loading... message. I haven't modified getFoods.js . In fact as per the examples readme file - the only modification I have made has been to the env.local file.

The above sounds the same as a comment on #15628

Second, when I tried to deploy the app with Vercel, it builds successfully but then when I visit the app - It just throws a fullscreen 'unknown error' message. My dev tools tell me that my firebase api key is invalid. (doesn't happen locally)

As the Firebase API key is set in .env.local, should .env.local be removed from .gitignore? Knowing it will be pushed to a private repo? I feel like i'm missing a step (or a fundamental understanding with this can anyone clear it up?)

Thanks

[leerob]

1. Yes, .env.local should not be committed to GitHub. It's only for local development.
2. You should not commit any environment variables to GitHub. Instead, add environment variables inside you project's settings in the Vercel dashboard. You will have the option to set both Preview and Production variables.

[Heiacc]

Thanks - this was it. I hadn't set env vars on vercel before(first time deploying), it works now!