I just went through the steps of creating a CRUD app with NextJS. Everything works fine when I run the app on my development environment npm run dev.
Then I tried to deploy it to Vercel.
The build fails, and the error that comes up is:
AxiosError: connect ECONNREFUSED 127.0.0.1:3000
...
Build error occurred
Error: Failed to collect page data for /beers/[id]
at /vercel/path0/node_modules/next/dist/build/utils.js:963:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'Error'
I get it: when I make my API requests, the app is using HTTP:localhost:3000, so if deployed, it won't reach.
Then comes my question: locally, I run requests as such, for example:
import axios from 'axios';
axios.defaults.baseURL = "http://localhost:3000";
export const getAllBeers = () => axios.get<BeerData[]>('/api/beers');
and everything works.
I tried to troubleshoot my error. I figured I needed to adjust my baseUrl to the deployment server's address. But it still wouldn't work. And then in the few posts I read, and even in the docs, it says:
Write server-side code directly
As getStaticProps runs only on the server-side, it will never run on
the client-side. It won’t even be included in the JS bundle for the
browser, so you can write direct database queries without them being
sent to browsers.
This means that instead of fetching an API route from getStaticProps
(that itself fetches data from an external source), you can write the
server-side code directly in getStaticProps.
doc source
So after following their tutorial, I'm now confused on the purpose of this /api folder, and in which specific case it's useful? When we want to use the getStaticProps for example.
If anybody could explain with an example? That'd be fantastic. Thank you!
Related
EDIT (ANSWER): There were two issues with my code. One was that I was passing "http://localhost" instead of just "localhost" to the connectFirestoreEmulator line. The second was that I needed to check db._settingsFrozen before running the emulator line in order to prevent it from being double-initialized. I believe this has something to do with how Nuxt runs its code on the server side vs client side: I think Nuxt shares context/state across sessions on the server side, leading to the emulator line getting run more than once.
I have a Nuxt 2 app that I've connected to Firebase production successfully for a while now. I'm trying to set it up now to use the emulator instead of production when in local environment (indicated by an env variable), but I'm getting an error with the Firebase module specifically. There doesn't seem to be any issues using the auth emulator (which I've also set up). Code (plugins/firebase.js):
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
export const services = { auth, db };
export default (context) => {
if (context.env.appEnv === 'dev') {
console.log('dev', parseInt(context.env.firestorePort))
connectFirestoreEmulator(db, 'http://localhost', parseInt(context.env.firestorePort));
connectAuthEmulator(auth, `http://localhost:${context.env.authPort}`);
}
}
I have narrowed it down to the "connectFirestoreEmulator" line which when commented out, there are no errors. When it's included, this is the error I get:
Firestore has already been started and its settings can no longer be changed. You can only modify settings before calling any other methods on a Firestore object.
Finally, when I set the plugin to run on client-side only, it no longer errors out which is odd. I'll probably just keep working with this client-only for now, but I would like to be able to run the firebase stuff on the server too ideally.
Any ideas/guidance is appreciated. Thanks in advance!
I've Googled the relevant terms and found one other question that was similar to my question ("Firebase Error : Firestore has already been started and its settings can no longer be changed." connecting Firebase v9 with Firestore Emulator). However, because I don't have enough reputation on SO, I can't comment to ask the OP if he ever found out what was happening (which I would normally do before asking my own question, but I'm not being given a choice here).
I also even looked at the nuxt-firebase npm package's source code (https://github.com/nuxt-community/firebase-module) to see how they may have set up the emulator, but their plugin/code is written so differently from mine that it was unhelpful.
I have problem when invoking deployed function in firebase. I have an editor role in the firebase project and when I deployed functions, didn't have any problem with invoking them. When I deployed a new function yesterday, I got the error message that says
Error: Forbidden
Your client does not have permission to get URL / < Function Name > from this server.
Nothing has been changed to my role. It is strange that since yesterday, whatever function I deployed, threw those errors.
In gcp console/cloud functions, where you can see permissions of the function that was selected, I've noticed that "cloud functions invoker" was not assigned to that function. I thought this should be added to any function by default as long as I have an editor access but strangely it does not add them anymore. other functions that were deployed since yesterday have the same issue
any suggestions or advices will be appreciated. Thank you
Please Review Allowing unauthenticated function invocation
As of January 15, 2020, HTTP functions require authentication by default. You can specify whether a function allows unauthenticated invocation at or after deployment.
So here's the answer from the firebase team
The issue you are experiencing is likely caused by the fact that after January 15, 2020, Google Cloud Functions automatically creates HTTP functions to be >private by default.
Please, update the CLI, by running the following command:
npm install -g firebase-tools
This will ensure that future HTTP functions that are created will be publicly accessible.
Lastly, for the existing functions that has the permission issues, you will need >to manually set a function to public using Cloud Console or gcloud CLI.
If you have any questions or you are still facing this issue, please, don’t >hesitate to write back.
edited*
There could be several reasons to cause this issue.
check your function endpoint url make sure there's no typo or space
In the gcp console, make sure you have permission to invoke function https://console.cloud.google.com/functions/list?project=<YOUR_PROJECT_ID>
If the above two are checked, delete your function and redeploy your them again
Unfortunately, you can't do this in Firebase, you have to go into the Google Cloud project which 'hosts' your firebase project. You can follow this guide by Google, and have a look at the screenshots below:
You should see Allow unauthenticated now
To allow unauthenticated invocation of a function, you add the special allUsers member id to the function and grant it the Cloud Functions Invoker role:
You can limit domain access in your function, for example:
exports.myTest= async(req, res) => {
res.set('Access-Control-Allow-Origin', 'foo.com');
...etc
I defined my Firebase cloud functions in typescript/JS and deploy using Firebase CLI. I got this error after customizing the deployment settings, and I fixed it by specifying invoker="public" - I did not need to dig into IAM settings or use the console or CLI to fix.
export const serve = functions
.region("us-west2")
.runWith({
invoker: "public", // this is the magic line
})
.https.onRequest(
async (request: functions.Request, response: functions.Response) => {
// ...
})
updating firebase-tools wasn't enough in my case because i already deployed that function and updating it didn't fix the issue, i had to delete it and deploy again
I need to connect monitoring and tracing tools for our application. Our main code is on Express 4 running on Google Cloud Functions. All requests incoming from front nginx proxy server that handle domain and pretty routes names. Unfortunately, trace agent traces this requests, that coming on nginx front proxy without any additional information, and this is not enough to collect useful information about app. I found the Stack Driver custom API, which, as I understand might help to collect appropriate data on runtime, but I don't understand how I can connect it to Google Cloud Functions app. All other examples saying, that we must extend our startup script, but Google Cloud Functions fully automated thing, there is no such possibility here.
Found solution. I included require("#google-cloud/trace-agent"); not at the top of the index.js. It should be included before all other modules. After that it started to work.
Placing require("#google-cloud/trace-agent") as the very first import didn't work for me. I still kept getting:
ERROR:#google-cloud/trace-agent: express tracing might not work as /var/tmp/worker/node_modules/express/index.js was loaded before the trace agent was initialized.
However I managed to work around it by manually patching express:
var traceApi = require('#google-cloud/trace-agent').get();
require("#google-cloud/trace-agent/src/plugins/plugin-express")[0].patch(
require(Object.keys(require('module')._cache).find( _ => _.indexOf("express") !== -1)),
traceApi
);
I have the following code in index.js file located into functions folder in my google firebase proyect:
net=require('express')()
net.get('/',function(req,res){res.sendFile(__dirname+'/slave.htm')})
exports.run=require('firebase-functions').https.onRequest(net)
require('socket.io').listen(net).on("connection",function(socket){})
But when I execute \gfp1>firebase deploy in command prompt, this give me that errors:
You are trying to attach socket.io to an express request handler function. Please, pass a http.Server instance.
Yes, and I pass and http server instance in the following code:
net=require('firebase-functions').https.onRequest((req,res)=>{res.send("socket.io working!")})
exports.run=net;require('socket.io').listen(net).on("connection",function(socket){})
It gives me again the following error:
You are trying to attach socket.io to an express request handler function. Please, pass a http.Server instance.
And I try attaching socket.io to firebase functions with that code:
net=https.onRequest((req,res)=>{res.send("socket.io working!")})
exports.run=require('firebase-functions').net
require('socket.io').listen(require('firebase-functions').net).on("connection",function(socket){})
And that gives this error:
https is not defined
When I run this code in localhost:
app=require('express')()
app.get('/',function(req,res){res.sendFile(__dirname+'/slave.htm')})
net=require('http').createServer(app);net.listen(8888,function(){console.log("Server listening.")})
require('socket.io').listen(net).on("connection",function(socket){})
The console emmit \gfp>Server listening., and when I go to url http://127.0.0.1:8888, it works sending an html file to navigator, as I expected:
<script>
document.write("File system working!")
document.body.style.backgroundColor="black"
document.body.style.color="white"
</script>
But the problem happens when I try to convert net=require('http').createServer(app);net.listen(8888,function(){console.log("Server listening.")}) to net=exports.run=require('firebase-functions').https.onRequest((req,res)=>{res.send("Firebase working!")}), it seems to be impossible.
You can't run code to listen on some port with Cloud Functions. This is because you aren't guaranteed to have a single machine or instance running your code. It could be distributed among many instances all running concurrently. You shouldn't know or care if that happens - Cloud Functions will just scale to meet the needs placed on your functions.
If you deploy an HTTP type function, it will automatically listen on the https port for the dedicated host for your project, and you can send web requests to that.
If you want to perform transactions over a persistently held socket, use the realtime database client write values in the database, then respond to those writes with a database trigger function that you write. That function can send data back to the client by writing something back to the database in a location that's being listened to by the client.
Facing a very strange issue.
Following this guide https://azure.microsoft.com/en-in/documentation/articles/app-service-mobile-xamarin-forms-blob-storage/ to implement File Sync in Xamarin Forms app.
The Get method in my service (GetUser, default get method in App service controller) is being called thrice & on the 3rd iteration it gives me a 404 resource not found error. First 2 iterations work fine.
This is the client call
await userTable.PullAsync(
null,
userTable.Where(x => x.Email == userEmail), false, new System.Threading.CancellationToken(), null);
If I remove the following line,
// Initialize file sync
this.client.InitializeFileSyncContext(new TodoItemFileSyncHandler(this), store);
then the code works just fine, without any errors.
I will need some time doing a sample project, meanwhile if anyone can shed some light, it will be of help.
Thanks
This won't be an answer, because there isn't enough information to go on. When you get a 404, it's because the backend returned a 404. The ideal situation is:
Turn on Diagnostic Logging in the Azure Portal for your backend
Use Fiddler to monitor the requests
When the request causes a 404, look at what is actually happening
If you are using an ASP.NET backend (and I'm assuming you are because all the File tutorials use ASP.NET), then you can set a breakpoint on the appropriate method in the backend and follow it through. You will need to deploy a debug version of your code.
this is sorted now, eventually I had to give it what it was asking for. I had to create a storage controller for User too, although I don't need one as I don't need to save any files in storage against the users.
I am testing the app further now to see if this sorts my problem completely or I need a storage controller for every entity I use in my app.
In which case it will be really odd as I don't intend to use the storage for all my entities.