I have deployed my NextJS project (adapted from https://github.com/zeit/next.js/tree/master/examples/with-firebase-hosting) to firebase, but when i browse to the URL i get "Internal Server Error".
Deployment did run through successfully:
i deploying database, functions, hosting
+ database: rules ready to deploy.
i functions: ensuring necessary APIs are enabled...
i runtimeconfig: ensuring necessary APIs are enabled...
+ runtimeconfig: all necessary APIs are enabled
+ functions: all necessary APIs are enabled
i functions: preparing src/functions directory for uploading...
i functions: packaged src/functions (571.83 KB) for uploading
+ functions: src/functions folder uploaded successfully
i hosting: preparing src/public directory for upload...
! Warning: Public directory does not contain index.html
i Progress: [....................................................................................................]
+ hosting: 3 files uploaded successfully
i starting release process (may take several minutes)...
i functions: updating function next...
+ functions[next]: Successful update operation.
+ functions: all functions deployed successfully!
+ Deploy complete!
So i feel perhaps it is something to do with the structure of my project? Or firebase.json config? Could someone have a look and let me know?
Here is my firebase.json which is in the root of my project:
{
"database": {
"rules": "database.rules.json"
},
"functions": {
"source": "src/functions"
},
"hosting": {
"public": "src/public",
"rewrites": [
{
"source": "**/**",
"function": "next"
}
],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Related
EDIT:
I want to deploy a Nuxt3 app to Firebase Hosting. I've set the deployment preset for Nitro to "firebase" NITRO_PRESET=firebase, and the build step works fine. However, when I run firebase deploy, I get an error saying:
There was an error reading .output/server/package.json:
.output/server/index.js does not exist, can't deploy Cloud Functions
I checked the .output/server directory, and saw that Nitro generated a file called index.mjs. I checked to see if Cloud Functions also works with .mjs files, but that doesn't seem to be the case. I looked for possible solutions but couldn't find anything; I tried reinstalling my modules, but no luck. Do I have something misconfigured or broken?
I'm following this tutorial:
https://nitro.unjs.io/deploy/providers/firebase
I'm using WSL2 Ubuntu on Windows 11, and the project folder is inside the linux filesystem.
Here is my package.json:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview"
},
"devDependencies": {
"#nuxtjs/google-fonts": "^3.0.0-0",
"#types/three": "^0.143.1",
"nuxt": "3.0.0-rc.8"
},
"dependencies": {
"firebase": "^9.9.3",
"sass": "^1.54.5",
"three": "^0.143.0",
"vuex": "^4.0.2",
"sass-loader": "^13.0.2"
}
}
My firebase.json:
{
"functions": {
"source": "./.output/server",
"runtime": "nodejs16",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
]
},
"hosting": {
"site": "my-site",
"public": ".output/public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"cleanUrls": true,
"rewrites": [
{
"source": "**",
"function": "server"
}
]
}
}
After the build step:
Σ Total size: 19.6 MB (3.21 MB gzip)
✔ You can deploy this build using npx firebase deploy
After the deployment step:
i deploying functions, hosting
i functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i functions: ensuring required API cloudbuild.googleapis.com is enabled...
i artifactregistry: ensuring required API artifactregistry.googleapis.com is enabled...
✔ functions: required API cloudbuild.googleapis.com is enabled
✔ functions: required API cloudfunctions.googleapis.com is enabled
✔ artifactregistry: required API artifactregistry.googleapis.com is enabled
i functions: preparing codebase default for deployment
Error: There was an error reading .output/server/package.json:
.output/server/index.js does not exist, can't deploy Cloud Functions
It seems you are using the default node-server preset. To deploy the Nuxt 3 app to Firebase, you must set the NITRO_PRESET to firebase in your environment.
NITRO_PRESET=firebase
npm run build
The CLI should prompt you to run npx firebase deploy once the build is completed.
Then run the command and it will deploy the application to Firebase hosting and functions.
You can read more about this in the documentation.
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
I am not able to deploy my app into production. I only have firebase hosting and functions. On firebase serve everything works well.
I obtain the following error:
i deploying functions, hosting
i functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i functions: ensuring required API cloudbuild.googleapis.com is enabled...
+ functions: required API cloudbuild.googleapis.com is enabled
+ functions: required API cloudfunctions.googleapis.com is enabled
i functions: preparing functions directory for uploading...
i functions: packaged functions (46.72 KB) for uploading
+ functions: functions folder uploaded successfully
i hosting[library-app-d49fe]: beginning deploy...
i hosting[library-app-d49fe]: found 19 files in public
+ hosting[library-app-d49fe]: file upload complete
i functions: updating Node.js 10 function app(us-central1)...
! functions[app(us-central1)]: Deployment error.
Function failed on loading user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs
Functions deploy had errors with the following functions:
app
To try redeploying those functions, run:
firebase deploy --only "functions:app"
To continue deploying other features (such as database), run:
firebase deploy --except functions
My firebase.json looks like this
{
"hosting": {
"public": "public",
"rewrites": [{
"source": "**",
"function": "app"
}],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
and my app.js in functions folder has the following export:
exports.app = functions.https.onRequest(app);
I am sorry if I don't provide the necessary details but I am clueless of what the issue might be.
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 have built an express app and the folder structure is below.
Then i created firebase init hosting on a dummy folder and copied the firebase.json and .firebase files
I created index.js file
const functions = require('firebase-functions')
const app = require('./app');
exports.widgets = functions.https.onRequest(app);
firebase.json
{
"hosting": {
"public": "public",
"rewrite":[{
"source": "**",
"function": "widgets"
}],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Also copied the index.html generated by firebase to public folder
On deployment i am getting index.html
If i delete index.html and run as localhost i am getting below output
How can i get the express app executed (as shown in localhost) instead of index.html on firebase deploy.
Edit 1
I am following link.
When i run firebase serve, i am getting this error
AssertionError [ERR_ASSERTION]: missing path at Module.require (module.js:583:3) at require (internal/module.js:11:18) at InitializeFirebaseAdminStubs (C:\Users\alaksandarjesus\AppData\Roaming\npm\node_modules\firebase-tools\lib\emulator\functionsEmulatorRuntime.js:231:18) at C:\Users\alaksandarjesus\AppData\Roaming\npm\node_modules\firebase-tools\lib\emulator\functionsEmulatorRuntime.js:451:9 at Generator.next () at C:\Users\alaksandarjesus\AppData\Roaming\npm\node_modules\firebase-tools\lib\emulator\functionsEmulatorRuntime.js:7:71 at new Promise () at __awaiter (C:\Users\alaksandarjesus\AppData\Roaming\npm\node_modules\firebase-tools\lib\emulator\functionsEmulatorRuntime.js:3:12) at main (C:\Users\alaksandarjesus\AppData\Roaming\npm\node_modules\firebase-tools\lib\emulator\functionsEmulatorRuntime.js:421:12) at Object. (C:\Users\alaksandarjesus\AppData\Roaming\npm\node_modules\firebase-tools\lib\emulator\functionsEmulatorRuntime.js:511:5)
When i tried to run firebase deploy
E:\ogst-server-firebase\functions>firebase deploy
=== Deploying to 'ogst-server-95fcc'...
i deploying functions, hosting
i functions: ensuring necessary APIs are enabled...
+ functions: all necessary APIs are enabled
Error: An unexpected error has occurred.
The reason for this is missing public folder, and i created manually (which was expected to be created with firebase init functions).
E:\ogst-server-firebase\functions>firebase deploy
=== Deploying to 'ogst-server-95fcc'...
i deploying functions, hosting
i functions: ensuring necessary APIs are enabled...
+ functions: all necessary APIs are enabled
i functions: preparing functions directory for uploading...
i hosting[ogst-server-95fcc]: beginning deploy...
i hosting[ogst-server-95fcc]: found 0 files in public
+ hosting[ogst-server-95fcc]: file upload complete
i hosting[ogst-server-95fcc]: finalizing version...
+ hosting[ogst-server-95fcc]: version finalized
i hosting[ogst-server-95fcc]: releasing new version...
+ hosting[ogst-server-95fcc]: release complete
+ Deploy complete!
Please note that it can take up to 30 seconds for your updated functions to propagate.
Project Console: https://console.firebase.google.com/project/ogst-server-95fcc/overview
Hosting URL: https://ogst-server-95fcc.firebaseapp.com
Now my deployment is successful. But i am getting 404
Answer
In the index.js file (following the above link), i did not change
module.exports = functions.https.onRequest(app); //wrong
to
exports.app = functions.https.onRequest(app); //correct
Thanks to all for the support
Firebase Hosting prefers to serve static content over rewrites that get sent to Cloud Functions. In other words, if a request could be served by any static content, that content will always take precedence over a rewrite to Cloud Functions.
If you want your web site root page to be served by Cloud Functions, this means you should not have an index.html in your public folder, since Firebase Hosting is finding that first.