Firebase deploy works in the console but not in bitbucket pipeline

Question

I'm trying to deploy my webapp to firebase hosting through a bitbucket pipeline, It's not deploying correctly in the pipeline but in the console it works no problem. This is what I do in the console:

npm run build
firebase login:ci
firebase deploy --project $PROJECT_NAME

In the pipeline I'm running this YAML script:

image: node:10.15.3

pipelines:
  default:
        - step:
            name: Install and Build App
            caches:
              - node
            script:
              - npm install
              - CI=false npm run build
            artifacts:
              - build/
        - step:
            name: Deploy App to Firebase
            deployment: production
            script:
              - pipe: atlassian/firebase-deploy:0.6.0
                variables:
                  KEY_FILE: $KEY_FILE
                  PROJECT_ID: $PROJECT_ID

I think it might have to do with the .firebaserc but I'm not sure. this is the .firebaserc:

firebase target:apply hosting $PROJECT_ID $DOMAIN

Maybe someone can shed some light on why this isn't working, I'm new to pipeline scripts and I don't really see the issue, it succeeds in deploying to firebase hosting but It's not working at all on the actual domain.

Answer 1

When you run the command firebase login:ci that should generate a TOKEN, you add that token in Bitbucket in your Repository Settings > Repository Variables. What ever name you choose should match your pipeline. In my example I use FIREBASE_TOKEN_CI. When I commit my changes to bitbucket, it runs the pipeline, builds and deploys.

You can always modify your script in your package.json so in your cli you can run npm run build:prod like you would run npm run start, etc and use the build:prod in the yml. here is an example:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build:prod": "ng build --prod=true"
    }

CODE BELOW is a pipeline.yml I use for Ionic/Angular NOTE: Artifacts is the folder your build files are generated after running build. Angular is called dist, so you might use dist/. My example uses www/** that is Ionics build output. You have some CI=False in your example, I have not seen that nor use that and my project builds and deploys. My second script is for cloud functions

- cd functions
   - npm install
   - cd ..

you can omit that part if you don't have functions. I have recently had a error about OAuth and I had to generate a new token with login:ci and replace my token, and it was working again for deploy. Hope this helps anyone. I had problems at first also and found a working format that I can adapt to other frameworks.

---

image: node:10.15.3

pipelines:
 default:
   - step:
       name: Install, Build
       caches:
         - node
       deployment: test
       script:
         - npm install
         - npm run build:prod
       artifacts: 
         - www/**
   - step:
       name: Deploy to Firebase
       deployment: production
       script:
         - cd functions
         - npm install
         - cd ..
         - pipe: atlassian/firebase-deploy:0.3.4
           variables:
             FIREBASE_TOKEN: '$FIREBASE_TOKEN_CI'