Desplegar a Firebase con GitHub actions
December 22, 2024

Desplegar a Firebase con GitHub actions


File creation

Well, I’m assuming you already have Firebase installed and all its deployment and configuration, you can already do this through the terminal firebase deploy and your website displays correctly.
Having said that.
In your project, you must create the following folders .github/workflows/

mkdir -p .github/workflows
Enter full screen mode

Exit full screen mode

In the newly created directory you must create the file deploy.yml (Use cd and tab commands for navigation)

touch deploy.yml
Enter full screen mode

Exit full screen mode


Deploy .yml configuration file

name: Deploy to Firebase

on:
  push: (Esta es la accion, ve al apartado de referencias)
    branches:
      - {{Rama de despliegue}}

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Check out repository
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '22'

    - name: Install dependencies
      run: npm install

    - name: Build Angular app
      run: npm run build:prod (Ve a la seccion de Notas del comando Build Angular app)

    - name: Install Firebase CLI
      run: npm install -g firebase-tools

    - name: Deploy to Firebase Hosting
      run: firebase deploy --token "${FIREBASE_TOKEN}" 
      env:(Ve a la seccion Notas de github secrets y generar token de firebase)
       FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Enter full screen mode

Exit full screen mode


Create Angular Application Command Instructions

You will see suggestions inpackage.json so that he build Runs without issue as it can cause some errors when placing direct commands
npm run build:prod translated into package.json as ng build --configuration=production

example

{
...
  "scripts":{
  ...
        "build:prod": "ng build --configuration=production --verbose",
    ...
  },
...
}
Enter full screen mode

Exit full screen mode


Github secret notes and generate firebase tokens

You wouldn’t put the firebase deployment token into the command, would you? …. real?


generate token

To generate a token, use the following command

firebase login:ci
Enter full screen mode

Exit full screen mode

This will open your browser and you must be logged in with your Google account.
When you log into the console, the access key will appear

You must save this key as this command requires it firebase deploy --token


Store token to Github secret

We’ll let github take care of ensuring our keys are saved.

  1. Go to your repository
  2. Look for it in the settings section secrets and variables

  3. exist action cres new repository secret

In the name you put the same thing as your name deploy.yml as far as i’m concerned FIREBASE_TOKENyou place the secret generated using the command and store


refer to

Operations on github
Deploy your website from GitHub to Firebase hosting

2024-12-22 22:23:14

Leave a Reply

Your email address will not be published. Required fields are marked *