# Firebase deployment not working with React app

**URL:** <https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506>\
**Category:** Build Environment\
**Created:** [February 19, 2024, 4:01pm UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506 "2024-02-19T16:01:04Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![poorvasingh.de](https://avatars.discourse-cdn.com/v4/letter/p/db5fbb/32.png) [@poorvasingh.de](https://discuss.circleci.com/u/poorvasingh.de)\
**Post date:** [February 19, 2024, 4:01pm UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506/1 "2024-02-19T16:01:04Z")

</div>

Hi,

I am using this documentation - `[Preformatted text](https://circleci.com/docs/deploy-to-firebase/)`  
for deploying my react app to firebase. However, it always fails with following error:

```auto
/bin/bash: line <>: firebase: command not found
Error: 
Exited with code exit status 127

```

I have seen other issues related to firebase deployment but they all use old approach of fetching firebase token. What can I do to fix this?

---

<div class="post-metadata">

**Author:** ![rit1010](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/rit1010/32/34738_2.png) [@rit1010](https://discuss.circleci.com/u/rit1010)\
**Post date:** [February 19, 2024, 7:13pm UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506/2 "2024-02-19T19:13:01Z")

</div>

without seeing your config file it is hard to tell what the issue is, but

- did you add `firebase-tools` to your project’s devDependencies as noted in the doc you linked to?

- after checking out your code, did you do something like ‘run: npm install’ to cause the dependencies to be loaded?

---

<div class="post-metadata">

**Author:** ![poorvasingh.de](https://avatars.discourse-cdn.com/v4/letter/p/db5fbb/32.png) [@poorvasingh.de](https://discuss.circleci.com/u/poorvasingh.de)\
**Post date:** [February 20, 2024, 7:07am UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506/3 "2024-02-20T07:07:03Z")

</div>

yes. this how devDependencies in my package.json looks like:

```auto
"devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "firebase-tools": "^13.3.0"
  }

```

and my config.yml

```auto
version: 2.1
orbs:
  node: circleci/node@5.2
jobs:
  test-node:
    # Install node dependencies and run tests
    executor: node/default
    steps:
      - checkout
      - node/install-packages:
          pkg-manager: npm
      - run:
          name: Run tests
          command: |
            npm install
            npm test --passWithNoTests
  build:
    # Build node project
    executor: node/default
    steps:
      - checkout
      - node/install-packages:
          pkg-manager: npm
      - run:
          command: |
            npm install
      - run:
          command: |
            npm run build
            echo credentials="${pwd}/credentials.json"
            GOOGLE_APPLICATION_CREDENTIALS=$credentials firebase deploy

```

---

<div class="post-metadata">

**Author:** ![poorvasingh.de](https://avatars.discourse-cdn.com/v4/letter/p/db5fbb/32.png) [@poorvasingh.de](https://discuss.circleci.com/u/poorvasingh.de)\
**Post date:** [February 20, 2024, 7:21am UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506/4 "2024-02-20T07:21:20Z")

</div>

FYI - I tried both running locally and in ci

---

<div class="post-metadata">

**Author:** ![rit1010](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/rit1010/32/34738_2.png) [@rit1010](https://discuss.circleci.com/u/rit1010)\
**Post date:** [February 20, 2024, 12:10pm UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506/5 "2024-02-20T12:10:09Z")

</div>

OK after some R&D, unless I am missing something I can not see how that example would work. My reasoning is as follows

- The docs state that you can not install firebase-tools globally and instead have to install them locally as part of the npm environment.

- The example then goes and uses firebase as if it is an executable that the shell can find in its path - indicating that the executable has been installed into a bin directory somewhere or that the npm install process has gone and started to modify things like the path environment variable.

- When using the debug mode of npm install there is no indication that it is handling the firebase package any differently to any other npm package and so no wider environmental changes are taking place.

- I can find no examples on the internet of what is being shown in the CircleCI docs, instead a ‘local’ install of firebase tools needs to be accessed via an ‘npm exec’ command

Reworking your config.yml file a bit I have the following example

- As I have no project I create a package lock file
- I output the version of firebase rather than try a deploy

```auto
version: 2.1
orbs:
  node: circleci/node@5.2

jobs:
  build:
    # Build node project
    executor: node/default
    steps:
      - checkout
      - run:
          command: |
            npm i --package-lock-only
            npm install --save-dev firebase-tools
      - node/install-packages:
          pkg-manager: npm
      - run:
          command: |
            npm install
      - run:
          command: |
            echo credentials="junkvalue"
            GOOGLE_APPLICATION_CREDENTIALS=$credentials npm exec -- firebase --version
      
workflows:
  build-and-test:
    jobs:
      - build

```

---

<div class="post-metadata">

**Author:** ![poorvasingh.de](https://avatars.discourse-cdn.com/v4/letter/p/db5fbb/32.png) [@poorvasingh.de](https://discuss.circleci.com/u/poorvasingh.de)\
**Post date:** [February 20, 2024, 12:47pm UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506/6 "2024-02-20T12:47:03Z")

</div>

Thanks! Much improvement over original documentation. This worked. I have a follow-up question. Is there a way to separate build and deploy jobs here.

```auto
build:
    # Build node project
    executor: node/default
    steps:
      - checkout
      - node/install-packages:
          pkg-manager: npm
      - run:
          command: |
            npm i --package-lock-only
            npm install --save-dev firebase-tools
            npm run build
deploy:
    docker:
      - image: cimg/base:stable
    steps:
      - run:
          name: Deploy on Firebase
          command: <>

```

---

<div class="post-metadata">

**Author:** ![poorvasingh.de](https://avatars.discourse-cdn.com/v4/letter/p/db5fbb/32.png) [@poorvasingh.de](https://discuss.circleci.com/u/poorvasingh.de)\
**Post date:** [February 20, 2024, 1:07pm UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506/7 "2024-02-20T13:07:50Z")

</div>

And perhaps while you are on it. do you know the problem with setting the path of json file here. My credentials.json is at root of react app.

```auto
 - run:
          name: Deploy on Firebase
          command: |
            echo "credentials.json" > credentials.json 
            GOOGLE_APPLICATION_CREDENTIALS=credentials.json npm exec -- firebase deploy

```

I always get the authentication error

```auto
Failed to authenticate, have you run firebase login?

```

---

<div class="post-metadata">

**Author:** ![rit1010](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/rit1010/32/34738_2.png) [@rit1010](https://discuss.circleci.com/u/rit1010)\
**Post date:** [February 20, 2024, 1:24pm UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506/8 "2024-02-20T13:24:48Z")

</div>

I am not sure what you mean by ‘separate’. Each of the 2 jobs defined are run as independent jobs within independent environments.

If you want to just run one or other of the defined jobs, you would do this by using conditional checks within the workflow: section of the config.yml file. A good starting place would be

> **[Conditional steps in jobs and conditional workflows](https://support.circleci.com/hc/en-us/articles/360043638052-Conditional-steps-in-jobs-and-conditional-workflows)**
>
> Overview
> Users can conditionally trigger a workflow or steps using Advanced Logic in their config.yml file.  
> Specific logic statements can be used to create multiple nested conditions that will al...

Once you have spent some time in the docs you will find that you can base conditions on the following

- parameters, this works well if you are starting a workflow via the API or web console.
- branch name, if you use a GitFlow model this can work well.
- tag, you set a tag on a commit. This has the advantage of a workflow only starting if a tag is added.

There is also what is known as the continuation ORB. This allows a config.yml to run a workflow that performs work, such as retrieving environmental info and then call another config.yml file. This allows you to get a value and pass it as a parameter, which can then be used in a condition check.

---

<div class="post-metadata">

**Author:** ![rit1010](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/rit1010/32/34738_2.png) [@rit1010](https://discuss.circleci.com/u/rit1010)\
**Post date:** [February 20, 2024, 1:27pm UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506/9 "2024-02-20T13:27:38Z")

</div>

> [@poorvasingh.de](#):
>
> `echo "credentials.json" > credentials.json `

This is going to put the text string ‘credentials.json’ into the file “credentials.json”, which is unlikely to be what you are aiming for.

---

<div class="post-metadata">

**Author:** ![poorvasingh.de](https://avatars.discourse-cdn.com/v4/letter/p/db5fbb/32.png) [@poorvasingh.de](https://discuss.circleci.com/u/poorvasingh.de)\
**Post date:** [February 20, 2024, 2:14pm UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506/10 "2024-02-20T14:14:32Z")

</div>

You might be right but I tried with all the possibilities a path can be defined. As per documentation, it expects path to json file which is at root of my project directory.

I have tried ‘./credentials.json’, ‘/project/credentials.json’, ‘/root/credentials.json’

I dont know what I am missing here.

And for the above question, I will try to use workspaces.

---

<div class="post-metadata">

**Author:** ![rit1010](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/rit1010/32/34738_2.png) [@rit1010](https://discuss.circleci.com/u/rit1010)\
**Post date:** [February 20, 2024, 2:33pm UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506/11 "2024-02-20T14:33:46Z")

</div>

You should be echoing the login credential value from google into that file. The original example code you were working from at

`https://circleci.com/docs/deploy-to-firebase`

uses

```auto
echo $SA_KEY > credentials.json

```

as it was using a value stored in the SA\_KEY environment variable.

---

<div class="post-metadata">

**Author:** ![poorvasingh.de](https://avatars.discourse-cdn.com/v4/letter/p/db5fbb/32.png) [@poorvasingh.de](https://discuss.circleci.com/u/poorvasingh.de)\
**Post date:** [February 20, 2024, 2:47pm UTC](https://discuss.circleci.com/t/firebase-deployment-not-working-with-react-app/50506/12 "2024-02-20T14:47:04Z")

</div>

I was finally able to deploy successfully.  
The major trigger was storing and retrieving json file from circleci. I stored an encoded string and decoded the same before deployment. And that worked.

Thanks for all the help.