cloud-builders-community icon indicating copy to clipboard operation
cloud-builders-community copied to clipboard
verified publisher icon GoogleCloudPlatform

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

Open sebastianrychlik opened this issue 2 years ago • 2 comments

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"

sebastianrychlik avatar Sep 26 '23 12:09 sebastianrychlik

@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

haroonc avatar Sep 27 '23 14:09 haroonc

@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

sebastianrychlik avatar Sep 28 '23 14:09 sebastianrychlik