CODEWITHSUNDEEP
firebasedeploymenthookfirebase-hosting
bgrand-ch
bgrand-ch

Reputation: 1288

How to use a "predeploy" hook per project on a Firebase Hosting multi-projects and multi-sites?

I would like to use a different predeploy hook per project on a Firebase Hosting multi-projects and multi-sites.

Is it possible?

Currently:

.firebaserc

{
  "projects": {
    "staging": "project-name-staging",
    "production": "project-name-production"
  },
  "targets": {
    "project-name-staging": {
      "hosting": {
        "admin": [
          "project-name-staging-admin"
        ],
        "public": [
          "project-name-staging-public"
        ]
      }
    },
    "project-name-production": {
      "hosting": {
        "admin": [
          "project-name-production-admin"
        ],
        "public": [
          "project-name-production-public"
        ]
      }
    }
  }
}

firebase.json

{
  "hosting": [
    {
      "predeploy": "yarn workspace admin run build",
      "target": "admin",
      "public": "admin/dist/spa",
      "rewrites": [{
        "source": "**",
        "destination": "/index.html"
      }]
    },
    {
      "predeploy": "yarn workspace public run build",
      "target": "public",
      "public": "public/dist/spa",
      "rewrites": [{
        "source": "**",
        "destination": "/index.html"
      }]
    }
  ]
}

package.json

{
  "private": true,
  "name": "admin (or public)",
  "version": "0.0.1",
  "description": "Project Name Admin (or Public)",
  "productName": "Project Name Admin (or Public)",
  "scripts": {
    "dev": "quasar dev",
    "build": "quasar build"
  },
  "dependencies": {
    "@quasar/extras": "1.10.6",
    "axios": "0.21.1",
    "core-js": "3.13.1",
    "firebase": "8.6.5",
    "quasar": "1.15.19",
    "vue-i18n": "8.24.4"
  },
  "devDependencies": {
    "@quasar/app": "2.2.8",
    "babel-eslint": "10.1.0",
    "dotenv": "10.0.0",
    "eslint": "7.28.0",
    "eslint-config-standard": "16.0.3",
    "eslint-plugin-import": "2.23.4",
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-promise": "5.1.0",
    "eslint-plugin-vue": "7.10.0",
    "eslint-webpack-plugin": "2.5.4"
  }
}

Ideally:

.firebaserc

{
  "projects": {
    "staging": "project-name-staging",
    "production": "project-name-production"
  },
  "targets": {
    "project-name-staging": {
      "hosting": {
        "admin": [
          "project-name-staging-admin"
        ],
        "public": [
          "project-name-staging-public"
        ]
      }
    },
    "project-name-production": {
      "hosting": {
        "admin": [
          "project-name-production-admin"
        ],
        "public": [
          "project-name-production-public"
        ]
      }
    }
  }
}

firebase.json

{
  "hosting": [
    {
      "predeploy": {
        "staging": "yarn workspace admin run staging:build",
        "production": "yarn workspace admin run production:build"
      },
      "target": "admin",
      "public": "admin/dist/spa",
      "rewrites": [{
        "source": "**",
        "destination": "/index.html"
      }]
    },
    {
      "predeploy": {
        "staging": "yarn workspace public run staging:build",
        "production": "yarn workspace public run production:build"
      },
      "target": "public",
      "public": "public/dist/spa",
      "rewrites": [{
        "source": "**",
        "destination": "/index.html"
      }]
    }
  ]
}

package.json

{
  "private": true,
  "name": "admin (or public)",
  "version": "0.0.1",
  "description": "Project Name Admin (or Public)",
  "productName": "Project Name Admin (or Public)",
  "scripts": {
    "dev": "cross-env NODE_ENV=staging quasar dev",
    "staging:build": "cross-env NODE_ENV=staging quasar build",
    "production:build": "cross-env NODE_ENV=production quasar build"
  },
  "dependencies": {
    "@quasar/extras": "1.10.6",
    "axios": "0.21.1",
    "core-js": "3.13.1",
    "firebase": "8.6.5",
    "quasar": "1.15.19",
    "vue-i18n": "8.24.4"
  },
  "devDependencies": {
    "@quasar/app": "2.2.8",
    "babel-eslint": "10.1.0",
    "cross-env": "7.0.3",
    "dotenv": "10.0.0",
    "eslint": "7.28.0",
    "eslint-config-standard": "16.0.3",
    "eslint-plugin-import": "2.23.4",
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-promise": "5.1.0",
    "eslint-plugin-vue": "7.10.0",
    "eslint-webpack-plugin": "2.5.4"
  }
}

And finally, run following to execute Firebase Hosting deploy and their predeploy hooks:

Upvotes: 0

Views: 429

Answers (1)

DIGI Byte
DIGI Byte

Reputation: 4163

You can setup a deploy script inside package.json that runs the appropriate command since there is no way to build firebase-cli tools for every framework and custom integration, you want to inject the deploy command at the end of your own build scripts

"cross-env NODE_ENV=staging quasar build && firebase deploy --only hosting:admin"

Additionally, you also have the "use" feature built-in, but this is more to manage multiple projects with the same site https://firebase.google.com/docs/cli#project_aliases

I also suggest reading the multiple apps per project scenarios demonstrated here: https://firebase.google.com/docs/projects/learn-more#best-practices

Upvotes: 2

Related Questions