Firebase deployment not working with React app

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:

/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?

1 Like

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?

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

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

and my config.yml

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
1 Like

FYI - I tried both running locally and in ci

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
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
1 Like

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.

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: <>

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.

 - 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

Failed to authenticate, have you run firebase login?

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

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.

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.

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.

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

echo $SA_KEY > credentials.json

as it was using a value stored in the SA_KEY environment variable.

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.