Cloud Build: Firebase application deployment failed due to the experimental web framework not being enabled.

[sebastianrychlik]

I get an error in Cloud Build for last "Deploy" step:

Deploy

• name: 'gcr.io/cloudfirebaseauthmydemo/firebase'
  args: ['deploy', '--project=cloudfirebaseauthmydemo', '--only=hosting']

The error is:

"Step 2: Error: Cannot deploy a web framework from source because the experiment webframeworks is not enabled. To enable webframeworks run firebase experiments:enable webframeworks"

[haroonc]

@sebastianrychlik Can you provide more details on the image you are using gcr.io/cloudfirebaseauthmydemo/firebase? From the error message, it seems your image is running firebase command, but I am not sure.
Further, from error message it seems you need to enable a config. Perhaps below project setup will help

run firebase experiments:enable webframeworks

[sebastianrychlik]

@haroonc
Hi Harron,

Thanks for the answer. Regarding gcr.io/cloudfirebaseauthmydemo/firebase, I did the following:
1.

git clone https://github.com/GoogleCloudPlatform/cloud-builders-community
cd cloud-builders-community/firebase
file firebase.bash
dos2unix firebase.bash
file firebase.bash
gcloud builds submit --config cloudbuild.yaml --project cloudfirebaseauthmydemo
gcloud container images list --filter firebase --project cloudfirebaseauthmydemo

2. Regarding my Angular project:

I prepared simple cloudbuild.yaml:

steps:

'# Install'

• name: 'gcr.io/cloud-builders/npm'
  args: ['install']

'# Build'

• name: 'gcr.io/cloud-builders/npm'
  args: ['run',
  'build']
  '# Deploy'
• name: 'gcr.io/cloudfirebaseauthmydemo/firebase'
  args: ['deploy', '--project=cloudfirebaseauthmydemo', '--only=hosting']

options:
logging: CLOUD_LOGGING_ONLY

3.
firebase experiments:enable webframeworks
4.
firebase init hosting

I noticed that two yaml files in .github\workflows were been generated:

#This file was auto-generated by the Firebase CLI
#https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
push:
branches:
- release
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_CLOUDFIREBASEAUTHMYDEMO }}'
channelId: live
projectId: cloudfirebaseauthmydemo

and second yaml file:

#This file was auto-generated by the Firebase CLI
#https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
build_and_preview:
if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_CLOUDFIREBASEAUTHMYDEMO }}'
projectId: cloudfirebaseauthmydemo

Important is that there was no question given:
Answer yes to "Do you want to use a web framework? (experimental)"
Full interaction after 'firebase init hosting' is below:

$ firebase init hosting

 ######## #### ########  ######## ########     ###     ######  ########
 ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
 ######    ##  ########  ######   ########  #########  ######  ######
 ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
 ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

C:\Users\HP_OMEN\Projects\CloudFirebaseAuthMyDemo\Angular-v15\CloudFirebaseAuthMyDemo

Before we get started, keep in mind:

• You are initializing within an existing Firebase project directory

? Are you ready to proceed? Yes

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i Using project cloudfirebaseauthmydemo (CloudFirebaseAuthMyDemo)

=== Hosting Setup
? Detected an existing Angular codebase in the current directory, should we use this? Yes
? In which region would you like to host server-side content, if applicable? us-central1 (Iowa)
? Set up automatic builds and deploys with GitHub? Yes

i Detected a .git folder at C:\Users\HP_OMEN\Projects\CloudFirebaseAuthMyDemo\Angular-v15\CloudFirebaseAuthMyDemo
i Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.

Visit this URL on this device to log in:
https://github.com/login/oauth/authorize?client_id=89cf50f02ac6aaed3484&state=773283530&redirect_uri=http%3A%2F%2Flocalhost%3A9005&scope=read%3Auser%20repo%20public_repo

Waiting for authentication...

• Success! Logged into GitHub as sebastianrychlik

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) sebastianrychlik/CloudFirebaseAuthMyDemoV15

• Created service account github-action-686282532 with Firebase Hosting admin permissions.
• Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_CLOUDFIREBASEAUTHMYDEMO.
  i You can manage your secrets at https://github.com/sebastianrychlik/CloudFirebaseAuthMyDemoV15/settings/secrets.

? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? (npm ci && npm run build) npm ci && npm run build
? What script should be run before every deploy? npm ci && npm run build
? GitHub workflow file for PR previews exists. Overwrite? firebase-hosting-pull-request.yml Yes

• Created workflow file C:\Users\HP_OMEN\Projects\CloudFirebaseAuthMyDemo\Angular-v15\CloudFirebaseAuthMyDemo.github/workflows/firebase-hosting-pull-request.yml
  ? Set up automatic deployment to your site's live channel when a PR is merged? Yes
  ? What is the name of the GitHub branch associated with your site's live channel? release
  ? The GitHub workflow file for deploying to the live channel already exists. Overwrite? firebase-hosting-merge.yml Yes

• Created workflow file C:\Users\HP_OMEN\Projects\CloudFirebaseAuthMyDemo\Angular-v15\CloudFirebaseAuthMyDemo.github/workflows/firebase-hosting-merge.yml

i Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/89cf50f02ac6aaed3484
i Action required: Push any new workflow file(s) to your repo

i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...

• Firebase initialization complete!

5. After pushing to Github release branch, cloudbuild.yaml is executed. For last step 'Deploy', I get:

2023-09-28 16:33:02.411 CEST
Step #2: Status: Downloaded newer image for gcr.io/cloudfirebaseauthmydemo/firebase:latest
2023-09-28 16:33:02.418 CEST
Step #2: gcr.io/cloudfirebaseauthmydemo/firebase:latest
2023-09-28 16:33:07.993 CEST
Step #2:
2023-09-28 16:33:07.993 CEST
Step #2: Error: Cannot deploy a web framework from source because the experiment webframeworks is not enabled. To enable webframeworks run firebase experiments:enable webframeworks