next.js build failed before firebase deploy - firebase

I am trying to deploy my next.js file to firebase.
The command firebase deploy --only hosting works, but the deployed file is not built in the file of next.js.
I tried this:
I edited package.json, script.build setting next build into next build && next export
thus the /out folder was automatically created.
I set the /out folder as the public directory and then executed firebase deploy.
Here is the guide I used:
https://medium.com/nerd-for-tech/lets-deploy-a-next-js-app-with-firebase-hosting-e070b3aecd04
Obviously this failed. That is why I am asking for help.
When I edit index.html in the /out file and then deploy, it is successfully deployed.
Here is the picture:
I am expecting that the problem is on building the next.js file.
Is there anyone that knows what to do in order to build it successfully?

Related

How to configure esLint in an Electron next.js setup?

I startet an Electron project based on the official sample project from Vercel (https://github.com/vercel/next.js/tree/canary/examples/with-electron-typescript). Now I want to add eslint to the project. I have done it like the docu says (https://nextjs.org/docs/basic-features/eslint). But eveytime I run npm run lint I get an error "Couldn't find a pages directory. Please create one under the project root".
I tried to set the "rootDir" like described in next.js docu but that also ends in that error message.
If I change the lint script in package.json from "next lint" to "eslint /renderer" it seems to work but with an error "Pages directory cannot be found at . If using a custom path, please configure with the no-html-link-for-pages rule in your eslint config file." and VSCode seems to ignore the rules.
How can I setup eslint to use the renderer folder of electron as next.js root dir?

How to display correct page on firebase

I've started building next.js app and I tried to deploy it on firebase. My dev server on local machine displays correct page, built with next.js, but when I deploy it, it displays index.html
dev server:
On my firebase server there is a blank page from public folder.
How to show default next.js page on firebase, and why is it going like that?
I've followed the steps included in this tutorial: https://www.youtube.com/watch?v=bReCIxeWayw
and then executed command: npx firebase deploy
My directory structure:
.firebase
.next
node_modules
out
pages
public
styles
.firebaserc
.gitignore
firebase.json
next.config.js
package-lock.json
package.json
README.md```

Firebase tools broke my webapp dependencies

I was building a small web app using Vue cli and webpack/babel. I've been working for a month using "npm run build" and placing the files created in th "dist" folder on my server. Now I would like to add Firebase to the project but "Firebase deploy" command doesn't build the same files. It actually creates a new placeholder index.html file and even if I replace that file file for my previous html I'll get loads of errors because all the other components are not there (no JS no CSS)...
This is my firebase setup.
These are the files I used to create using "Npm run build" in the "dist" folder
The new "Firebase deploy" files – now in the public folder – no JS no CSS!
The errors I get now...
It seems like now all the dependencies that were build nicely put together by the Vue Cli webpack/babel workflow are all gone. Any suggestions on how to fix this without having to start from scratch?
Now even if I type NPM run build i get errors:
With npm run build you build your Vue.js application, independently of Firebase.
It is not clear to me if you still build your app to the dist directory or to the public one. But, based on your Firebase setup ("What do you want to use as you public directory"), at the end you need to have ALL the files (incl. css and js) produced by npm run build in the public directory.
One simple solution is to change the public directory of Firebase to dist: you can do that in the firebase.json file and change "hosting": {"public": "public",... to "hosting": {"public": "dist", ....
A last point: you have answered No to the question "Configure as a single-page app". Normally, with a Vue.js app you should answer Yes.

'firebase init' always leads to C:/Users/PC

When I run the command:
PS C:\Users\PC\Desktop\Project> firebase init
it says:
You're about to initialize a Firebase project in this directory:
C:\Users\PC
I have tried running it in C:\Users and it worked properly, it won't go anywhere farther than C:\Users\PC
Can anyone help me with this?
When you run firebase init, then first thing is does is check parent directories for the presence of a hidden ".firebaserc" file to see if there is a project already created. If the file isn't found, it will create a new project in the current directory. If the file is found, it assumes you are working with an existing project in the stated folder.
You have a .firebaserc file in C:\Users\PC. If this is not what you expect, and you don't actually have a project there, d then you should probably just delete that file and start over.

Could not read public directory. Remove links and shortcuts and try again. (Firebase)

I was stepping through this tutorial:
https://codelabs.developers.google.com/codelabs/firebase-web/#0
On step 9 it asks you to execute firebase deploy but when I try to do it I get the error message:
Could not read public directory. Remove links and shortcuts and try again.
I don't know what it means by links and shortcuts as far as I can tell there nothing in this folder but plain old files.
The folder I'm trying to deploy is the web folder which should contain the completed sample.
Note that as per the instructions the storage.rules was updated with the name of the bucket and the index.html was updated with the firebase snippet.
The firebase.json file looks like this:
{
"database": {
"rules": "database-rules.json"
},
"storage": {
"rules": "storage.rules"
},
"hosting": {
"public": "./",
"ignore": [
"firebase.json",
"database-rules.json",
"storage.rules"
]
}
}
Any ideas as to what this error could be? Is there any way to get more detailed information?
You should use debug command like this: firebase deploy --debug , this can help you find out what cause this problem easily and clearly.
In my case a temp emacs file was causing the issue:
$ firebase deploy
=== Deploying to 'xxxx-42402'...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing public directory for upload...
Error: Could not read public directory. Remove links and shortcuts and try again.
RooseveltPwnsU:xxxx xrdawson$ ls -la public/
total 3840
-rw-r--r-- 1 xrdawson staff 5122 Feb 13 12:52 #index.html#
drwxr-xr-x 15 xrdawson staff 510 Feb 13 14:40 .
lrwxr-xr-x 1 xrdawson staff 35 Feb 6 14:12 .#index.html -> xrdawson#RooseveltPwnsU.local.67168
Saving the file index.html inside emacs resolved the issue for me!
The problem was firebase-debug.log
The issue turned out to be unrelated to the configuration. The issue actually turned out to be a file permission issue with firebase-debug.log. I solved the issue by copying everything but that file into a new folder and deploying the new folder.
How I found out
Since there is no way to tell that's the issue from the error message above. I thought it would still be useful to walk you through the process I used to uncover the issue.
Windows 10
First I want to mention that I'm on a Windows 10 computer, I don't know if that's relevant, but just in case it is I thought I'd mention it.
1. Compare to a working project
In order to have a baseline / frame of reference, I created a new project using the firebase init command.
I then tried to deploy that. That was successful, so I knew deployment in general worked.
2. Use the same firebase.json
I then took the auto generated firebase.json file from the working deployment folder and replaced the firebase.json file in the project folder where the deployment wasn't working.
When I tried to deployed it still didn't work.
3. Remove permissions
At this point I suspected it was a permission issue. So I decided to zip up the folder and then unzip it to a different folder. Then try to deploy the new folder.
The theory being that the permissions would be wiped out in the process.
When I tried to zip the file I got a file permission error message. The name of the file with the issue was firebase-debug.log. That's the file that automatically generated when you try to deploy.
firebase-debug.log is automatically generated by the firebase deploy command
So instead of zipping and unzipping I just copied all the files except firebase-debug.log and tried to deploy that.
Success
It worked!
Still haven't figured out how to actually delete that damn file though.
After a rough search with no solution, I tried npm i then firebase deploy. Yay! it works.
I had this problem and in my case it was firebase serve that was locking the file. Stopping that process allowed the firebase deploy to run successfully.
I suspect its actually because two separate instances of firebase are trying to write to the same log file and serve holds a lock while running.
I just deleted the firebase-debug.log file and entered the following command:
firebase deploy --only funtions but firebase deploy will also work.
in my project i needed to deploy, but if you need to test locally try firebase serve or firebase serve --only functions or firebase serve --only functions,hosting based on your needs.
There's a possibility that you are in /functions when you want to deploy. In my case I run the firebase deploy --only functions:FOOBAR command in root (out of functions) folder and it worked.
Deleting node_modules and package-lock.json and rerunning npm install fixed the problem for me.

Resources