I'm trying to programmatically build my index.html file from a template, using a custom script/pre-deploy hook.
Is it possible to have the Firebase emulator run my predeploy script either (1) on start, or (2) on page refresh, so that I can see in the emulator what will happen on actual deploy?
My script works in actual deployment, but never fires with the emulator.
firebase.json (relevant part)
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"predeploy": "node ./preDeploy.js",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
preDeploy.js (oversimplified minimal example)
const fs = require('fs');
const testString = 'hello';
fs.writeFileSync('./preDeployTest.txt', testString);
I would expect the test file to be generated (1), ideally every time I refresh my site while running the emulator, or (2) at least when I first start the emulator -- but the script only runs on actual deploy.
To be clear, I'd be using this script to generate the file that I want Firebase hosting to use as its index.html, but I want to be able to emulate the results.
This may be possible with the default lifecycle scripts block:
"scripts": {
"prepare": "node ./prepare.js"
}
There's also preprepare and a few other hooks; you may have to toy with it to find the correct one. The point is, that one isn't limited to Firebase specific hooks, but can use those defined by NodeJS.
Related
`
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
`Have an issue where the Firebase deploy link shows "Firebase Hosting Setup Complete." I've tried just about everything on stackoverflow with no success.
I have it set to "build" not "public" in my firebase.json for hosting and it's not doing anything.
I've tried messing with the index.html but then the screen just comes up white/blank.
I've also deleted firebase files completely and started the init over. Still comes back the same.
Has anyone else ran into this lately?
It's hard to tell without any code snippets or firebase config files but I believe if you specify your public location as "build" you do not need to include the rewrites property in the firebase.json file. According to The Docs,
Set up rewrites for any of these purposes:
Show the same content for multiple URLs. Learn how.
Serve a function or access a Cloud Run container from a Hosting URL. Learn how: function or container.
Create a custom domain Dynamic Link. Learn how.
I have set up my Nuxt app (Nuxt3) to use Firebase Hosting with Cloud Functions. This works fine and able to deploy. However, now I wanted to use a cloud function to handle events triggered in Firestore database. I set up a sample "hello world" cloud function by following the Firebase Cloud Functions tutorial , but now when deploying this new hello world function via the local emulator, the function is no where to be found!
Here is the Emulator log when I run firebase emulators:start:
I see the function output is the server folder, but that is for the app hosting.
Where is the helloWorld cloud function I made?
Directory structure:
functions/:
And the app's root contains a firebase.json like so:
{
"functions": {
"source": ".output/server",
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
},
"hosting": [
{
"site": "<removed for this post>",
"public": ".output/public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"cleanUrls": true,
"rewrites": [
{
"source": "**",
"function": "server"
}
]
}
]
}
My helloWorld.js function is correctly transpiled into the build folder:
Where/how do I access my Hello World function I made? The emulator ONLY seems to show the hosting function.
There is nothing in your post that makes the Firebase Functions Emulator look in the functions folder. It gets completely ignored.
You’ve configured it as:
functions.source: .output/Server
The default for this field is “functions”. Thus, in many samples, it seems like there would be a special meaning for that folder name. It’s just a default.
Thus: it looks into .output/Server/index.js (I think) and executes that.
If you want multiple Functions entry points, have a look at the “codepaces” feature recently released: https://firebase.google.com/docs/functions
Note: I haven’t used codespaces myself
Trying to deploy my React app on Firebase. The problem is that after I deploy the app and connect to the default "app.web" domain I keep getting "Site Not Found" page. I followed the initial steps and bundled the app with parcelJS.
However adding /index.html at the end resolves my issue.
Connecting to the "firebase.com" domain works as expected without the need of adding "index.html" at the end.
My previous project which I now removed worked seamlessly without such issues.
What causes this behavior? Can I do anything to fix it?
Contents of firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
The rewrites are correct for a single page app. it maybe an issue related to your browser cache, try another browser or clear your one with Ctrl F5.
If issues persist, you should look at your react app and double-check any router paths and that you do have an existing public folder in the root with your index.html and your react app setup correctly.
As a last resort incase something severe maybe broken, you can create a new project folder and init your Firebase project into it and copy your react src folder over and rebuild your public folder, firebase.json, etc and redeploy with firebase deploy --only hosting
After I deploy my Vue app to Firebase, it appears as if my build.js file is the same as my index.html file. When I go the site, I get nothing. Looking the the console, I get an error Uncaught SyntaxError: Unexpected token < at line 1 of build.js.
If I then reload it with the Network tab open, I see build.js listed as a resource, but when I click on it, it shows the same contents as index.html. (The build.js file is in fact js after I build it on my end).
This is my first time using Firebase, so I'm not sure if I'm doing something wrong in the firebase.json (which I just copied from a tutorial):
{
"hosting": {
"public": "./dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"destination": "/index.html"
}]
}
}
I'm not using any other firebase tools.
Thanks for any insight.
you firebase.json should look like this:
hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
Run firebase deploy --only hosting and it should be good. Source here
Make sure your output for that command looks something like this:
=== Deploying to 'your-project-name'...
i deploying hosting
i hosting[zero-to-prod-test]: beginning deploy...
i hosting[zero-to-prod-test]: found 16 files in public/build <---- THIS TELLS YOU IF THE FILES ARE BEING COPIED
✔ hosting[zero-to-prod-test]: file upload complete
i hosting[zero-to-prod-test]: finalizing version...
✔ hosting[zero-to-prod-test]: version finalized
i hosting[zero-to-prod-test]: releasing new version...
✔ hosting[zero-to-prod-test]: release complete
That way to can debbug is something is wrong on the data transfer.
On your case your index.html is pointing to dist/build.js intead of /build.js that is causing the problem, so it doesnt look like a firebase problem but a webpack problem. Check your assets generation process.
I'm following this tutorial Getting Started with Firebase Hosting on the Web - Firecasts
I'm trying to host a simple index.html file in firebase but when I type firebase deploy its gives me the following error:
No targets found. Valid targets are: database,storage,functions,hosting. hosting error image
I found my firebase.json file is empty it contains only { } .
run firebase init again.
When you are asked for - Which Firebase CLI features do you want to setup for this folder?
Press Space to select features, it will mark that feature with asterisk.
Then Enter to confirm your choices.
Make sure you select the options by pressing spacebar, then press enter.
run firebase init and if your firebase.json is empty with only {} then add
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
replace "public": "app" with "public": "public"
then run firebase deploy