I'm using Firebase Cloud Functions to generate an HTML file and now I'd like to host it together with related assets (js, css, fonts etc.) but without success.
I call the function, it generates the file properly and puts it in Firebase Storage together with js/css/other assets. Now I would like to return a URL of the index.html file so that the user can access it in the browser and the .html page will have access to the assets. Unfortunately the generated URL enforces download but I'm pretty sure that even if I managed it somehow, it won't be able to access asset files.
I know it's possible on AWS (S3 bucket) but can I do it on Firebase? Firebase Hosting doesn't seem to be the right solution in that case, does it?
Don't save it to Storage, that's a bad use case for this scenario. Instead, save it to Hosting:
https://firebase.google.com/docs/hosting/
Also, you can consider serving the content directly from the cloud function, probably there's no need to create a static version first.
Related
I have multiple HTML files stored in Firebase storage. Those files contain regular HTML, and they include links to other files (css, js, etc) stored within Firebase storage as well.
In order to download a file in Firebase storage you usually have to get a proper download URL in your client, something like:
const ref = firebase.storage().ref('static/styles.css');
ref.getDownloadURL().then(downloadUrl => ...download file here...)
Now, my HMTL file is rendered within an iframe. I can process this HTML file and replace all references to other css and js files in the client (Angular) with proper Firebase URLs, and the iframe renders the page just fine.
My issue occurs when one of the files downloaded by the iframe (usually css or js) references a third file. As this reference does not have the right Firebase URL, it fails.
For example, a css file referencing an image background:
background: #2a2f27 url(../images/banner.jpg) no-repeat;
The code above will fail.
Is there a way to serve those files with the Firebase URLs already in place? Maybe with a cloud function?
Another option could be to intercept those outgoing calls in the iframe itself and replace them before the calls are made, but I am afraid this is not possible for security reasons.
I'm trying to access/download files that have been uploaded to Firebase storage but I can't figure out how to. Some of the files have a create new access token button under the storage location which gives me a link to the file on the web. Unfortunately, this is only a few files and seems to only be ones uploaded from localhost?
I can't find any reference to this on the documentation, this should be achievable through the Firebase dashboard?
I've tried setting the access rules to allow reads in all cases which hasn't helped.
Thanks
In general, you're supposed to use getDownloadURL(), as shown in the documentation, from within your web or mobile app to generate a download URL for use within your app. Typically, the console is only used to revoke the tokens that enable to download of each file through that URL.
If that's not specifically what you're trying to do, perhaps you want to read up on other was to make data public in Cloud Storage. The Firebase console is not really the best mechanism to manage downloadable content.
Hello StackOverflow and Firebase Community!
I am trying to achieve something that is probably not intended with Firebase: I want to store HTML folders (banner ads in my case) in Firebase Storage.
My question is: How to keep the relative path from my HTML file to the related JS and image files.
So this files could easily find each-other:
/path/to/my/folder/index.html
/path/to/my/folder/main.js
/path/to/my/folder/picture.jpg
<html>
...
<script src="main.js">
...
</html>
document.onload = function() {
myImage.src = 'picture.jpg'
}
These relative URLs are not working if I store all the files on Firebase Storage, and access them with their DownloadURL, with looks like https://firebasestorage.googleapis.com/v0/b/my-project.appspot.com/o/my_folder_300x250%2Findex.html?alt=media&token=12a123a1-1234-1a1a-1234-a1ab123456a1,
I can make the files reachable without token by opening Firebase's security rules, but the relative path is still broken because of the URL parameters, and the folder path being escaped.
I also managed to make it work on an other project by making the Google Cloud Storage bucket public. I can access the files and keep the relative path using an URL like: https://my-project.appspot.com.storage.googleapis.com/path/to/my/folder/my_folder_300x250/index.html. This works great, but has major security flaws that I want to prevent, like listing all the files in the bucket 😱
I tried to save my banners as zip files, unzip them on the front end side, and recreate the folder structure in browser with the FileSystem API. But I'm limited to Chrome.
I could also try to replace all the URLs in my HTML, JS and CSS files, but this doesn't feel like a good solution.
I found a pretty simple solution:
In Google Cloud Console, I created a new role that has get access, but no list access, and applied it to allUsers, with the following permissions.
resourcemanager.projects.get
storage.objects.get
This will solve my issues for now, and I'll keep accessing data using links like https://my-project.appspot.com.storage.googleapis.com/path/to/my/folder/my_folder_300x250/index.html instead of firebase's downloadURL().
Firebase Storage is built around Cloud Storage, which doesn't actually have directories, but a flat namespace. Directories are emulated via the storage object naming convention: names can contain the / character and placing a "directory" path at the beginning of the object name makes that object appear to be in that "directory". See
How Subdirectories Work.
So your only solution (if you want to store the files independently) is to process all references, make the "paths" absolute and name the files accordingly. As you observed, you probably need to take into account all the URL query parameters as well.
I have a site with a large number of images, I'd like to host these on a remote cloud storage solution as we're getting close to our storage limit on the current server.
I can get a remote cloud storage service setup, what needs to be done on wordpress configuration to use this as the new folder for uploads?
Thanks
Specifically for AWS S3:
The company I work for use this: https://deliciousbrains.com/wp-offload-s3/ and it's worked a treat!
This should handle the automatic upload of your old media, plus updating your posts/pages. To be safe, download a local copy of your WP and database, and run all it locally using a test bucket. Or, have a back up on to hand if the upload doesn't work. Can't be too safe!
We've only had one issue with it this past week and it's when you upload a file but change the file extension afterwards, it never off-loaded that particular image to S3 and continue to load the old /wp-content/<year>/<month> version.
I am building a site that is using Angular 4, Firebase, and Firebase Cloud Functions. What I am looking to do is when certain data is added to the database I want to add, remove, or update something in an RSS feed, sitemap, and JSON feed which are files hosted with Firebase Hosting.
Any suggestions on how to accomplish this or an alternative if it is not possible without manual updates and redeploys of the project?
There is currently no way to publish a new (or update a) file to Firebase Hosting based on a database (or other dynamic) trigger.
What is possible is to map a Cloud Function to a path on your site (e.g. /sitemap or /feed), generate the HTML in that Cloud Function, and then set caching headers on the result.