Firebase Web Hosting Setup - neuralpain/neuralpain GitHub Wiki

Continuous Integration & Continuous Deployment of Firebase with GitHub Actions

Go to your-project/actions. Click new workflow then ...set up a workflow yourself. This will create a workflow file for you in your .github/workflows folder. Alternatively, you can append the link data below. Change main to the branch you are creating the workflow for.
```
your-project/new/main?filename=.github%2Fworkflows%2Fmain.yml&workflow_template=blank
```

Copy and paste the code below and save. This will run a deployment upon push to your main branch.

name: Firebase Deploy

on:
  push:
    branches:
      - main

  workflow_dispatch:

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@main
      - name: Install dependencies
        run: | 
          npm install
          npm ci
      - name: Build dependencies
        run: npm run build
      - name: Archive production artifact
        uses: actions/upload-artifact@main
        with:
          name: dist
          path: dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@main
      - name: Download artifact
        uses: actions/download-artifact@main
        with:
          name: dist
          path: dist
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

To get the FIREBASE_TOKEN, run firebase login:ci to login to generate an access token. You should get a response like this:

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=...

Waiting for authentication...

+  Success! Use this token to login on a CI server:

1//06Y...1fA

Example: firebase deploy --token "$FIREBASE_TOKEN"

Copy the token provided by Firebase CLI and go to your-project/settings/secrets/actions. Add a new repository secret with the name FIREBASE_TOKEN and paste the token in the value field.
Test the workflow by pushing some code to the branch.

Firebase Web Hosting Setup

A non-convoluted, straightforward guide to setup firebase web hosting

Navigation

Continuous Integration & Continuous Deployment with GitHub Actions

Install Node.js

https://nodejs.org/en/download

Test if node is installed correctly by retrieving the version number from node.

node -v

Install Firebase CLI

# Firebase CLI reference
https://firebase.google.com/docs/cli

npm

npm install -g firebase-tools

standalone binary

Download the standalone binary for the CLI. Then, you can access the executable to open a shell where you can run the firebase command.

https://firebase.tools/bin/win/instant/latest

Log in and test the Firebase CLI

firebase login

Test that the CLI is properly installed and accessing your account by listing your Firebase projects.

firebase projects:list

Create a new project

Login to Firebase and create a new project. Give it a name.
Go to your project settings and register a web app to the project.
Run the following command to install the latest SDK
```
npm install firebase
```

Initialize Firebase by copying the script code and pasting it inside the header of your public/index.html

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// TODO: Replace the following with your app's Firebase project configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  //..
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

Add SDKs for Firebase products that you want to use

https://firebase.google.com/docs/web/setup#available-libraries

Set up your domain for Hosting

Make sure that you've completed the "Get Started" wizard from your project's Firebase Hosting page so that you have a Firebase Hosting site in your Firebase project.

Step 1: Add domain

From your project's hosting page, enter the wizard for connecting a custom domain:
```
https://console.firebase.google.com/u/1/project/_project_name_/hosting/sites
```
- If you have only one Hosting site, click Connect domain.
- If you have more than one Hosting site, click View for the desired site, then click Connect domain.
Enter the custom domain name that you'd like to connect to your Hosting site.
(Optional) Check the box to redirect all requests on the custom domain to a second specified domain (such that example.com and www.example.com redirect to the same content).
Click Continue to initiate the validation process.

Step 2: Verify domain ownership

If requested in the Connect Domain setup wizard, verify your apex domain.

These steps ensure that your domain is not already linked with a Firebase project and that you own the specified domain.

In your domain provider's site, locate the DNS management page.
Add and save a new record with the following inputs:
- Type: Add a TXT record.
  
  Firebase Hosting requires that you keep this TXT record continually present in your DNS settings to prove your ownership of the domain and to authorize Firebase to assign and renew SSL certificates for your site.
  
  Your domain provider may list this term as "Record Type".
- Host: Enter your apex domain key.
  
  Proving your ownership of an apex domain, or root domain, proves your ownership of all its subdomains.
  
  Your domain provider may list this term as "Host Name", "Name", or "Domain".
- Value: Copy the unique verification value into the field.
  
  Firebase Hosting checks for this value to prove your domain ownership.
  
  Your domain provider may list this term as "Data".
Allow up to 24 hours for propagation of your updated TXT records, then click Verify.

Note that you may click Cancel to safely close the Connect Domain window and reopen at a later time. This does not affect the propagation time, but you will be prompted to re-enter your domain name when you reopen the window.

After ample propagation time, clicking Verify in the Connect Domain window of the Firebase console allows you to begin the SSL certificate provisioning process.

In most cases, propagation of your records and verification of your domain will happen within a few hours, depending on your domain provider. Refer to your domain provider's documentation for detailed instructions for adding TXT records and propagation times.

If clicking Verify prompts an error message, your records have not propagated or your values may be incorrect.

Note: Feel free to check if your DNS records have updated correctly with the G Suite Toolbox’s Dig service. Note that while your records have updated, more time may be needed for propagation or provisioning of the SSL certificate.

Step 3: Go live

In the Connect Domain window of the Firebase console, select Quick Setup for a new site or Advanced Setup if you already have a site running on another hosting provider and need a zero-downtime migration.

Quick Setup

Return to your domain name provider's DNS management site to create DNS A records pointing your page to Firebase Hosting. Add and save records with the following inputs:

Type: Add two DNS A records.
Host: Enter your custom domain key for both records.

The host you indicate is the domain on which you want to serve content; this domain can be an apex domain or subdomain.

Your domain provider may list this term as "Host Name", "Name", or "Domain".

Value: Assign one value to each DNS A record to point your domain to the specified IP addresses. Your domain provider may list this term as "Data", "Points To", "Content", "Address", or "IP Address".

Allow time for your SSL certificate to be provisioned. This may take up to 24 hours after you point your A records to Firebase Hosting. In most cases, propagation of your records and provisioning of your SSL cerificate will happen within a few hours, depending on your domain provider.

Advanced Setup

The Connect Domain window of the Firebase console will request that you provide a token to migrate your existing site. You only need to complete one of the following to provide the token:

Update DNS TXT records: Visit your domain provider's DNS management site. Add a TXT record with your domain key and the provided value. Allow up to 24 hours for propagation of your TXT records.- Upload a file to an existing site: Upload the token onto your existing site at the specified URL and verify its existence.

This page must be served over HTTPS and doesn't have to be valid or secure. The encrypted token is only valid for one try. If migration fails, a new token will be generated for your records.3. Allow time for your SSL certificate to be provisioned. This may take up to 24 hours. In most cases, propagation of your records and provisioning of your SSL certificate will happen within a few hours, depending on your domain provider. 4. After your SSL certificate is provisioned, return to your DNS provider's DNS management site to add DNS A records pointing your page to Firebase Hosting. Add and save records with the following inputs:

Type: Add two DNS A records.
Host: Enter your custom domain key for both records.