I have the following project tree in /public
.
On my website, if I request a non-existent page from a page in /public, e.g. mydomain.com/nonexistentpage, it throws a 404 page properly.
However, if I request a non-existent page from mydomain.com/folder/nonexistentpage, it breaks everything except HTML. Errors thrown in the browser indicate that it's looking for assets in /public/folder/files and /public/folder, while the actual files are in /public/files and /public.
My firebase.json is:
{
"hosting": {
"public": "public",
"cleanUrls": true,
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
What do I do to make the 404 page appear properly on any page?
Check if you don't use relative paths when using <link>.
Related
I am trying to show a custom 404 not found page in my website with Flutter.
I am using the following code :
MaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: "/",
routes: {
"/": (context) => Scaffold(),
"/test": (context) => TestPage()
},
onUnknownRoute: (settings) {
return MaterialPageRoute(builder: (_) => Scaffold(
body: Center(
child: Text("Page not found !"),
),
));
},
i have rebuild my app and deploy it with Firebase Hosting. However i am seeing this if i enter a wrong url :
Since i am using flutter, i don't really want to add an .html file as it is said, even if it works.
I would rather display a custom page built in dart.
How can i display my custom "Page not found" in such case ?
EDIT :
Here is my current firebase.json file :
{
"hosting": {
"cleanUrls": true,
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
What i have tried and what didn't work :
Not having rewrites
Having rewrites in hope that flutter routing would take the lead
Test the project in localhost
Change the Flutter routing Strategy from URL to PATH according to the documentation
In the end :
My existing pages in the website are working fine
All wrong urls are redirected to /index.html
The only thing that is working is :
Adding a 404.html file in my /build/web folder
Remove rewrites in firebase.json
However this is not what i want, i would like to display my not_found_page.dart instead.
This might be a Flutter issue, i keep this open in the meantime but i will dig deeper on the Flutter side.
The problem was indeed on the Flutter side.
I was using "/" as initialRoute and "/" as another route which was creating conflicts apparently and was actually useless in my code as the first page returned is defined under the MaterialApp's child.
Flutter was redirecting my routes to "/" instead of calling onUnknownRoute and there was a conflict with the rewrites in firebase.json
So i have removed the "/": (context) => Scaffold(), from the routes map.
I have also removed rewrites in firebase.json in order for this to work.
I have also set back the URL strategy, all the steps above were not working with the PATH strategy.
EDIT : i have figured out that the PATH strategy can work only if there is no home property on the MaterialApp widget.
If so, all of the wrong routes will be redirected to the home and not call the onUnknownRoute
For the / route, the home property, if non-null, is used.
Otherwise, the routes table is used, if it has an entry for the route.
Otherwise, onGenerateRoute is called, if provided. It should return a non-null value for any valid route not handled by home and routes.
Finally if all else fails onUnknownRoute is called.
PS : There is no need to implement 404.html file
just add a 404.html page in your root and redirect it your own custom flutter built page.
you can also learn to handle the
'Famous 404 page not found !' from here
In firebase.json, is there a way to rewrite (not redirect) all requests to the corresponding .html file but leave other extensions?
for example, https://example.com/foo will be the same as https://example.com/foo.html.
But https://example.com/data will not be the same as https://example.com/data.xml.
This is the cleanUrls option (as in the docs) in firebase.json:
{
"hosting": {
"cleanUrls": true
}
}
I found in the firebase documents that you could hide the .html extensions of my site by creating a "firebase.json" file. I effectively remove the extensions but when I want to enter my other pages I cannot. I always see the main page.
I tried previously with .htaccess but it didn't work out. Now I found this firebase resource but any extension directs me to the main page.
I put that in my file "firebase.json"
"hosting": {
"cleanUrls": true,
"trailingSlash": false
}
You can set up routes inside of firebase.json. They can either be rewrites (where the url is actually pointing to another location, but that is unknown to the user), or redirects (where the page redirects to another url).
Inside of your firebase.json, hosting should look like this:
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/sign-up",
"destination": "/sign-up.html"
}
],
"redirects": [
{
"source": "/sign-up.html",
"destination": "/sign-up"
}
]
}
There are 2 added nodes, rewrites and redirects. What this does is whenever someone visits /sign-up, you actually point them to /sign-up.html, where your actual html code is. But when someone visits /sign-up.html on their own, you redirect them to /sign-up.
I am online a fresh webpage for the purpose of universal links. I put the file in .well-known folder.
In the server log I can see that Applebot got 200 on "GET /.well-known/apple-app-site-association HTTP/1.1"
The only error displayed in the App Search API Validation Tool is:
"example.com is returning 469. Please check your url and try again."
I used another tool to check it - branch.io AASA Validator and it displays no errors.
Also make sure you don't have any robots.txt file in the root that disables Applebot
Robots.txt: allow only major SE
https://support.apple.com/en-us/HT204683
Looks like apple changed the format of AASA file. According to this official document, the old presentation
{
"applinks": {
"apps": [],
"details": [
{
"appID": "{PREFIX}.{BUNDLE_ID}",
"paths": ["*"]
}
]
}
}
Had already changed to:
{
"applinks": {
"details": [
{
"appIDs": [
"{PREFIX}.{BUNDLE_ID}"
],
"components": [
{
"/": "/*"
}
]
}
]
}
}
Considering backward compatibility, you can try writing in this format:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "{PREFIX}.{BUNDLE_ID}",
"paths": ["*"],
"appIDs": [
"{PREFIX}.{BUNDLE_ID}"
],
"components": [
{
"/": "/*"
}
]
}
]
}
}
This works for me, hope it helps.
What worked for me was adding image metadata on top of title and description metadata. I also added Touch icons, but I do not think it caused the issue since it works fine on another website I have without it.
Required metadata seems to be: Title, description and Image (og:image was the missing one in my case)
For metadata check out: The Open Graph Protocol
For icons check out: Developer Apple - Configuring Web Applications
I'm trying to add a button into the Gmail compose toolbar at the Insert section specifically. I've seen an extension that does just that, so I know its possible but I'm confused on how to do it.
I'm using the content_Script to javascript inject into the webpage but the compose window is in an iframe window which apparently you aren't allowed to inject into because the iframe loads after the content_script even with the "run_at": "document_end".
Also another thing I'm confused on is that Gmail has all their id tags randomizing so how could I know what tag to inject into if they are always different every time I compose an email.
So could anyone help me out with this an let me know how to go about using a content_script to inject into an iframe and how to get around GMail id tags always randomizing/being different.
{
"name": "Test Gmail",
"version": "0",
"description": "Test Gmail",
"permissions": ["tabs", "http://*/*", "https://*/*"],
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*"],
"css": ["mystyles.css"],
"js": ["myScript.js"],
"run_at": "document_end",
"all_frames": true
}
]
}
Use JQuery and listen for the even "DOMNodeInserted". After that you want to use JQuery to locate where you want to insert the button or whatever using the function $(selector, context); to search for the parent. GMail id name is all done dynamically so you have to try search for something that doesn't change such as the html tag or class name's.