We're using the Next.js Serverless Component from: https://serverless-nextjs.com/ to deploy our Next.js app to AWS using the Serverless framework.
It takes around 7-8 mins for the app to be built and then deployed to AWS.
We were hoping to instead build the app up-front and then deploy the pre-built code...
You can tell Serverless to not build and just do the deployment with build.enabled: false:
# serverless.yml
myNextApplication:
component: "#sls-next/serverless-component#3.7.0"
inputs:
bucketName: our-bucket-name
build:
enabled: false
However when we run yarn next build the app is built under ./next.
When serverless builds the app it stores the state in .stateless and the files in .stateless_nextjs. So therefore the next build isn't compatible with deploying a prebuilt app...
This means if we try and build the app and then call serverless after we get the following error:
myNextApplication › Error: ENOENT: no such file or directory, open '/Users/cameron/Projects/nextjs-serverless/.serverless_nextjs/default-lambda/manifest.json'
So how do you build the app first and then deploy the build using Next.js Serverless Component?
Versions:
"dependencies": {
"next": "12.2.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"serverless": "2.72.2"
},
component: "#sls-next/serverless-component#3.7.0"
The reason is probably wrong next.js middleware setup. manifest.json is built upon simulated requests that goes through nextjs middlewares. please refer to this stackoverflow answer.
nextjs middleware had some structural changes around v12.x that requires migration. it's hard to figure out what's wrong because it gives little or no warning messages and it builds okay. I had similar issues too.
Solution
check if your deploy includes proper package lock file(yarn.lock, package-lock.json...) so that fixed version of next.js is included when deploying.
check latest middleware examples from github repo and try match middleware file structure and code.
check out nextjs middleware migration guide mentioned earlier; try build in local environment and make sure manifest.json is created.
Related
I need to deploy a second cloud function. I've noticed than when I deploy it with firebase deploy --only functions:secondFunction, the process skips the 'functions: updating Node.js 16 function app(us-central1)...' step and says deploy complete yet the cloud function remains unchanged. Kindly help
This is a known issue in this github thread1 & thread2, it is a result of the nature of Typescript's ability to import things outside of the obvious source tree.
typescript is building into lib/functions/index.js instead of
lib/index.js, thus package.json is pointing to the wrong file, and
deploying an older compiled .js file.
So you can either
edit "main" in the package.json "main":"lib/index.js" to "main":"lib/functions/src/index.js" to point at the new location
remove imports and rebuild, then it went back to the building it at lib/index.js
You can also check this stackoverflow example to properly export the function and deploy in javascript
My Firebase application has dev & prod environments (two separate Firebase projects).
Issue: The config passed to firebase.initializeApp() is environment-dependent. Currently, I have this hardcoded. If I want to deploy to dev, I comment-out the initializeApp call with the prod config, and visa versa. Is there anyway to do this intelligently with environment variables? For instance, when I run the commands:
firebase use prod
firebase deploy --hosting
can 'prod' be passed as an environment variable to the javascript code so it knows to pass the prod-config to firebase.initializeApp()?
This is a fairly common development scenario and Angular has you covered. Beyond Firebase there are probably other options you may want to change depending on whether you are testing/deploying in development or production.
Check out the Angular docs for Building and serving Angular apps. This has all the info detailing the usage of this.
They make use of an environment.ts file, which most likely would include your Firebase development config, and an environment.prod.ts file, which would include your Firebase production config.
In your angular.json file you detail the configuration options where if you are building with a production option it would replace the environment.ts file with your envionrment.prod.ts file.
When using ng build it would use your dev config. When ready to test and deploy your app you would add a configuration switch, such as ng build --configuration=production
I'm creating a small Next.js app with a local ~250MB SQLite db. I put the mydb.sqlite file in the root folder of my project, and import it using better-sqlite3:
import sqlite from 'better-sqlite3';
export const db = sqlite('./mydb.sqlite');
I have a couple of server-side rendered (SSR) routes that query data from the DB and renders them in a React page. This works well locally with next dev on localhost:3000. However, when I deploy to Vercel, and visit the same SSR page, I get the error at runtime:
ERROR SqliteError: unable to open database file
It's worthy to note that since the DB is >100MB, I cannot commit it to git. Instead, in my build phase, I download it:
// package.json
"scripts": {
"build": "curl $DB_URL -o mydb.sqlite && next build",
},
I also have some statically-generated (SSG) pages which query the DB, and those pages are correctly generated. Only SSR pages have that error at runtime.
Is there something I forgot to do? Must I commit the db to git? Should I configure the webpack config?
I looked on the internet for sqlite + next.js, but it always involve prisma; I prefer plain SQL queries.
SSR pages on vercel are rendered by their serverless functions. These functions don't have your sqllite file layered inside and thus you get the unable to open error.
we have a project repo where backend team have added new apis.
other developers have run and configured amplify and codegen.
now I want to add these new queries and their types.
when I run amplify codegen i get this error:
Please download the schema.graphql or schema.json and place in C:\leag\nevClon\newwebsite before adding codegen when not in an amplify project
and when i run amplify add codegen it says Codegen support only one GraphQL API per project.
could someone guide me whats the right way to do that.
I've seen this problem in the past. Things I've tried include ...
Make sure you are in the correct amplify environment.
Run amplify pull to ensure you are up to date.
Try re-initializing using amplify init
When all else fails, try re-cloning the repository.
i am trying to deploy my project on firebase hosting. And whenever i am using firebase init it is showing error in terminal as "firebaserc already has a default project " and it exit with that error
i have tried firebase logout and firebase login again . And used "firebase use" command also to change the project but it is still performing the firebase init action on the default project
i want to remove that default project
If you look very carefully at the messaging, it's saying that the name of the file is ".firebaserc" with a leading dot. This file indicates that firebase init was already run in this folder, and the contents of that file describe which project it's connected to (flairboat-48f7b). If you no longer want that file, delete it and start over. Since it starts with a dot, it might be hidden from normal view, but you can be sure that it exists.
you should write:
firebase use --add
and it work! You get the option to choose the preject from firebase.
I ran into the same issue.
Due to a small mistake in setting up the project in firebase, I had to delete it.
But later, I realized that my application NEEDS the default project to be hosted from firebase.
Since I found no shortcuts and running out of time, I did "this" to fix the issue in 10 minutes...with a 5-Step-Process. This is not a "Clever tip". But if you want things up and running soon, you can try this...
Create a new project (in my case, it's React project in VS Code IDE) using - npx create-react-app newprojectname to create a new react project with a different file name.(Don't delete or replace your previous project yet... )
While the new project is being created, create a new project in firebase to host your project.
Copy the folder from your old project that has all your work (it's "src" folder in case of React) and replace the "src" folder in the new project you created in your local machine.
Install all dependencies...Don't forget to add any dependencies you added to you old project. Look at the package.json file of the old project and import all dependencies.
Hit the start command (npm start in my case) and see your project running.
*I'll update if I found some firebase secret to resolve this issue. You can look for the same.
Ensure your firebase project support email and firebase initialize login email are same. If different? It won't be worked. so you must ensure it that two email (firebase project support email and firebase initialize email) are same.