I deployed my flutter app on a custom domain but when I try to acces the domain I get the firebase site not found page
this is what I get when I put in my url
when I go to the domain firebase gives you the page loads just like normal and also when I turn on a vpn the page loads on the custom domain. the page also loads like normal if I put something behind the / of the url so I will do "app.domain.com/(any random word works so home or random etc.)" and it will redirect me to the homepage.
when I enter the url with something behind the /
I have tried loading the page on multiple devices and browsers, deleting the cookies and cache of used browsers, used incognito mode. but nothing seems to work. I've also tried loading the page on different locations but I still get the Site not found pop up.
I have also tried cleaning my project getting my packages again and upgrading them with
flutter clean , flutter pub get and flutter pub upgrade.
Deleted my firebase host file and ran firebase init again.
It's just so wierd that the page can't be found while it can when connected to a vpn or given a random string after the url. I also contacted google with my problem but they also can't seem to find it out because the page loads correctly when the support employee and his team tried it
Can someone help me out?
my firebase.json file
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Your firestore config should be included within the hosting object because firestore is used in conjunction with hosting, not independently. Your configs should be:
{
"hosting": {
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
}
}
}
Related
I'm using scully for prerendering bunch of routes, and I skip routes for /board/:boardId:
routes: {
"/board": {
type: 'ignored'
}
},
extraRoutes: ["/",
"/dashboard",
"/uses"
]
The /board route is dynamic, i.e. it looks like /board/[user-generated-boardId], but when I navigate to it using npx scully serve, It breaks, e.g.
I don't want to prerender /board/:boardId routes, and they should work just like an angular SPA, but seems like scully server is trying to map them to a directory path within dist.
Any suggestion on how I can get both static and dynamic routes working with scully, would be great ! Thanks.
When Scully can not find a route it should default to the expected Angular client side rendered page generation. To take advantage of some of the benefits of static pages and Scully you could generated a base page for dynamic routes tell Scully to ignore the remainder of the dynamic route.
Example is turning this routing-module path:
const routes: Routes = [
{ path: 'stuff/:id', component: StuffComponent },
];
Into two routes where one is generated and the other is ignored:
const routes: Routes = [
{ path: 'stuff', component: StuffComponent },
{ path: 'stuff/:id', component: StuffComponent },
];
Don't forget to ignore the dynamic route in your scully.app-name.config.ts
export const config: ScullyConfig = {
projectRoot: './src',
projectName: 'app-name',
outDir: './dist/static',
routes: {
'/stuff/:id': {
type: 'ignored',
},
},
};
If you need to turn OFF or ON specific content when either running or generating utilize Scully's 2 utility methods isScullyRunning() & isScullyGenerated()
WARNING
By design the Scully dev server WILL NOT LOAD DYNAMIC ROUTES. That is, if you follow the above approach npx scully serve will still result in the Cannot GET ... error. You will have to use a fully featured server to run to see the results. For example in your terminal:
cd dist/static
npx http-server
You defined a route for /board which will exclude that route.
However, you did not define a route for /board/:boardId so Scully will try to render that route.
Amend your config like this:
"/board": {
type: 'ignored'
},
"/board/:boardId": {
type: 'ignored'
}
},
That will likely solve your issue.
For the other part of your question, Scully will try to match the routes it found during discovery by default. This is done so you will be alarmed during testing that this route isn't there. After all, the Scully server is a development, not a deployment tool.
If you need/want to serve the index.html on routes not found, you can use the 404 option.
You can add that to your CMD line like this:
npx scully serve --404=index
By doing that, Scully will serve the index.html on any route that is not pre-rendered.
The answer is for firebase hosting, but should apply more generally.
As I'm using firebase hosting, I solved it using firebase hosting config within my project's firebase.json:
{
"hosting: [
{
"target": "static",
"public": "dist/static",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/dashboard/**",
"destination": "/dashboard/index.html"
},
{
"source": "/uses/**",
"destination": "/uses/index.html"
},
{
"source": "**",
"destination": "/index.html"
}
]
}
]
}
This config dictates that dashboard and uses routes should map to specific folder paths, and rest should map to index.html in the root directory.
Reference: https://firebase.google.com/docs/hosting/full-config
==
P.S. My local server with npx scully serve still can't load those dynamic /board/** routes, but at least it works when deployed to firebase. Suggestions very welcome!!
I am deploying a Flutter Web App on Firebase Hosting.
And a Flutter App on Android.
To use App Links that redirect to my Android application, I need to verify the App Links serving the file assetlinks.json on the web at https://example.com/.well-known/assetlinks.json
How can I make the file available, without 3XX redirects, from my domain, that is Flutter deployed on the web with firebase hosting?
It is enough to add the .well-know folder and the file to the web folder of your Flutter project.
And to change the firebase.json adding headers and rewrites entries.
{
"hosting": {
"public": "build/web",
"appAssociation": "NONE",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"headers": [
{
"source": "/.well-known/assetlinks.json",
"headers": [
{
"key": "Content-Type",
"value": "application/json"
}
]
}
],
"rewrites": [
{
"source": "/.well-known/assetlinks.json",
"destination": "/.well-known/assetlinks.json"
},
{
"source": "**",
"destination": "/index.html"
}
]
}
}
build and deploy again and the file is now accessible!
Thanks for the easy guide to
https://blog.bam.tech/developer-news/universal-links-firebase-hosting-and-flutter-web
Firebase Hosting automatically generates assetlinks.json and apple-app-site-association files when they are requested. It doesn't require any extra configuration.
You just need to make sure that your app details (package, SHA256 certificate fingerprints, etc.) are correctly setup in the Project Settings and make sure that in your firebase.json the property appAssociation is set to "AUTO" (or omitted, as AUTO is the default value).
Example firebase.json:
{
"hosting": {
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"appAssociation": "AUTO",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Ref: https://firebase.google.com/docs/hosting/full-config#rewrite-dynamic-links
If I am not mistaken, Firebase stores files in a so called bucket.
The bucket can be directly exposed to the internet or you can use the API to pull the file you need and put it somewhere public on your domain:
https://firebase.google.com/docs/storage/web/list-files
To see how to publish files in a gloud bucket, here is a good answer:
How do you make many files public in Google Cloud Storage?
Be aware the method described provides public access, so make sure you only expose what you want.
At first version of my pwa app I created manifest including share target
"share_target": {
"action": "/product/new",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
},
Everything was fine.
Now I decided to handle POST action instead of GET, so I changed share_target like this:
...
"share_target": {
"action": "/product/share",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
},
...
Changed method, action and added enctype.
It seems like nothing changed. Sharing still calls old method /product/new (checked in backend logs, /product/share never called). Of course when I go directly to /manifest.json via browser, there is a new version of manifest.
I reinstalled my app, clear chrome cache. Nothing changed.
Do you have any idea how force it to refresh?
In general to get manifest.json file updates your users have to uninstall and reinstall the app. Some sites are installed with WebAPKs and are the exception, they will generally check for updates every 24 hours.
I have hosted a website using firebase hosting, but a handfull of customers complain their browser (I know one is mozilla) gives a message that it cannot establish a secure connection, and thus not loads the page.
It is this site:
https://mad-science-aanmeldingen.firebaseapp.com/zuid-holland
It uses a rewrite to /index.html so the URL is a bit different then the page that is loaded, but this seems to be a firebase feature.
Firebase hosting config:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "inschrijvingen",
"rewrites": [{
"source": "**",
"destination": "/index.html"
}]
}
}
I cannot seem to make the max-age work properly with any file. I want to increase the expiration of the cache, and I've been trying to increase only the image time for testing purposes. Still, chrome and firefox state the max-age for the image as 3600 with this json file
The source for the header isn't matching the input path of images in that folder - it needs to start with a /:
{
"firebase": "sistema-de-oficios",
"public": ".",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [{
"source": "/css/images/*.#(jpg|jpeg|gif|png)",
"headers": [{
"key": "Cache-Control",
"value": "max-age=7200"
}]
}]
}
Also, make sure you're on the latest version of firebase-tools which is currently 1.1.4 at the time of writing.