I am having an issue with using Next.js API routes when deploying my website to Firebase Hosting. Here is the api call:
And here is the set up in the pages directory:
Here is the function used in email.js:
I changed the variables as to not give away my email address.
The call works when I use local host. However, when I build and deploy to firebase. I have tried to use the firebase url to make the api call, but I get a 404 page not found. I am not sure how to fix this. I would really appreciate any help.
Firebase hosting only hosts static files which is why your api routes don't work there. If you had a fully static Next site, you could host it on Firebase hosting. But if you want to use the api routes in Next, you need a server. One way to do this (albeit complicated) is to set up Firebase Functions with your api code and then rewrite requests in Firebase Hosting to that Firebase Function. It's complicated because it would require a fairly complex deploy process.
If the rest of your site is static, you can use Firebase Hosting for that and then consider ditching the api routes and instead setting up a Firebase Function to act as your api completely separate from Next.
Or if you want to keep it all in Next, consider something like Vercel for your site + api via Next.
Related
I deployed frontend on netlify.com and backend on render.com, how I got I can't set cookie from backend because frontend and backend are on different domains.
I found out that I can set sameSite: none, but it makes cookie less secured.
I use two github repositories, one for frontend, one for backend. Will cookies work if I deploy frontend and backend on same web hosting (heroku for instance) as two apps? Or if I do it that way they will be on different subdomains and cookie also will not work? Can I deploy two apps on one subdomain?
Or the only way to deploy is to make repository, containing both of frontend and backend, and deploy from this repository as one app? Is it right?
Any clues and advices are appreciated :)
Previously the app was hosted on custom domain through firebase itself as it was a ReactApp but I have moved the app to nextjs and started using Server Side Rendering. I have hosted the app using firebase cloud functions and it works prefectly on the URL provided after deployment. But now on the custom domain that was connected previously it shows "Welcome to Firebase Hosting" you need to configure it.
This is my firebase.json file
This is my function.js file
And this is the package.json file
Edit: I found this in documentation
Any connected custom domains:
CUSTOM_DOMAIN/bigben
Can't I host it on root URL?
As mentioned by #samthecodingman, there is an appropriate documentation that lists your requirement of hosting the Cloud Functions in Firebase Hosting using a custom domain.
Below are the steps for connecting Cloud Functions to Firebase Hosting :
Make sure that you have the latest version of the Firebase CLI and
that you've initialized Firebase Hosting.
Initialize Cloud Functions by running the following command from the
root of your project directory:
firebase init functions
When prompted, select JavaScript (this walk-through example uses JS).
Check that you have a functions directory in your local project
directory.
Open /functions/index.js in your favorite editor. Replace the file's
contents with the following code. This code creates an HTTPS
function (named bigben) that replies to HTTPS requests with a BONG
for each hour of the day, just like a clock.
Test your functions locally using the Firebase Local Emulator Suite.
From the root of your local project directory, run the following command:
firebase emulators:start
Access the function via the local URL returned by the CLI,
http://localhost:5001/PROJECT_ID/us-central1/bigben.
The following steps show you how to direct all requests from the path ../bigben on your Hosting site to execute the bigben function.
I. Open your firebase.json file.
II. Add the following rewrite configuration under the hosting section:
III. Confirm that your redirect works as expected by testing again with the Firebase emulators.
Deploy your function and your Hosting content and config to your site by running the following command from the root of your local project directory:
firebase deploy --only functions,hosting
Access your live site and your function at the following URLs:
a. Your Firebase subdomains:
PROJECT_ID.web.app/bigben and PROJECT_ID.firebaseapp.com/bigben
b. Any connected custom domains:
CUSTOM_DOMAIN/bigben
You can use web frameworks, like Express.js, in Cloud Functions to serve your app's dynamic content and write complex web apps more easily. The client set up code example is also provided here.
your firebase.json is missing predeploy. and you should also use firebase-functions/v2, as v1 doesn't work for next.js.
checkout my article: https://yihui.dev/firebase-hosting-with-nextjs-and-cloud-functions
and the github example: https://github.com/yihui-he/firebase-nextjs-example
I have a question, so im currently building back-end less app with firebase( auth and database).
So, my question is how will work if my hosting is different(for example: superhosting.bg).If upload my app there,what should i need to run properly my app ?Can you explain me a little bit?
Firebase requires you to use Google servers. You cannot run firebase outside of Google's server-side environment. However, since you mentioned backendless (full disclosure - I am the founder), if you were to build your app with it, you can run it anywhere where Docker/Kubernetes runs.
Firebase Authentication and Realtime Database can be used from any hosting provider. There is no need to host your web site on Firebase Hosting. Just follow the setup instructions (ignoring the ones for Firebase Hosting), and you'll be good to go.
What do you actually want to transfer to superhosting.bg - you want to use a superhosting-owned domain to attach your app to or you want to use their hosting?
As Frank van Puffelen answered above, for the latter just follow bith platforms' instructions on set up. However, if you're already using firebase, I'd stick with that.
For using custom domain on superhosting with firebase, you need to add the TXT records shown in firebase to your DNS provider (superhosting). Essentially, you will need to edit the DNS Zone of your domain.
In superhosting this is done through their cPanel. Then you go to DNS zone editor and find the domain you want to edit. Once here, you have to option to add TXT registry.
To get this TXT registry, go to Add Custom Domain in firebase (docs here: https://firebase.google.com/docs/hosting/custom-domain). They'll give you a TXT code you copy in the aforementioned location in cPanel.
Et voila!
I have a Vue.js app and use Firebase Hosting to serve the static files to users.
Does Firebase Hosting have a method for putting the app into maintenance mode remotely? Without having to do firebase deploy
Maybe something that will allow me to redirect all the traffic to some other index.html, and be able to manage it from Firebase.
P.S. I've already looked into Firebase Remote Config (and it doesn't fit my use case, and their web related tools aren't fully implemented yet). And I'd like to avoid having a realtime database just for maintenance mode.
There is no mode-switch built into Firebase Hosting for temporarily serving other content.
But given the recent updates to deploy efficiency, it should be pretty low-cost to put up a temporary index.html while making the changes. Alternatively, you could deploy rules (in firebase.json) that temporarily redirect all traffic to a wip.html (for work-in-progress).
Which of these works best, depends on your current content structure. I.e. if you already redirect "all" traffic to index.html, I'd probably go with a rewriting solution.
You can also unroll your last deploy in one command.
Deploy maintenance page
Unroll when its done
Don't forget to send a 503 error for googlebot, asking it to come back in X hours.
So I just wanted to host my Firebase Functions on my custom domain without hosting anything. I host my website somewhere else already.
Unfortunately, Firebase throws errors when trying to deploy functions with rewrites BUT without the public directory OR when the public directory is empty.
How can I do that on Firebase without a hack and hosting some redundant stuff? I just want to host the functions on a custom domain.
It seems that Firebase Hosting requires at least one html page, even if your only hosting functions. Just add a blank index.html to a directory and point hosting to that.