I can't upload my files to firebase.
I'm doing this.
I created a json file and added to mydirectory:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Then
cd mydirectory
firebase init
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub
Action deploys
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
? File public/404.html already exists. Overwrite? No
i Skipping write of public/404.html
? File public/index.html already exists. Overwrite? No
i Skipping write of public/index.html
Next
firebase deploy
Deploy complete!
Still seeing this:
I'm following this tutorial: https://www.youtube.com/watch?v=Gl-qlxfTJHE but still doesn't work.
Any help?
This tutorial is old
try command firebase deploy --only hosting
Look this: https://firebase.google.com/docs/hosting/quickstart
When you install firebase, the 'public' folder and 'index.html' are created automatically. I'm not sure where to put the 'public' folder in the current vue project file structure. The 'localhost: 8080' screen is displaying correctly, but the screen using firebase hosting is not showing.
This path is a Vue project. C:\Users\username\public\vue-project
And this path is a Firebase's 'public' folder. C:\Users\username\public
Then I ran 'firebase deploy' in cmd.
cd C:\Users\username>firebase deploy
cd C:\Users\username\public>firebase deploy
If, as you mention in your comments above, you still see the default Firebase "Welcome" page it means that probably you didn't overwrite it correctly.
You should put the entire content of your vue.js dist folder (generated through npm run build) into the public folder of Firebase hosting (and overwrite the default index.html file initially generated by the Firebase project setup script).
Then in you firebase.json file you have the following rewrite in order to handle the Single Page Application behavior of you vue.js application.
{
"hosting": {
"public": "public",
...
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
What is the best Way to deploy a vue.js app initialy created with vue-cli to Firebase Hosting?
I prepared the vue-app for deployment with
npm run build
This creates the folder "dist" with the bundled js-file and assets like pictures.
Then- after installing firebase tools globaly, I run
firebase init
This creates a folder "public" with a default index.html file inside.
First i set in firebase.json:
"hosting": {
"public": "dist"
}
and copied the index.html (the vue index.hltm) from the root-folder to "dist" folder.
Then i deployed with
firebase deploy
It runs, but the paths to the pictures seem to be broken .
I set public folder to "public" in firebase.json
"hosting": {
"public": "public"
}
an put vue index.html there, but then "dist" is not found.
I moved the "dist"-folder inside the "public"folder, and finaly- App is online on firebase.
But now npm run dev is not working any more. Firebase cli seems to break vue-cli.
So how to get vue-cli and firebase-cli playing together?
When you run firebase init few questions will be asked, like which firebase feature you want to use and select your project... when cli asks for
? What do you want to use as your public directory?
Type dist your desired folder. Now the dist folder will be deployed.
Check this link, Hope this helps.
I think i figured it out.
First, keep two separatet Projects, one for vue app and one for Firebase-Hosting.
So the CLI's can work independently and nothing gets broken. Develop your vue.js App and prepare for deploy with npm run build. All you need afterwards is the index.html in vue-project root and the folder dist
Create Firebase project with CLI executing firebase init in empty Folder. Here you can also maintain firebase functions if needed.
You define public directory during firebase init or afterwards editing entry in firebase.json
"hosting": { "public": "public"}
This will become the root-directory of your App. Vue.js expects to have index.html directly in the root-directory and a subfolder dist inside it.
So defining dist as root-directory is not what you want. Related paths like those for pictures in vue-app get broken.
Leave settings for public at default. Then copy index.html and dist-folder from vue-project inside public directory in Firebase-project.
If you want, you can now test localy what will get deployed using firebase serve
If everything fine, deploy using firebase deploy
dist should be your public folder. Here is the working configuration for VueJS with Firebase hosting:
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I've also written a written an in-depth guide on auto-deploying VueJS apps to Firebase hosting
When I am hosting my web page through firebase hosting then after writing command firebase deploy I got the following error:
Microsoft Windows [Version 10.0.14393]
(c) 2016 Microsoft Corporation. All rights reserved.
C:\Users\amarg\Desktop\amar>firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
C:\Users\amarg\Desktop\amar
Before we get started, keep in mind:
* You are initializing in an existing Firebase project directory
? Are you ready to proceed? Yes
? What Firebase CLI features do you want to setup for this folder? Hosting: Configure and deploy Firebase Hosting sites
=== 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, skipping
=== 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.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? File public/404.html already exists. Overwrite? No
i Skipping write of public/404.html
? File public/index.html already exists. Overwrite? No
i Skipping write of public/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
+ Firebase initialization complete!
C:\Users\amarg\Desktop\amar>firebase deploy
=== Deploying to 'learningweb-6b2a3'...
i deploying hosting
+ database: rules ready to deploy.
i hosting: preparing public directory for upload...
Error: An unexpected error has occurred.
C:\Users\amarg\Desktop\amar>
For me updating firebase-tools solved the issue
run below command in your cmd prompt
npm install -g firebase-tools
then try firebase init again
First of all, looking into firebase-debug.log in the root of your project (next to firebase.json) might help to define the error. In my case there was "Cannot read property 'deploys' of undefined" error. There's an associated issue on github. Removing extra sites (I didn't actually need them) and leaving only the default one in the Firebase hosting dashboard solved my problem.
If you still are serving your site on localhost using firebase serve it might cause problems. Shut it down then try the deploy. Worked for me.
Close the integrated terminal of your IDE by typing exit and hit enter, then re-open it and give the command firebase deploy
If the above option does not work then just use terminal in linux/mac and CMD in windows and navigate to the folder then give firebase deploy command
In my case, resolve with:
firebase deploy --except functions
Below code fixed my issue.
Add below code into firebase.json.
{
"hosting": {
"public": "./",
"ignore": [
"firebase.json",
"database-rules.json",
"storage.rules",
"functions"
],
"headers": [{
"source" : "**/*.#(js|html)",
"headers" : [ {
"key" : "Cache-Control",
"value" : "max-age=0"
} ]
}]
}
}
Make sure that you are logged in by running firebase login in the terminal.
I was using Firebase functions in the past, I scrapped the idea and created what I wanted in node.js.
So, if you are not using firebase functions remove the following in firebase.json file
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
}
For me I tried a lot, then I figured out that firebase.json still has functions,
I removed it and it worked
By the way I was using
firebase deploy --except functions
firebase deploy --only hosting
That didn't help
so maybe remove the ones that you don't need
{
*"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
},*
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Yes I've faced this issue..
This is because of my node version I was using Node v.8.0.0
I just downgrade it to Node v.16.0.3 and then my deployment done :)
It could be due to npm and node version
For mac os, you can update npm using command:
npm install -g npm#latest
and update node directly by going to link https://nodejs.org/en/ and download installer.
and run
npm install -g firebase-tools
For removing firebase hosting deployment errors (also if you are updating existing hosted site)
you can do process again
1] firebase login
2] firebase init
3] firebase deploy
Make sure your current folder has two things:
public folder (which contains all files index.html) And firebase.json file
In your firebase.json file, do you have a value set for functions or functions.source? If you do, that may be causing this issue.
Remove the functions in angular.json it will work
Firebase document for functions
In my case, this error occurred when I had not set the site name in firebase.json.
I get that error when I haven't run npm install. Try it out. I hope that simple solution helps anyone with the same problem.
To solve this problem without restart,
You have to make sure you shut down the server, by click on
CTRL + C
Then deploy your functions by firebase deploy --only functions
Then run it again firebase --serve
For me, it is because I run firebase deploy inside functions folder. I need to run it in the parent firebase directory
you should check if you have the folder of nodeJs and the folder of your website in the
same local disk first!
I had the same problem, NodeJs was in local disk (D:) and I was trying deploy from local disk (C:), but when I changed the folder of the website to (D:) it worked fine.
firebase deploy, firebase serve, firebase ... without any meaningful information in the firebase-debug.log while using Cloud Functions for Firebase?
Check out if you've package.json in your functions folder. It should have all dependencies from your root's package.json, and look somehow like this:
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"engines": {
"node": "12"
},
"scripts": {
"serve": "firebase serve --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"dependencies": {
"#angular-builders/custom-webpack": "^11.1.1",
"#angular/animations": "^11.2.7",
"#angular/cdk": "^11.2.6",
...
},
"private": true
}
devDependencies aren't required.
Just check your firebase.json and remove unnecessary dependencies, check mine
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
FWIW, I had this error while calling firebase deploy from a wrong directory..
I'm not sure that this is the answer, but I think this happened to me because I was still running npm run dev in another terminal when I did firebase deploy.
This seems like something which should be pretty easy to do, but for whatever reason, I'm being defeated.
I'm trying to use the firebase-tools CLI to interact with my database. I'm able to login without any trouble, and when I type firebase list, I get a list of all my current apps. It also tells me which app I'm currently connected to.
My problem is, I want to connect to one of the other apps. I'm running queries on my staging app, and I need to run them on my production app. I can see the production app in the list, but I'm not finding any way to switch to that app.
Thoughts?
Found some useful information here Firebase CLI Reference.
The following code works for me.
firebase use <project_id>
I rather use scripts. Consider a project structure like this:
your-project
├── .firebaserc
└── functions
├── package.json
└── index.js
Go to .firebaserc and follow the next example
{
"projects": {
"default": "project-name",
"prod": "other-name"
}
}
Then go to package.json and add the following scripts (changeToProd, and changeToDev).
{
...
"scripts": {
...
"changeToProd": "firebase use prod",
"changeToDev": "firebase use default"
},
"dependencies": {
...
},
...
}
If your IDE support npm scripts you can run them using the IDE UI, otherwise it can be run using the command console. Make sure you are inside the functions folder.
npm run-script changeToProd
You can verify your current project by running the following command from the terminal or added to the scripts as we just did
firebase use
If you are using Node.js on windows, your answer should be
firebase use <project_id>
but without the <> for example
firebase use chat-app-2a150
You can use the following code to view all your projects so as to pick the correct project ID to use
firebase projects:list
2020:
The officially recommended way is to use "alias":
In your .firebaserc, set different project IDs like this:
{
"projects": {
"production": "my-project-id",
"testing": "my-testing-project-id"
}
}
// you can also add them interactively with `firebase use --add`
Then switch projects in CLI with firebase use testing , firebase use production.
Note: switching projects won't create any git diff, it's simply remembered in your local machine. Use firebase use to see which project is currently being used.
Uncommon cases:
If you want to use your own ID without committing changes to the project owner's .firebaserc, do firebase use my-own-id locally as mentioned in the accepted answer.
If you want people to fork your code then use their own IDs, add .firebaserc into .gitignore.
In the directory where you run firebase list, there will be a file called firebase.json. If you open that in a text editor, you will see the app name in there. You can change it there or delete firebase.json to change the app.
Or save yourself the hassle of editing a text file and do as Jason says: use firebase init.
you can just use a command line switch
--project=my-firebase-project
I may be wrong but it seems that the original question was about changing apps within a given project, rather than simply changing projects.
This answer is about changing apps and site_IDs within a project.
In my case I have a project (CoolProject) with 2 web apps:
an assessment form: form
a main website: website
Both apps are in separate repos both locally and in GitHub.
Each app has its own specific site_ID:
form: coolproject-form[.web.app]
website: coolproject-website[.web.app]
I first setup the form app and deployed without any issue to coolproject-form. But when I created the web app (and associated coolproject-website site_ID) and tried to deploy it using firebase deploy --only hosting or firebase deploy --only hosting:website it incorrectly deployed it to coolproject-form overwriting the form app.
This is how I eventually solved the issue (based on this Firebase documentation):
Check that both apps and corresponding site_IDs are correctly setup:
firebase apps:list
firebase hosting:sites:list
Setup up the website deploy target for hosting (via .firebaserc)
firebase target:apply hosting website coolproject-website
Update firebase.json (for the website app):
...
"hosting": [{
"target": "website",
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}],
...
Deploy
firebase deploy --only hosting
With this the website app is now correctly deployed to coolproject-website.web.app.
Addition #cutiko's answer
In package.json
"scripts": {
...
"prod": "echo \"Switch to Production environment\" && firebase use prod && npm run runtimeconfig",
"dev": "echo \"Switch to Development environment\" && firebase use default && npm run runtimeconfig"
...
npm run runtimeconfig to get custom config environment
In .firebaserc
{
"projects": {
"default":"{project-dev-id}",
"prod": "{project-prod-id}"
}
}
to change firebase app destination project you can type "firebase use myProjectName" . i also used the above answeres "firebase list" to check what project i have
( work for me in firebase cli 7.4 with angular 7 app)