I come from vue 2 and when I installed firebase to vue 2 i just typed "npm install firebase" and firebase did the magic in the background and created all the files needed e.g. for hosting, security rules etc. But with Vue 3, when I try to install firebase by typing "npm install firebase", no fire is created.
Do I do something wrong or does a working work around for this problem exist?
Thanks
Chris
I created the files now manually. It depends on the setup you need. Since I use hosting and the firebase database I created the following files:
*** (in the root folder) .firebaserc (you can find your project id in your project settings in your firebase project)**
{
"projects": {
"default": "your-project-id"
}
}
*** (in the root folder) firebase.json**
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"trailingSlash": false,
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Please be aware that the second source code describes the following:
the file for the firestore rules is: firestore.rules
the file for the indexes is: firestore.indexes.json
there are no trailing slashed in the URL
the public folder is (not public): dist
this config is for a single page application
Related
I´m trying to deploy my code to two different Firebase-projects, one for development and one for production.
The my-app-dev project was already included and working, so I added the my-app (for production) with firebase use --add and selected the my-app.
This is how my Firebase-config looks now:
.firebaserc
{
"targets": {
"my-app-dev": {
"hosting": {
"app": [
"my-app-dev"
]
}
}
},
"projects": {
"default": "my-app-dev",
"prod": "my-app"
}
}
firebase.json
{
"hosting": [
{
"target": "app",
"public": "dist/app",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
],
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
}
As long as I deploy to my default project, everything works fine, but when I try to firebase deploy -P prod it shows the following error:
Deploy target app not configured for project my-app. Configure with:
firebase target:apply hosting app <resources...>
I tried to find some more information about this command, but still don´t know what to put for resources. Overall I feel like the .firebaserc has a very confusing structure.
I had the same problem but in a different fashion.
The project I have is an Angular 11 project, which has 4 different environments - the same behaviour of deploying to the default project (env) was fine but as soon as I tried to deploy to a different environment (firebase project), it failed with the same error:
Deploy target ___ not configured for project ___. Configure with:
I resolved this by adding to my .firebasesrc > targets:
{
"projects": {
"default": "default-project"
},
"targets": {
"default-project": {
"hosting": {
"frontend": [
"default-project"
]
}
},
"staging-project": { // Added this entry.
"hosting": {
"frontend": [
"staging-project"
]
}
}
}
}
According to this comment in GitHub it cannot be done without a "hacky" method like swapping the firebase.json programmatically during deploying.
Right now the Firebase CLI is built to treat projects as anonymous
environments that are functionally identical. This is important to be
able to deploy the same assets to multiple projects without having to
alter the code (including in firebase.json).
To achieve what you want, you'll need to set up a dev and prod folder,
each with their own firebase.json and each with a target only for that
specific project. Deploying different assets to different projects is
not supported now and is unlikely to be supported in the future
(however, we may allow configuring the location of firebase.json via a
flag at some point).
I have an Angular web application called "my-app".
I created a project on Google Firebase and called it "my-app" as well.
I deployed the Angular application to Firebase project "my-app". As a result, a site "my-app-*****" appeared. My app was accessible on "my-app-*****.web.app" address.
Then I created the second site in Hosting of the same project. I called it "my-app-dev". It got an address but was empty because nothing was deployed yet.
I followed instructions from google: https://firebase.google.com/docs/hosting/multisites
And even one question on StackOverflow: Firebase hosting deploy to other site
I added targets and modified firebase.json. In the result, they looked like that:
firebase.json file content:
"hosting": [
{
"target": "prod",
"public": "www",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
{
"target": "dev",
"public": "www",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
]
}
.firebaserc file content:
{
"projects": {
"default": "my-app-*****"
},
"targets": {
"my-app-*****": {
"hosting": {
"dev": [
"my-app-dev"
],
"prod": [
"my-app-*****"
]
}
}
}
}
But I faced an error when I executed command firebase deploy --only hosting:dev
However, when I executed command firebase deploy --only hosting:prod, everything was deployed without errors.
As a result, I am able to deploy my project to "my-app-*****" site, but I could not deploy my project to "my-app-dev" site. I want both sites to use same built files, that is why "public" was pointing to the same directory "www". Both sites located in the same Hosting of "my-app" project on Google Firebase.
Can someone please help me and explain what have I done wrong?
I am trying to upload an updated instance of a website to firebase that I pulled from my collaborator's github repo. I am getting the following error after I use command "firebase deploy":
=== Deploying to 'makany-webapp'...
i deploying hosting
Error: Specified public directory does not exist, can't deploy hosting
this is the firebase.json content:
{
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/public/**",
"destination": "/public.html"
},
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I am trying to deploy from the directory where the firebase.json resides. This same directory contains a "src" folder which contains the index.html file as well as other folder.
current directory and src directory
my bad. I had to change my src folder name to www
I created a simple dynamic firebase hosting with function, everything works fine when deployed but not when the page is served locally.
This is the log of firebase serve
i functions: Preparing to emulate functions.
i hosting: Serving hosting files from: public
✔ hosting: Local server: http://localhost:5004
✔ functions: serveLandingPage: http://localhost:5001/zonaskripsi18/us-central1/serveLandingPage
As we see, there is no error logs in console nor in firebase-debug.log but when I open http://localhost:5004 it shows An internal error occurred while connecting to Cloud Function "serveLandingPage"
This is the firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/**",
"function": "serveLandingPage"
}
]
}
}
This is the screenshot:
Firebase has been having issues with its local server lately, just deploy it and then run it to test it
If your functions project is typescript then you have compile the typescript to javascript file before serving the localhost.
cd functions
tsc
I am trying to clean up my deployment process to Firebase, and need to ignore all files besides my /dist aka public folder when deploying files to the hosting. I believe it can be done via ignore setting in firebase.json, but I am not sure how to achieve it besides manually specifying all files.
example .json:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "dist",
"ignore": [
// ignore all other files besides dist folder here
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Use the glob ** to ignore any file or folder in an arbitrary sub-directory.
You can then un-ignore your dist folder with !dist
So your firebase.json file would look like:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "dist",
"ignore": [
"**",
"!dist/**"
],
"rewrites": [{
"source": "**",
"destination": "/index.html"
}
]
}
}
For newer versions of Firebase:
It appears that new versions of firebase don't allow for the above mentioned method, so instead just define the folders which should be ignored:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "dist",
"ignore": [
"**/node_modules/**",
"**/src/**",
"**/public/**"
],
"rewrites": [{
"source": "**",
"destination": "/index.html"
}
]
}
}
You can use the Firebase console to check how many files have been deployed:
Open your Firebase project's Hosting page and take note of the number of files.
Run the command $ tree dist/ (since in this case dist/ is the folder we are serving on Firebase hosting) and take note of the number of files in the build folder.
These should roughly be the same number of files.
The ignore attribute specifies the files to ignore on deploy. It can take glob pattern the same way that Git handles .gitignore.
The following are the default values for the files to ignore:
"hosting": {
// ...
"ignore": [
"firebase.json", // the Firebase configuration file (this file)
"**/.*", // files with a leading period should be hidden from the system
"**/node_modules/**", // contains dependencies used to create your site but not run it
"**/someOtherFolder/**" // this is will exclude the folder with the name entered
"**someOtherFile**" // this will exclude that particular file
]
}
!(pattern) Matches anything that does not match any of the patterns provided.
* Only matches files and folders in the root of the public directory
{
"hosting": {
"public": "dist",
"ignore": ["**, !*"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}