Firebase code lab: Friendly Chat server hosting CANNOT GET / - firebase

https://firebase.google.com/codelabs/firebase-web#0
Step 5. Running the command firebase serve --only hosting starts the hosting at 'http://localhost:5000' and displays 'Cannot GET /' instead of the Friendly Chat template within the code lab.

I just had the same issue. In firebase.json, the public path needs to be "./public/index.html"
It should look like:
{
"hosting": {
"public": "./public/index.html",
"headers": [{
"source" : "**/*.#(js|html)",
"headers" : [ {
"key" : "Cache-Control",
"value" : "max-age=0"
} ]
}]
}
}

Related

apple-app-site-association - only allow some paths to be opened in app and disallow everything else

I'm struggling to figure this one out... So we have a web app with the following URL structure:
/city/posttype/slug
We want to implement dynamic linking, but we only want to open certain post types in the app, nothing else.
So for example these should link to the app:
/new-york/posttypeA/slug
/new-york/posttypeB/slug
/new-york/posttypeC/slug
Meanwhile, for example, these should not be opened in the app:
/new-york/posttypeD/slug
/new-york
/
Here is our AASA file:
{
"applinks": {
"details": [
{
"appID": "OUR_APP_ID",
"paths": [
{
"/": "/*/posttypeA/*",
"comment": "matches all posttypeA"
},
{
"/": "/*/posttypeB/*",
"comment": "matches all posttypeB"
},
{
"/": "/*/posttypeC/*",
"comment": "matches all posttypeC"
},
]
}
]
}
}
But our iOS app still wants to handle all links from our website. As I've read any time I do a change to our AASA file I need to reinstall the iOS app which I did but still no luck. Any ideas?

Running Firebase Deploy gives JSON error trying to load file

Getting an error when deploying to firebase. I manually edited .firebaserc file to add other projects.
$ firebase deploy --project staging --only hosting:admin
⚠ JSON error trying to load /some/path/to/.firebaserc
.firebaserc
{
"projects": {
"production": "myapp-8879",
"staging": "myapp-c8499"
},
"targets": {
"myapp-8879": {
"admin": [
"admin-app"
],
"app": [
"myapp-8879"
],
},
"myapp-c8499": {
"admin": [
"admin-app"
],
"app": [
"myapp-c8499"
]
}
}
}
To solve this problem, JSON error trying to load /some/path/.firebaserc you must make sure JSON format is correct.
.firebaserc
There is an extra comma, so firebase deploy will throw an error.
If you manually edit your .firebaserc on VSCODE then just change the Language Mode to JSON or use any online json formatter tool.

NGSW caching Firebase Storage

Problem:
Unable to handle Firebase Storage urls in Angular6 service worker (presumably due to CORS).
firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [ {
"source" : "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers" : [ {
"key" : "Access-Control-Allow-Origin",
"value" : "*"
} ]
}, {
"source" : "**/*.#(jpg|jpeg|gif|png)",
"headers" : [ {
"key" : "Cache-Control",
"value" : "max-age=7200"
} ]
}, {
"source" : "404.html",
"headers" : [ {
"key" : "Cache-Control",
"value" : "max-age=300"
} ]
} ]
}
}
ngsw-conf.json
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/apple-touch-icon-precomposed.png",
"/apple-touch-icon.png",
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
],
"urls": [
"https://fonts.googleapis.com/**",
"https://firebasestorage.googleapis.com/**"
]
}
}],
"dataGroups": [{
"name": "api-performance",
"urls": [
"/some_route"
],
"cacheConfig": {
"strategy": "performance",
"maxSize": 100,
"maxAge": "3d"
}
}
]
}
All files were uploaded to the Firebase Storage with following metadata:
{
cacheControl: 'public,max-age=36000',
contentType: 'image/jpeg'
}
When I load the app in Chrome or Opera, the app renders OK but I get error message 'Failed to load some_firebase_storage_download_link : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin my_app_domain is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.' and when I reload the app, no Firebase Storage resources are loaded.
When I load the app in Safari or Edge the app does not render at all and I get multiple console errors 'Failed to load resource'.
The app is being rendered and cached in Firefox without any issue.
When I omit the Firebase Storage and use only resources in Firebase Hosting, then the app is cached errorless in all browsers.
I have searched for setting the request's mode to 'no-cors', but failed to reach any resolution regarding my issue.
UPDATE
This might be caused by interference of NGSW and Firebase Firestore persistence handler (ie.: firebase.firestore().enablePersistence(); ). I am not sure how exactly Firebase Firestore persistence works, but when I initialise the app without Firestore persistence, then I am able to cache dynamic links from Firebase Storage. That is no use to me as I need both db and storage available at the same time.

Firebase "Access to Font" error

This may be an oversight but I'm using firebase and set up the firebase.json file which is a mixture of auto-generation and copying the headers block from Firebase's documentation. The issue is, my fonts refuse to allow me access even though my file looks like this:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source" : "**/*.#(eot|otf|ttf|ttc|woff)",
"headers" : [{
"key" : "Access-Control-Allow-Origin",
"value" : "*"
}]
}, {
"source" : "**/*.#(jpg|jpeg|gif|png|svg)",
"headers" : [{
"key" : "Cache-Control",
"value" : "max-age=7200"
}]
}]
},
"storage": {
"rules": "storage.rules"
}
}
This is the CORS error I'm getting:
Access to Font {Firebase font url}. {Firebase font url} from origin {Firebase project url} has been blocked by CORS policy. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin {Firebase project url} is therefore not allowed access.
Side note: I have an images folder in which I am able to load those just fine. Is there something about fonts that require more attention?
Firebase rolled out a new feature/tool that forces users to update the CORS settings for Google Storage. I found the answer on this StackOverflow question.
Firebase Storage and Access-Control-Allow-Origin

Single page polymer app tries to register elements multiple times when deployed to Firebase

I am using the Polymer starter kit as a reference for routing in a single page app. If I run the app on Cloud9 (the dev environment I am using) everything works as expected.
I run polymer build using the polymer-cli and then firebase deploy. The same app that runs with no issues on the Cloud9 instance produces multiple errors on Firebase Hosting.
Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'my-view1'. A type with that name is already registered.
The links are navigating as expected, but the console ends up loaded with errors like the one above. I'm guessing it has to do with the redirect to index.html in firebase.json.
firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "build/bundled",
"rewrites": [
{
"source": "**/!{*.*}",
"destination": "/index.html"
}
]
}
}
polymer.json:
{
"entrypoint": "index.html",
"shell": "src/my-app.html",
"fragments": [
"src/my-app.html",
"src/my-view1.html",
"src/my-view2.html",
"src/my-view3.html"
],
"sources": [
"src/**/*",
"images/**/*",
"bower.json"
],
"includeDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
]
}
EDIT: Here is the routing section of the starter kit
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
}
});
</script>
There is an importHref call in there, is there a better way to handle the routing here?
Any tips, tricks, or words of wisdom are greatly appreciated.
Did you use importHref? Your my-view1 has been registered multiple times. Check again to ensure that my-view1 is not being registered more than once somewhere in your code.

Resources