I cloned a quickstart angular application.
I run firebase init and firebase deploy,
and output shows deploy successful. I naviagate to the url, but it just shows the Welcome screen. Why don't I see my content?
After running: firebase init
Few questions will be asked and Reply(In Bold) as follows:
Are you ready to proceed? : Yes
Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. : Hosting: Configure and deploy Firebase Hosting sites
=== Project Setup
Select a default Firebase project for this directory: Your firebase Project name
=== Hosting Setup
What do you want to use as your public directory? dist
Configure as a single-page app (rewrite all urls to /index.html)? No
File dist/404.html already exists. Overwrite? No
File dist/index.html already exists. Overwrite? No
-----Firebase initialization complete!-----
Now Re-run your app using: ng build (Imp step)
----Deploy----
firebase deploy
The repo I cloned didn't place an index.html file in the /dist directory.
The welcome screen is the default index.html that firebase creates.
I jsut had this issue, its because I ran a build and then firebase init which caused the /build/index.html file to be overriten.
After you init the firebase project just rerun the build and then deploy.
there is no problem if you ran build and then do firebase init.
After deployment, if you see the welcome screen. Before doing anything just wait for some time and Refresh the page. it worked for me
Angular projects aren't built directly inside /dist. They are usually built like /dist/your-project-name
So when you firebase init and you are asked What do you want to use as your public directory? provide it /dist/your-project-name instead of just /dist
And if /dist/your-project-name folder really has your project then it'll surely ask you File dist/your-project-name/index.html already exists. Overwrite?, you say no
In case it didn't ask you about overwriting then it means the public address you gave above is either incorrect or maybe you haven't yet built your project using ng build command.
Don't forget to rebuild you application again before firebase deploy. Your dist folder should be same folder name you setup as the public folder during your firebase init.
I had same problem with my deployed react app using Firebase to solve that as suggested above in first answers rebuild your app after running firebase init successfully & before running firebase deploy command. Then deploy your app.
If it's first time then you see welcome screen with hosting documentation. Then wait for few minutes around 15 to 20 minutes, then open app URL. It's running
Update the firebase.json file
"hosting": {
"public": "dist/your-app-name"
for ex: my app name is "DataView" and looks like this the firebase config file:
"hosting": {
"public": "dist/DataView",
Important:
If you are already tried to deploy the flutter web app project, then 1st remove (1).firebase,(2)build,(3)firebase.json from your project directory root page.
then just follow the below 7 steps-->
1 step: First run firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
{project path}\{projectname}
Before we get started, keep in mind:
* You are currently outside your home directory
2nd step:
? Are you ready to proceed? Yes
3rd step:
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Actio
n deploys
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
i Using project ****21ed1 (projectname)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
4th step:
? What do you want to use as your public directory? build/web
5th step:
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? **No**
+ Wrote build/web/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
+ Firebase initialization complete!
6th step:
Then run: flutter build web
Building with sound null safety
Compiling lib\main.dart for the Web... 2,656ms
7th step:
Then run: firebase deploy
=== Deploying to '****21ed1'...
i deploying hosting
i hosting[****21ed1]: beginning deploy...
i hosting[****21ed1]: found 15 files in build/web
+ hosting[****21ed1]: file upload complete
i hosting[****21ed1]: finalizing version...
+ hosting[****21ed1]: version finalized
i hosting[****21ed1]: releasing new version...
+ hosting[****21ed1]: release complete
+ Deploy complete!
Just refresh the page . If you had deployed your project currectly. Its just a matter of refresh , that will show your content. 😊
Related
I used Vue , when i build
npm run build
i get a dist folder with a index.html file , so i can hosted in any hosting ,
now i tried to use Nuxt and when i build i dont get an index.html file , so i cant deploy on an normal hosting ,
so i thire a way to create a build in Nuxt just like normal Vue ,
please Notice:
i know that Nuxt provide a free hosing
i need to build it as SPA app , not as a static pages
The command to build out nuxt is npm run generate & builds out to a folder called .output.
You will find the index.html file in .output/public.
https://nuxt.com/docs/api/commands/generate#nuxi-generate
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?
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.
I forgot to logout from Firebase account in Terminal and change account before proceeding with firebase init,
and I created a Firebase function for the new project with an old account, I went back and deleted the files including xcworkspace, and I run pod install and created a new workspace, and when I want to run firebase init again it says
MooMyeongs-MacBook-Pro:Doshirak moomyeong$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/moomyeong/Desktop/Desktop/Applications/Doshirak
? Which Firebase CLI features do you want to set up for this folder? Press Space
to select features, then Enter to confirm your choices. Firestore: Deploy rules
and create indexes for Firestore, Functions: Configure and deploy Cloud Functio
ns
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
i .firebaserc already has a default project, using newproject-7432a.
Error: Failed to get Firebase project newproject-7432a. Please make sure the project exists and your account has permission to access it.
Hence newproject-7432a is my old project with an old Firebase account, my new project is Doshirak
Is there anyway for me to solve this issue, or do I have to start from the beginning?
This message is telling you that the project directory where you're running firebase init has already been configured:
i .firebaserc already has a default project, using newproject-7432a.
The file .firebaserc contains the ID of that project. If you don't want to use that project any more, just delete .firebaserc and run firebase init again.
This condition arises when we are initialising the project which has been already deployed on Firebase. While initialising the project in Firebase .firebaserc file is created which has the name of the Firebase Project where our application be deployed.
We can simply change the default the project name to the relative FirebaseBase Project name and redeploy after ngbuild.
so change go to .firebaserc file and change
"projects": { "default": "your-previous-app" }
to
"projects": { "default": "new-firebase-app" }
Change your project directory from one drive to another drive. If project directory is in C drive then switch it to D drive and then initialize and deploy again on firebase. This problem will be resolved. It is the easiest method. If you are a beginner then it is the best solution for you otherwise locating .firebaserc file will be very difficult for you.
Delete the .firebaserc and firebase.json from the project and re-run firebase init.
Perform the proceeding steps and select Y when prompted ? File build/web/index.html already exists. Overwrite?
Firebase will initialize again for the new project Doshirak(in your case).
i solved this issue by changing the root directory from c: to d: drive... because i was unable to locate firebaserc file. therefore i created my project in d: drive then in cmd i pointed my project like so D:\sampleApp>
I could not actually find the .firebaserc file it was probably hidden. The easiest thing to do was delete the root folder and create a new one. Solved it for me
delete the .firebaserc file, located in your project main folder
change both package.json and package-lock.json name property to your new project name
Rename your project folder to the new name, the one that matches your firebase new project
run firebase init again
That worked for me!
I deleted .firebaserc file and now it works fine. On case you can't find firebaserc file, it is mostly located in C:\Users\User-Name.
NOTE: please make sure to show hidden files.
Make changes in firebase.json file
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.