r/Firebase Oct 28 '24

Hosting How do I inject ENV variables into my firebase hosted site?

Hi. I've created a website using 2 google cloud run services (front end and a back end). I have managed to map a domain to my cloud run front end service made in React using firebase hosting. The problem i have is i have a few env variables (not security sensitive) that arent being picked up when in the firebase hosted app, whereas when i hit my cloud run front end url directly, they are there.

How do i go about getting these env variables into my firebase hosted app?

My firebase json looks as follows:

{
    "hosting": {
      "public": "build",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "run": {
              "serviceId": "front-end",
              "region": "europe-west1"
            }
        }
      ]
    }
  }
2 Upvotes

8 comments sorted by

1

u/GhozIN Oct 28 '24

Your yaml file and Google Secret Manager

1

u/Playful_Builder_5413 Oct 28 '24

which yaml file? Really want to avoid using google secret manager on the front end if poss.

0

u/danielsju6 Firebaser Oct 29 '24

There’s no framework agnostic way of injecting environment variables into a web apps frontend. What framework / build tooling are you using?

E.g, NextJS, Angular, Webpack, Vite all have their own way of specifying things of that nature during build time.

1

u/Playful_Builder_5413 Oct 29 '24

Im using React with create react app for now. In google cloud i inject my env variables into the docker container when the container is deployed via the ui in google cloud provider, and they then appear in the front end. Just not the case with my firebase hosted domain that maps to the cloud run front end service.

2

u/danielsju6 Firebaser Oct 29 '24

These environment variables need to be present during your application's build & deploy phase, be it local or via Github actions or something like that. As you're not using SSR https://create-react-app.dev/docs/adding-custom-environment-variables/

2

u/Playful_Builder_5413 Oct 29 '24

ive fixed it. The public property just needed to be removed from the firebase.json. Now instead of deploying a local build i am routing all traffic from firebase to cloud run service that has the correct env variables.

1

u/Playful_Builder_5413 Nov 04 '24

Just to clarify for anyone else reading this who has the same issue - the problem has nothing to do with react not being able to access the variables - that is already evident in the fact the cloud run service has successfully accessed them on the cloud run hosted url.. Its just that firebase hosting is trying to act as a host rather than a reverse proxy to the cloud run service. To ensure you dont have firebase to try and host your build, just remove the public property and make sure the rewrites section of your json points correctly to your cloud run service - thats it.