Ali BaderEddinFollowBetter Programming--ListenShareIn my current Next.js web app, I have two API endpoints:While these endpoints work seamlessly in my local environment, they encounter issues in the Vercel production environment due to the ten-second Serverless Function Execution Timeout.I could upgrade from the Hobby plan to the Pro plan for $20/month to increase the timeout to 60 seconds, but the GPT-4 endpoint may take up to two minutes to run. Additionally, I’m reluctant to spend $240/year just for this single feature.Furthermore, I have an existing mobile app that I would like to integrate with those capabilities at some point in the future.Considering the requirements above, I have decided to migrate my API endpoints from Vercel Serverless Functions to Firebase Cloud Functions.In this article, I will guide you through overcoming Vercel’s Serverless Function Execution Timeout limitation by replacing them with cost-effective Firebase Cloud Functions.Install Firebase CLI and initialize Cloud Functions in your project:The firebase init functions command initializes Firebase Cloud Functions in your project. This command configures and files to create and deploy serverless functions using Firebase.Note: I ran it on my existing Next.js code repository, but I recommend starting a new repository for the Firebase functions.When you run firebase init functions, the Firebase CLI guides you through an interactive setup process:After running firebase init functions, you can start developing your Firebase Cloud Functions by adding your code to the index.js (or index.ts for TypeScript) file inside the functions folder. Once you have written your functions, you can deploy them using the firebase deploy — only functions command.Next, create the new functions inside the functions directory (created during initialization). For example, in functions/index.ts:For my own functions, I copied and pasted the code and the imports from my existing Next.js APIs. I got several errors from Firebase ESLint rules, and fixing them got so annoying and counterproductive, so I just ended up disabling the rules by setting strict to false in the tsconfig.json file in the functions folder.We can use the Firebase Emulator Suite to test the Firebase Cloud Functions locally. Here’s how to set it up and run your functions locally:Navigate to your project’s root directory and set up the emulators:When prompted, select “Functions” and follow the prompts to set up the Functions Emulator. Start the Firebase Emulator Suite:This will start the emulators, including the Functions Emulator.Call your function locally using a tool like curl or Postman. Use the URL provided in the emulator output (e.g., http://localhost:5001/Your client does not have permission to get URL
I noticed (with help from Stack Overflow) a “private” setting in the package.json in the functions folder, so I set it to false and redeployed. Didn’t work!When I tested the function in the Firebase Cloud Function console, it worked as expected.https://console.cloud.google.com/functions/details/us-central1/generateWorkout?env=gen1&tab=testing&authuser=0&project=handstand-questI found steps from the same Stack Overflow thread that worked!Wisely, Google shows a message to prevent you from making this decision to make your cloud functions insecure.Although insecure, I proceed with this option until I guard my web app with login/signup capabilities.With this change, the curl request to the public endpoint works as expected. Now that I have the endpoint running, I will test call it from the app.Let’s test the change in the staging environment.Since I initialized the Firebase functions folder in the Next.js project that gets deployed to Vercel; I need to tell Vercel to ignore this new folder. This is the error I currently get on deployment to Vercel.Type error: Cannot find module firebase-functions or its corresponding type declarations.To tell Vercel to ignore a folder, we can add a .vercelignore file to the root of our project and add the folder or files we want to ignore.I added the following line to the .vercelignore file and pushed the change to the git branch, so Vercel could automatically handle the deployment to the staging environment.Side note: If I deployed the Firebase functions to their own codebase, I wouldn’t have had to deal with this. Luckily, it’s a simple change to ignore the functions folder.When testing in the staging environment, I got this error:Access to fetch at ‘https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout' from origin ‘https://hq-exercise-catalog-bl7zti3ol-alibad.vercel.app' has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.I ran the Next.js local environment and went ahead and did some testing. I got the standard CORS error from localhost. It made me appreciate what Next.js/Vercel is doing behind the scenes.Access to fetch at ‘https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout' from origin ‘http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.Side note: This reminded me… It’s really expensive to build secure software, and by design, it slows companies down and has a major impact on reducing the innovation rate. Still, it’s necessary and the responsible thing to do. Building a side project, I don’t need to be that responsible!The error message is a CORS (Cross-Origin Resource Sharing) issue. This issue happens when you try to make a request from a different origin (in this case http://localhost:3000) to a server (https://us-central1-handstand-quest.cloudfunctions.net/generateWorkout) that doesn’t have the necessary headers to allow requests from different origins.I added the CORS headers to the Cloud Functions to resolve this issue.First, install the CORS npm package:Wrap the login in each function with this:This will deploy the Cloud Functions with the updated CORS headers. With the above steps, the Cloud Functions should now allow requests from different origins.Unfortunately, when I tried to call the Firebase Cloud Function from my Web App, I still got an error saying the CORS policy blocked that access. So, where is the CORS policy defined?Let’s look at the requests and responses in the Network tab in the Google Chrome Developer Tools.There is an initial preflight request, as shown below:The OPTIONS request has an HTTP 204 from the server, with the following properties in the response header.The OPTIONS request is then followed by the POST Request.The response for the POST request is an HTTP 408.HTTP 408 status code, also known as “Request Timeout,” indicates the server did not receive a complete request from the client within the server’s allotted time limit.This means Firebase is timing out too, and the resulting browser error is misleading!The response also includes a Referrer Policy set to strict-origin-when-cross-origin.Regarding the Referrer Policy set to strict-origin-when-cross-origin, this security feature controls how much referrer information should be included when a user navigates from one origin to another. It’s not directly related to the timeout issue or the CORS configuration, so I will ignore it.So Firebase also happens to have that timeout. However, the difference is that Firebase lets you configure it without subscribing to a $20-per-month plan. By default, Firebase Cloud Functions have a timeout limit of 60 seconds. You can increase this limit to 540 seconds (nine minutes).For the generateExerciseData function, the 60-second timeout is good enough since gpt-3.5-turbo is much faster than gpt-4, which is used in the generateWorkout function.Increasing the timeout limit may result in higher resource usage and, thus, costs. However, I’m willing to try and see how that plays out. I highly doubt it’ll hit $20 every month. We’ll see how that goes with time when traffic patterns change. For now, I’m expecting it to cost less than $1 a month.To change the amount of timeout in the generateWorkout Firebase function, let’s update the function definition in the index.ts file. I think I want it to wait up to three minutes.I deployed the change to Firebase and finally got unblocked!To speed up the whole experience and make it easier to enjoy, streaming the GPT data and gradually reflecting that in the UI would be a good idea. This will reduce the time it takes to start seeing data, and it will avoid timeouts in the first place.Upon reflection, it became clear that the current design approach was not optimal, which led to the need for a workaround to address the timeout issue. A more efficient approach would have been to deliver the data in smaller, more manageable chunks from the outset.Time is a critical factor, and while transitioning from Next.js APIs to Firebase Functions, authentication and CORS issues caused a delay.In my upcoming article, I will explore whether streaming is a more effective design strategy. It’ll all depend on how long it will take and whether unreasonable blockers come up.It will be tricky, though, since my internal implementation gets GPT to return the exact JSON format, which would be hard to stream.I hope this article gave you the idea and the details on how to update your Next.js application to use Firebase Cloud Functions instead of Vercel API endpoints.By making this simple switch, you can save a significant amount in yearly costs without sacrificing the functionality of your application.Although Vercel is an excellent platform, the ten-second timeout can be a hindrance. Nonetheless, I remain a big fan of Vercel and appreciate its numerous benefits.----Better ProgrammingSoftware Eng Leader | Process ObsessedAli BaderEddin--Sergei SavvovinBetter Programming--9Dmitry KruglovinBetter Programming--31Ali BaderEddin--SebastianinCodingTheSmartWay--4SebastianinCodingTheSmartWay--1Ivan CamposinSopmac AI--1SebastianinCodingTheSmartWay--Teemu Maatta--1Adhithi Ravichandran--10HelpStatusWritersBlogCareersPrivacyTermsAboutText to speechTeams/generateWorkout from this server.
Subscribe to Vedvyas Articles
Get updates delivered right to your inbox!