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"
}
]
}
}
Related
Let's say I have a domain example.com. And I created a second website through hosting and cli as sub.example.com.
{
"hosting": [
{
"target": "app",
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
{
"target": "promos",
"public": "public",
"appAssociation": "AUTO",
"rewrites": [
{
"source": "**",
"dynamicLinks": true
}
]
}
]
}
Now when I go to create Dynamic Link for sub.example.com without any path prefix, it gives me a red flag saying:
It looks like you already have content served on this path. Specify a different path prefix to avoid conflicts with existing content.
What am I doing wrong?
Also, if this subdomain is only for links, I still have to put public field? I don't want to show anything on it, just links...
I fixed it by adding (or rather ignoring) the public folder for the dynamic links subdomain.
"ignore": [
"*"
],
I saw this post: https://github.com/firebase/firebase-tools/issues/566 and someone asked similar question for functions and the answer was to delete dist/index.html. But since my actual site depends on it, I tried just ignoring it and it seems to work.
I fixed the same issue with #cocacrave's answer. Just sharing the full firebase.json file. * There should be a public folder and settings but my public folder is empty.
{
"hosting": {
"public": "public",
"ignore": [
"*"
],
"appAssociation": "AUTO",
"rewrites": [
{
"source": "/**",
"dynamicLinks": true
}
]
}
}
This is my firebase.json file:
{
"hosting": {
"target": "md-viewer",
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/",
"destination": "create_md.html"
},
{
"source": "/view/*",
"destination": "show_md.html"
}]
}
}
When running firebase serve, the rewrites work as expected. However, deploying and opening my app ("appname.firebaseapp.com") returns 404. The deployment is succesful since I can customize the 404 page, and access my files by asking for them directly (appname.firebaseapp.com/show_md.html, for example).
What's wrong? Shouldn't firebase serve mirror online behaviour?
If the "destination" key on the rewrite rule is a file, it has to be referenced with an absolute path:
"rewrites": [
{
"source": "/",
"destination": "/create_md.html"
},
{
"source": "/view/**",
"destination": "/show_md.html"
}]
Also, the "/view" rewrite needs two asterisks, according to the documentation.
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 have a polymer starter kit app and added an extra static html file called extra.html.
I followed the rewrite rule as advised in polymer docs and was expecting that if I navigate to this url , it will display extra.html. However, it's always fetching index.html instead.
My firebase.json is as follows:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "build/unbundled",
"rewrites": [
{
"source": "!/__/**",
"destination": "/index.html"
},
{
"source": "**/!(*.js|*.html|*.css|*.json|*.svg|*.png|*.jpg|*.jpeg)",
"destination": "/index.html"
}
]
}
}
How do I get it to display extra.html when i navigate to https://firebaseUrl/extra.html? Thanks.
I just used the Firebase CLI to init a static hosting project. What exactly happens when you enable the "configure as a single-page app" option? I'm looking for a description of exactly which files are modified, and what kind of effect this has on the Firebase backend.
That option simply sets a flag in the firebase.json file to redirect all URLs to /index.html.
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
See the documentation of Firebase Hosting for more information, which also contains this fuller example:
"hosting": {
// ...
// Add the "rewrites" attribute within "hosting"
"rewrites": [ {
// Serves index.html for requests to files or directories that do not exist
"source": "**",
"destination": "/index.html"
}, {
// Serves index.html for requests to both "/foo" and "/foo/**"
// Using "/foo/**" only matches paths like "/foo/xyz", but not "/foo"
"source": "/foo{,/**}",
"destination": "/index.html"
}, {
// Excludes specified pathways from rewrites
"source": "!/#(js|css)/**",
"destination": "/index.html"
} ]
}
Full example:
{
"hosting": {
"public": ".",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
If you set it to yes, then all invalid URLs like www.example.com/some-invalid-url will be redirected to index.html of your site which is a good thing. You can also set it to your custom 404.html.
firebase.json
{
"hosting": {
"public": "pubic",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"cleanUrls": true
}
}
Bonus: set the cleanUrls to true to remove .html extensions from your deployed website urls else all urls without .html will redirect to index.html.
As a note: if you would like to have Server-Side Rendering (SSR), type No and set up your rewrites as follow:
"rewrites": [
{
"function": "angularUniversalFunction",
"source": "**"
}
]
After all, whatever you will choose you can always change this in a firebase.json file.
Official Firebase explanation:
We had used that option last year (Q1 & Q2) but it seemed to do nothing, but nowadays when we apply it, definitely things work very different.
The complete official explanation of what it does comes in here:
https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites
There's even some useful information about Headers usage in the next section of the same page.