How do I get firebase hosting predeploy to run per target? - firebase

There is a firebase.json like this
"hosting": [
{
"target": "site-b",
"predeploy":cp ".env.site-b .env",
},
{
"target": "site-c",
"predeploy":cp ".env.site-c .env",
},
{
"target": "site-a",
"predeploy":cp ".env.site-a .env",
},
]
Deploying with a single target will work, but if multiple targets are specified, the .env will all be the same because deploy will start after all predeploys have been executed, which will not work.
I want to use Github Action FirebaseExtended/action-hosting-deploy#v0 to check the preview of multiple sites, is there a workaround?

Related

Debug Next.js App with VSCode in NX monorepo

I'm currently trying to debug a Next.js Application inside a NX monorepo.
I have enabled the Auto Attach setting in VSCode's User Settings.
When I start the Application using the serve command, I can see output in the Debug Console and also print out the current process by typing process or console.log(process) into the Debug Console.
However, I cannot set any breakpoints in the server side code, for example in getServerSideProps.
I checked Next.js Debugging Documentation for the missing pieces, and tried setting the NODE_OPTIONS='--inspect' in my Next.js Application via .env file.
Update: Seems like it's a missing feature on NX.
Got it working, thanks to the information from this Pull Request.
.vscode/launch.json
{
"version": "0.2.0",
"resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
"configurations": [
{
"name": "name-of-the-app – Server",
"type": "node",
"request": "launch",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"nx",
"run",
"name-of-the-app:serve",
"-r",
"ts-node/register",
"-r",
"tsconfig-paths/register"
],
"outputCapture": "std",
"internalConsoleOptions": "openOnSessionStart",
"console": "internalConsole",
"env": {
"TS_NODE_IGNORE": "false",
"TS_NODE_PROJECT": "${workspaceFolder}/apps/name-of-the-app/tsconfig.json"
},
"cwd": "${workspaceFolder}/apps/name-of-the-app/"
}
]
}
Note: I'm using yarn. You might have to replace it with npm instead.

Firebase Functions multiple directories - Nuxt 3 / Nitro

I'm experimenting with Nuxt 3 on Firebase hosting and have a basic build deployed successfully. However, it has taken over the functions directory.
Is it possible to specify a second directory in firebase.json? Thanks.
Here is the relevant portion of my working-for-nuxt firebase.json file.
"functions": {
"source": ".output/server",
"runtime": "nodejs14",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
]
},
Nuxt 3 creates a single function ("server") and deploys to Cloud Functions. If you want to deploy functions from another source directory as well e.g. for Firestore triggers then you can pass an array to functions property in the firebase.json as shown below:
{
"functions": [
{ "source": ".output/server", "codebase": "nuxt_app" },
{
"predeploy": "npm --prefix \"$RESOURCE_DIR\" run build",
"source": "functions",
"codebase": "cloud_functions"
}
]
}
Checkout the documentation to learn more about Managing multiple source packages.
If you are not using background functions like Firestore or Cloud Storage triggers and just using HTTP callable functions, then you can use NuxtJS Server Routes to deploy HTTP endpoints.

How can I create an environment file during a cloud build process

How can I pass environment variables to a Gatsby build task in a Google Cloud Build CI process? Using the substitution variables I can make variables available in the cloudbuild.json file but these then need to be available in the build task.
Gatsby uses a .env.production file to hold the environment variables which are then available using the dotenv package. At the top of my gatsby-config.js file I set the path to the environment file as follows:
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
Further down the file I use these variables to configure the gatsby-plugin-firebase plugin for Firebase. Given that I need an environment file, I have tried to create one in the cloudbuild.json file before running the build step.
{
"steps": [
{
"name": "ubuntu",
"args": ["echo", "FIREBASE_API_KEY=$_FIREBASE_API_KEY\\nFIREBASE_AUTH_DOMAIN=$_FIREBASE_AUTH_DOMAIN\\nFIREBASE_DATABASE_URL=$_FIREBASE_DATABASE_URL\\nFIREBASE_PROJECT_ID=$_FIREBASE_PROJECT_ID\\nFIREBASE_STORAGE_BUCKET=$_FIREBASE_STORAGE_BUCKET\\nFIREBASE_MESSAGING_SENDER_ID=$_FIREBASE_MESSAGING_SENDER_ID\\nFIREBASE_APP_ID=$_FIREBASE_APP_ID\\nFIREBASE_MEASUREMENT_ID=$_FIREBASE_MEASUREMENT_ID", ">", ".env.production"]
},
...More steps here...
{
"name": "node:14.4.0",
"entrypoint": "npm",
"args": ["run", "build"]
},
{
"name": "node:14.4.0",
"entrypoint": "./node_modules/.bin/firebase",
"args": ["deploy", "--project", "$PROJECT_ID", "--token", "$_FIREBASE_TOKEN"]
}
The .env.production file does not exist when I get to the build step, which I think is because it has been created in the ubuntu container. How can I create an environment file that can be read by the build step. Or is there a better way of passing the variables?
Thanks,
Your first step is wrong, you only echo the command, not execute it. Change it like this
{
"steps": [
{
"name": "ubuntu",
"entrypoint": "bash",
"args": ["-c", "echo FIREBASE_API_KEY=$_FIREBASE_API_KEY\\nFIREBASE_AUTH_DOMAIN=$_FIREBASE_AUTH_DOMAIN\\nFIREBASE_DATABASE_URL=$_FIREBASE_DATABASE_URL\\nFIREBASE_PROJECT_ID=$_FIREBASE_PROJECT_ID\\nFIREBASE_STORAGE_BUCKET=$_FIREBASE_STORAGE_BUCKET\\nFIREBASE_MESSAGING_SENDER_ID=$_FIREBASE_MESSAGING_SENDER_ID\\nFIREBASE_APP_ID=$_FIREBASE_APP_ID\\nFIREBASE_MEASUREMENT_ID=$_FIREBASE_MEASUREMENT_ID > .env.production"]
},

Firebase Functions: route every URL through function and serve from "hosting"

I'm trying to get every url in a subdomain to be routed through a firebase function. This is my configuration:
The functions file:
const functions = require('firebase-functions');
exports.handleWebRequest = functions
.region('europe-west1')
.https
.onRequest((req, res) => {
res.send('Currently down.');
});
My firebase.json:
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "handleWebRequest"
}
]
},
"functions": {
"source": "firebase-functions",
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
}
}
When I deploy the hosting and functions, and go to the URL in my browser, I expect to see "Currently down" for every route I open. However, every route except the root route shows the "Currently down" message, and the root route shows the index.html that I deployed.
So, in a nutshell:
/ shows my index.html (which I don't want)
/whatever shows "Currently down." (which is what I want)
The reason I'm trying to route everything through the function, is because I want to shield the website with HTTP Basic Auth, which is "not natively supported" by Firebase.
This is most probably because you still have the index.html file under the public folder.
As explained in the doc:
Note: The static files in the public directory take precedence over
the rewrites, so any static files will be served alongside the Cloud
Functions endpoints.
If you remove the index.html file it should work the way you expect.
Your function is deployed to the "europe-west1" region, but Firebase Hosting currently only supports the default "us-central1". This is stated in the documentation:
Important: Firebase Hosting supports Cloud Functions in us-central1 only.

Adding root folder outside of public to hosting Firebase

I have the following structure (to handle different theming) using different websites on Firebase.
/src
/theme-1/index.html
/theme-2/index.html
All the "juice" is within src and the file index.html is the same for both theme-1 and theme-2 with exception of the line where I refer to the .css file, where I use actually a different on.
For the moment, I only configured one target but I will add more in my firebase.json:
{
"hosting": {
"target": "theme-1",
"public": "theme-1",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{"source": "**","destination": "/theme-1/index.html"}
],
"cleanUrls": true,
"headers": [ {
"source": "**",
"headers": [ {
"key": "Cache-Control",
"value": "max-age=60"
} ]
} ]
}
}
I then configure my target using the cmd commands to point to my firebase site:
firebase target:apply hosting theme-1 theme-1
and subsequently deploy the website:
firebase deploy
However, when I visit the page (despite it working locally), it seems not to be able to find the root folder /src (404 error).
How can I also include the folder /src in my deployment such that it works in the same way?
Only the directory specified by public is deployed to Firebase. The name is slightly misleading because there are no "private" files/directories.
So you have to do "public": "src" (or "public": "." if you want to deploy the theme directories as well), and adjust the other properties accordingly.

Resources