Firebase-tools: Use hosting with prerender.io

Hi,

Currently Firebase Hosting's rewrite/redirect rules aren't detailed enough for prerendering services, but some of our customers have had success building a pre-render step into their build process for fairly static sites using html5 pushState. They pre-render every page based on the single page app so that the correct content is served up to a crawler, then if the user navigates to another page the webapp takes over and rerenders without a page refresh

This is obviously pretty complicated and obviously not ideal, but we're working on making this much less of a pain point

Hope that helps

Chris

I realize it's only been two months, but is there an update on this? Since you guys are owned by google now, I'd assume they want sites hosted with firebase to be indexed by their search service.

We have no specific update on this at this time, just that SEO is obviously important to us and keeping Firebase Hosting relevant to developers. I hope to have an update for you soon

Hi guys! I just wanted to know what is the status on this update? is it coming anytime soon? I use Firebase hosting and it is great the only thing I'm concerned is SEO, my site doesn't appear anywhere in google, also I searched for seo integrations with firebase and I couldn't find any solution. I really like to keep everything in one place, so it would be a shame to change to a different service that can serve my pages to google's crawler engine. This would be a huge improvement since I know Firebase is owned by google now. Thank you!

Also still interested in this service. Thanks!

Adding my voice to the thread - would be great to have this feature!

+1

I'm waiting for this as well.

As an alternative I'm looking into using https://divshot.com + firebase.

+1

Due to recent announcement of DIvshot and Firebase merge this problem arises again. I have actually moved to Divshot to make use of both free custom Domain and prerender.io capabilities. How is fireabse going to deal with those issues? Are you going to add custom domains to free tier? What about prerender.io?

We are investigating ways that we might be able to bring JS prerendering to Firebase Hosting, but don't have any firm plans to share at this time. (Personal note: I really want to see it happen).

Because Firebase is opinionated that all sites should be HTTPS-only, we manage SSL certificate provisioning on behalf of our users. The cost involved in doing so prevents us from being able to offer free custom domain hosting.

Thanks for a blazing fast (pun intended) answer.

Some sort of SEO capability is more than needed for static web app hosting platforms, so I just hope you guys manage to get that working until middle of December, otherwise lot of devs will need to switch to old-school hosting providers (unfortunately including me).

Second answer makes perfect sense and I consider just jumping on paid tier, its a shame it is not providing same additional scaling thou.

100% of Firebase Hosting sites are on Fastly's blazing fast (pun regurgitated) CDN. You get all the perks of Divshot's high-performance plan even on the free plan (just not on a custom domain). As for bandwidth, 10GB ends up being a _lot_ of band for a static website.

I need to admit that I have not though about Divshot's high-performance perks. Anyway it is a shame I might need to migrate my app and prepare a backend (and delay new features!), while CS degree eats almost all of my time. While my project isn't that advanced others might suffer enormous delays, so again I really hope Firebase will help us become SEO friendly or maybe Divshot will delay its close. I understand this is probably not an option, but if some of us will migrate they might never come back.

Congratulations @mbleigh for the acquisition!

@DamodarSojka, I agree with you completely. I'm an existing Divshot paid user. Prerendering is a must for the marketing/sharing of my website on Facebook. If Firebase does not offer this capability soon, I will have to migrate to other web hosting services.

+1 for SEO capability

We are also paying Divshot customer and Prerender support is necessary for us. Prerender support on Divshot isn't ideal (because of production.blabla.divshot.io URL after sharing) but if there isn't Prerender support on Firebase at all we can't use it. Thanks.

Likewise, SEO is of utmost importance, whether you're using prerender.io or another comparable solution. This needs to be addressed on Firebase before divshot shuts down.

Yup still having trouble with seo

+1 - Payed Divshot customer, would require Prerender support to migrate to Firebase.

Completley agree. Firebase is not a Divshot replacement if it doesn't have prerender capabilities. I am a Divshot paid user. With two months notice of Divshot shutting down. Should I work on migrating to another service ? Do I have to spend my time on configuring a server ? Or keep focused on what I was doing ? Isn't this the idea of the service ? Not having to deal with server issues ? Please explain whether Firebase will be an option for December 14 or should I take my time configuring a server.

Gents, Mike has already stated, in its entirety, the status of this feature: We are investigating ways that we might be able to bring JS prerendering to Firebase Hosting, but don't have any firm plans to share at this time. (Personal note: I really want to see it happen).

There is no timeline. We want it as much as you do.

You'll have to decide on your own what you should do. We don't have a public road map. We can't make any guarantees on any timeline, regardless of the number of demands or queries. Sorry it's not happy fluffy answers, but hopefully realistic ones are more useful for your planning.

☼, Kato

Nice to see that you really care about it :) Thank you guys !

@mbleigh / @katowulf One question about that plan to bring JS prerendering to Firebase: How it JS prerendering will be better the current SEO support Firebase is offering?

Based on this SO answer, Firebase is already providing SEO out-of-the-box since ng-conf 2015.

So I don't get the pros of still trying to use Prerender.io on Firebase.

@douglascorrea for Google SEO the improvements will be marginal, but (as it turns out) Google isn't the only crawler out there :smile:

The biggest gain for this is for sites that want to offer better support for Facebook OpenGraph tags, Twitter cards, and non-Google search engines.

Thank you @mbleigh, it clarify things and makes me think that we really want that support, or some kind of alternative like @drtriumph said in his comment.

I was looking for a solution, and I found the following details that could be good for other readers:

• On October, 2015 Google deprecated the recommendation of using _escaped_fragment_ and the hashbang (!#). So, for Google, every SPA should use html5 pushstate (html5mode on angularjs). But they will continue supporting hashbang (!#) and translating it to escaped fragment for while.
• Facebook and probably others crawlers still need the escaped_fragment, the Facebook automatic translate hashbang to _escaped_fragment notation. And probably other crawlers do the same since it was the previous recommendation from google.
• Since Firebase do not support redirects based on User-Agent yet, our hope remains on crawlers translating hasbangs (!#) to escape_fragament like this:
  If your URLs look like this:
  http://www.example.com/#!/user/1
  Then access your URLs like this:
  http://www.example.com/?_escaped_fragment_=/user/1

So, for while, one idea to figure this out could be this:

• Do not use html5 pushstate (html5 mode on Angular) and use hashbang instead (!#)
• Use prerender.io to create static/cached version of every page you want in you application (like normal prerender process).
• Develop an plugin that store that cached version in a folder structure that starts with the folder ?_escaped_fragment_= and create folders like:
  If your URLs look like this:
  http://www.example.com/#!/user/1
  The generated folder will be
  ?_escaped_fragment_= +- /user +- /1

Where the 1 file will be the actual html file.

• Deploy that folder in your root firebase folder using firebase-tools (this process could be automated in a cron job or something like that).

How I think it will work:

• When a crawler see your hashbang url, it will try to reach the ?_escaped_fragment_= URL. As we have actual HTML files on those folders, the Firebase will serve then and not redirect to index.html therefore the HTML read by crawler will be the cached version and not the AngularJS one.

To achieve that we need to create a scheduled job that runs the prerender for every pages, saves that folder and perform the firebase deploy.

As firebase deploy do not support partial deployment (sync or incremental ones) we should maintain an updated copy of our deployment on the server that will be responsible for this process.

I will try setup that and I will let you know if it works.

Can you please allow us to set "X-Prerender-Token" like we can other header keys???
https://www.firebase.com/docs/hosting/guide/full-config.html
https://prerender.io/install-token

+1

@srk9 please submit a separate issue rather than repurposing this thread.

Why is this issue closed? I don't see a solution posted.

@douglascorrea, what happened with your idea?

Thanks,
-- D

Hi @bethuneco, sorry about not posting the result here.

Actually I was about to writing an article but then I realize that this solution will consist in a lot of "machinery" to make it works in production, and I didn't feel confortable to "recommend" it as I don't know how it will behaviour in a large scale.

But basically, as I described before, I need an "deployment/prerendering" server that, for each deploy, prerender/scrap all pages and store the resulting HTML in the folders described above (/?_escaped_framgment_/xxxx). Those "real/physical" htmls will be our "prerendered" pages.

So everytime a google/facebook/twitter crawler goes to our page and request the "escaped fragment" via "?_escaped_fragment" prefix, it will actually points to a real folder with real HTMLs then, those HTML will be indexed.
When a real user goes to application, they will not use ?_escaped_fragment, so they will receive the dynamic page.

The problem is this "solution" is that we need to keep generating HTMLs for each or aditional page. For example, if your application is a simple CMS, for every new post/article/page you will need to run the process to generate the new HTML page. But the problem will get bigger when we are talking about an dynamic social network for example, where each user can generate hundred of "prerenderable" pages, then your prerender/internal crawler should be running all the time. And that, in a real world can be a stopper.

This is a very "trick" solution that could work fo small apps, but not for real big ones, becase we are actually generating HTMLs to be there when crawlers goes and not automaticlly redirecting crawlers to our prerender service that will prerender it online (as a normal prerender process is).

So, by now, we should use an Nginx server as static server to be able to prerender, or use an Divshot competitor like https://www.netlify.com/ that provides Prerender out-of-the-box for Single Page Applications.

@douglascorrea,

Thank you for that expanded explanation. You're the first person to mention Netlify, so I'll look into that.

You are right that prerendering everything is only suitable for small sites. Fortunately, my app is fairly small (max of about 1,200 pages), so that could work.

The simplest solution (and the one Google is avoiding) is prerender Javascript and serve HTML when robot user agents are detected. Google has already demonstrated rendering outside the browser so this isn't technically difficult. It's strategically challenging for them because it appears to help a competitor in the ad business.

If I get something working, I'll post an update here.

Let me provide some clarity here for anyone who might be confused:

Does Firebase Hosting support JS prerendering on the server? No, it doesn't. Server-side prerendering is something we'd like to support and is on our long-term roadmap, but we have no specific dates or timelines to announce at this time. We know that this is a pain point, especially for those who use Facebook sharing or Twitter cards, and we hope to be able to share more about this in the future.

Can't you just support e.g. X-Prerender-Token? Nope, that won't work. Prerendering must serve the _actual prerendered content_ at the ?_escaped_fragment_= URL, which means that it's not just the header but the content the server must be aware of and handle properly. There is no half-measure solution as much as we wish there were.

What kind of prerendering is possible? The only kind of real "prerendering" you can do at the moment is static site compilation. Usually this is done with something like Jekyll, but it's certainly possible to use a headless browser locally to "prerender" a more dynamic site. You must exhaustively render each URL and then deploy it, so this is not a fantastic use case at the moment. Note also that making filenames with ?_escaped_fragment_ in them is _not_ possible, as the CDN strips out query parameters and this is generally not a supported use case.

Is this some kind of Google strategic thing to keep other crawlers down? Nope, absolutely not. We strongly want to support the advantages brought by prerendering to Firebase Hosting. It's all just a matter of time and resources.

I had to switch from firebase hosting due to the social media tags / alternative SEO problem. It's a deal-breaker when non-tech people notice we don't have nice pictures on our links like everybody else on the internet.

You can prerender with phantomjs and prerender middleware. It's open source and works just fine, but i went with prerender.io to avoid ops work. It's a little slow on first request, but you can cache pages by pre-emptively requesting every page.

It's nice to request all the pages too, cause then you can run a few tests on it, parse the html to make sure the tags and content are rendered correctly.

There's a huge caveat tho. Prerender doesn't work with live firebase data. How could it? Firebase data is real-time, the connection is persistent. Prerender is one-time, the connection is closed. There's no way to tell when the page is done rendering, because you can't count requests.

I had a couple ideas to fix this:

1. Make a GET request with every .on("value") firebase subscription. Skip the subscription when it's a prerender request. Skip the GET request when it's a normal user. This won't work for .on("child_*") events.
2. Set the global prerender flag to false at the top of your main entry file, then for each page component set the flag to true once the data has loaded. With proper design, usually there's a _loading state_ and an _error state_ and a _success state_ so in the error / success state helper method set the flag to true.

It's a pain, but only a few dynamic pages don't render correctly and need special treatment. I still think static benefits outweigh the costs.

@mbleigh looking forward to what you guys come up with in the future. With anything I'm sure joining google is one step back, two steps forward.

Really hoping for some workaround. The only reason why I need backend is also twitter cards and opengraphs. Sure backend gives some other benefits for single page apps such as isomorphic rendering, but that's just nice to have. Twitter and OG tags are important for any app that needs sharing.

Could there possibly be some sort of a rewrite-like rule that would command firebase backend to serve this or that object/html from database?

Such object could be prepared in advance as every sharing starts from, well, visiting the url or passing a Share button first.

bump.. I was just amazed by Firebase and then realized I can't use it, reading these comments..
As I also need a service alike Prerender to work. So what's up with development on this??

Get it together Google! You're a freegin' search engine!! :laughing:

Seriously though. This is so damn important. This might just be the damnedest' most importantest thing ever.

I know it was in jest, but to make a point, would that remark directed at Google Search or at Google Firebase? Only one of those is a search engine and only one of those provides Firebase Hosting (and precompiling web pages isn't exactly the purview of either, although a clear value add for Hosting to work better with tools that provide this).

On a related housekeeping note, it's also not related to firebase-tools (i.e. this OSS issue tracker). I'll take care of making sure your vote is added to the priorities discussion; the mailing list is probably the best place to reach out with core feature requests in the future.

Most importantly, we haven't forgotten this. It's still very important to us. A little less important than integrating with Google Cloud Functions and providing rock solid insights via Analytics, Crash Reporting, and Test Labs, but still important.

I'll bring this up again when next we discuss priorities. We really do appreciate you adding your voice to the feedback. ☼☼☼

thx for your efforts on firebase @katowulf !!
This is the only thing keeping me from using firebase as a "host" for my ng1 applications.

You're not alone here. Others have run into the same limitation. Note that since Google can now index JavaScript generated content, and there are some special provisions for indexing Firebase content, non-authenticated Firebase data loaded into your pages should already be getting indexed. But full pre-compiler support is on the radar.

@katowulf just as headsup ( if you didn't already know or saw it ), but the main issue is not the google crawler. I think people already know that if they use something like Prerender. It are the other crawlers like for example LinkedIn, Facebook, Twitter and more that aren't satisfied. They want static content

@samvloeberghs I think, however, that the implications of Google providing this support is that others are likely to follow suit. So I intended to imply that it's a step in the right direction to making this widespread (and that it at least works with Google today).

It's unlikely that FB / LinkedIn / Twitter will follow Google's ability to move forward quickly as we would want it to. There will always be a major player behind, and we simply can't ignore it. On the other hand, Google is solving the issue by working on NG2, which will feature server side compilation using Angular Universal :) 👍

Angular to the rescue! Hold on, are you saying machine learning won't solve all of this?

To offer my 2 cents, I'm finding that clients seem to value social media cards at least just as much as SEO. Speaking from recent projects, Twitter/Facebook have been the primary way brands promote themselves via sharing links to their website.

Obviously SEO is still critical but would attacking social media cards be a simpler/shorter-term solution? Since web cards are just meta tags could you define the structure in firebase.json (similar to security rules)? Firebase could then inject the right meta tags for twitter/facebook crawlers, although I'm sure it's not that simple 😄.

Regardless, many thanks for the great work and community support. Looking forward to some of the more exciting firebase features (cloud functions 👍!).

@katowulf , my comment was a strong 'bump' more then anything...you guys are doing some amazing work! I'm directing my jest more towards Google as a whole. However, I do believe Firebase is the new* Google division that should own this whole "SPA/PWA - SEO page rendering" issue.

My thoughts on this are...

Whatever products Google puts out into the world should work flawlessly with all the platforms we use today, and be shining examples that work and reflect it's original product, Google Search.

SPA's have been around for a little while now..Google has 2 of them [Angular] & [Polymer]. Implementing SEO in them (Meta Tags/ OpenGraph/ Schema) is a major Blackbox (unless you're a backend ninja). It was great news that Google Search began processing JS, but this is definitely only half the battle (maybe less).

Firebase, being a backend as a service (BaaS) seems like the perfect new* Google group to really smooth this whole SPA page rendering thing out. I know you guys will get around to it, but i strongly feel like this should belong as a critical/ top priority feature.

Imagine reading this headline...

FIREBASE PRESENTS...
New & Improved SEO for all single page applications (SPA's) and progressive web apps (PWA's) out of the box!

Developers would flock :+1:

Just wanted to quickly chime in that we definitely have this on our radar. It's important, but so are lots of other things (as Kato enumerated). We have some ideas about some great ways to tackle this issue, but they have some dependencies that we have to get out of the way first. Try to stay patient and know that this is definitely on our minds!

Well this is disappointing. I now find myself searching for firebase alternatives...

It's been almost 3 years...

any update on this.. ?

shouldn't this work now that firebase owns divshot? update PLZ!

We are well aware of the desire for this kind of functionality, and it's a priority for us to provide some better solutions here. I still don't have any kind of timeline to announce, but we haven't forgotten about you folks.

+1

:( :( :(

We arrived at a similar conclusion. What else have you seen? ;)

I just use Firebase Functions as my share link endpoint then redirect with JavaScript an a link.

You may or may not have seen this, but Cloud Functions is now integrated with Firebase Hosting!!!

This can be considered our canonical solution to server-side rendering with Firebase Hosting. Enjoy!

@mbleigh OK so if I have a global header file with metadata such as the below, at present this is not replicated in the frontend. If I install the Cloud functions, should that be all I need to switch on this feature.

<meta name="description" content="{{ pageDescription }}">

Awesome, thanks for the update.

On May 17, 2017 5:39 PM, "Michael Bleigh" notifications@github.com wrote:

You may or may not have seen this, but Cloud Functions is now integrated
with Firebase Hosting https://firebase.google.com/docs/hosting/functions
!!!

This can be considered our canonical solution to server-side rendering
with Firebase Hosting. Enjoy!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-tools/issues/33#issuecomment-302268864,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX5XbtWCdygdw4ozixK5_XcL2Dlznp4Jks5r65M-gaJpZM4CtPYG
.

I realise this may not be the best issue for these comments but google searching my problems did lead me to it and there seems to be some active discussion so please forgive me!

What I'd love to see to solve the problem of rendering open graph templates for social sites in SPAs hosted on firebase - is the ability to load balance via user agent.

I'd like to be able to use cloud functions to pluck some template data from memcache/cloudsql and render the template tags to the requesting social platform, but fall back to static hosting for all other clients. Then we wouldn't need full server side rendering for all requests.

@cdharris Totally, ATM, rewriting all the request to a function I've tried to use window.location to make the additional redirect (for the client/visitor) to the static hosting, for my SEO purposes it didn't work, maybe for Social purposes it would.

@mbleigh is there any option to rewrite request from crawlers/social differentiating them from the clients/visitors? I've tested with _escaped_fragment_ among other glob expressions... Nothing =/ Thanks in advance

Making the what-to-return decision in a firebase function can work. We can say: is the req coming from Facebot? Then return these open graph tags. If not, return the index.html. But how do I return the darn index.html from a firebase function?

fs.readFileSync('./index.htm')

On Sep 13, 2017 4:34 AM, "Birowsky" notifications@github.com wrote:

Making the content decision in a firebase function can work. We can say:
is the req coming from Facebot? Then return these open graph tags. If not,
return the index.html. But how do I return the darn index.html from a
firebase function?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-tools/issues/33#issuecomment-329140134,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX5XbrXQNbVMhRmeZQTbx3Z3vi0c1HXTks5sh728gaJpZM4CtPYG
.

@megamindbrian is it implied that the functions have access to the hosted files? Is it documented anywhere? Thanx anyways!

Yes. That's how I remember using it, good question I try to find docs.

On Sep 13, 2017 7:09 AM, "Birowsky" notifications@github.com wrote:

@megamindbrian https://github.com/megamindbrian is it implied that the
functions have access to the hosted files? Is it documented anywhere?
Thanx, anyways!

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-tools/issues/33#issuecomment-329179741,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX5XbobjixHUterg61PAFmLc9v72C7kyks5sh-IogaJpZM4CtPYG
.

Here one
https://stackoverflow.com/questions/42960506/how-can-i-read-and-write-to-firebase-storage-from-within-cloud-functions-for-fir

On Sep 13, 2017 7:09 AM, "Birowsky" notifications@github.com wrote:

@megamindbrian https://github.com/megamindbrian is it implied that the
functions have access to the hosted files? Is it documented anywhere?
Thanx, anyways!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-tools/issues/33#issuecomment-329179741,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX5XbobjixHUterg61PAFmLc9v72C7kyks5sh-IogaJpZM4CtPYG
.

This one uses a temporary directory but I think it also works with files
you've uploaded alongside your project. It might be immutable which is why
the example is offloading the file to save it somewhere else
https://firebase.google.com/docs/storage/extend-with-functions

On Sep 13, 2017 7:12 AM, "Brian Cullinan" megamindbrian@gmail.com wrote:

Here one https://stackoverflow.com/questions/42960506/how-can-i-
read-and-write-to-firebase-storage-from-within-cloud-functions-for-fir

On Sep 13, 2017 7:09 AM, "Birowsky" notifications@github.com wrote:

@megamindbrian https://github.com/megamindbrian is it implied that the
functions have access to the hosted files? Is it documented anywhere?
Thanx, anyways!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-tools/issues/33#issuecomment-329179741,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX5XbobjixHUterg61PAFmLc9v72C7kyks5sh-IogaJpZM4CtPYG
.

Sorry, I still don't see a proper introduction of how the functions are conceptually connected to the hosted files. If you care to explain, I got some points for you: https://stackoverflow.com/q/46192570/592641

I could see myself answering that with code examples, but it wasn't clear
that from within your function you can respond with content from a file in
your project? It's not a redirect.
I'll dig up some more code.

On Sep 13, 2017 7:18 AM, "Birowsky" notifications@github.com wrote:

Sorry, I still don't see a proper introduction of how the functions are
conceptually connected to the hosted files. If you care to explain, I got
some points for you: https://stackoverflow.com/q/46192570/592641

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-tools/issues/33#issuecomment-329182385,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX5XbnCSoaKUuVKUnfha5A-4K-p76kZ3ks5sh-QygaJpZM4CtPYG
.

@megamindbrian I just tried fs.readFileSync('./index.html') but unfortunately, the file is not there. I was also hoping to find the hosted files in some implicitly generated storage bucket, no luck. How would you proceed?

If you nest your Hosting public directory inside your functions directory, it will be available there.

@Birowsky Yup, here is how I am reading a file from a cloud function, e.g index.js:

const page = fs.readFileSync(__dirname + '/facebook-meta.html').toString();

But if your project layout is:

project/
project/src (<- actual source of app)
project/functions ( <- firebase functions)
project/dist (<- build output)

You will need to copy the relevant files out of /dist in to /functions

This issue has almos 3 years (so far) and still no luck at this point????

Probably means Google will abandon firebase in the middle of supporting all
our apps.

Our official solution for this class of problems is to use Cloud Functions
to do server side rendering for content that needs to be visible to static
crawlers:

https://firebase.google.com/docs/hosting/functions

This is a more robust and generalized solution that allows for all kinds of
cool things!

If you feel strongly that there is still something missing, please give us
a detailed use case so we can think about how to tackle it! :)

On Thu, Sep 14, 2017, 3:57 PM Brian Cullinan notifications@github.com
wrote:

Probably means Google with abandon firebase in the middle of supporting all
our apps.

On Thu, Sep 14, 2017 at 3:52 PM, tofanelli notifications@github.com
wrote:

This issue has almos 3 years (so far) and still no luck at this point????

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<
https://github.com/firebase/firebase-tools/issues/33#issuecomment-329630338
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AX5XbhBSDSl6TStSv7M02Dx0brb9MOPbks5sia44gaJpZM4CtPYG

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-tools/issues/33#issuecomment-329631266,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAD_iI6L-yu3RTECI88a2y_ZOzIxdDQks5sia9rgaJpZM4CtPYG
.

@mbleigh Can you use cloud functions on the root of a firebase domain, yet?

Yes, if I understand you correctly. Have you had trouble before?

On Thu, Sep 14, 2017, 6:38 PM Brian Cullinan notifications@github.com
wrote:

@mbleigh https://github.com/mbleigh Can you use cloud functions on a
firebase root directory yet?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-tools/issues/33#issuecomment-329653711,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAD_g7BV3TMM_5nVX92_-3ai_mZHfHBks5sidUvgaJpZM4CtPYG
.

@mbleigh

This is a more robust and generalized solution that allows for all kinds of cool things!

SSR makes our system more complex 😢
I think prerendering is cooler not always but often 💡
e.g. Facebook OGP, Twitter Cards, SEO for non-Google

@mbleigh @megamindbrian Thank you for your messages. I have made my hosting directing every requests to my function and response index.html which is hosted in functions/build/index.html to clients. But I don't know how to confirm is a request coming from FaceBot? I have tried using facebook debugging tools to access my website's url, I supposed the cloud function would be triggered, but it wasn't. I'm not familiar with back-end development, can you give me some hint? Thanks.

When using Facebooks tool, make sure you use the button that read something
like "Fetch a fresh copy", near the preview.

On Tue, Oct 17, 2017 at 8:29 AM, Jude notifications@github.com wrote:

@mbleigh https://github.com/mbleigh @megamindbrian
https://github.com/megamindbrian Thank you for your messages. I have
made my hosting directing every requests to my function and response
index.html which is hosted in functions/build/index.html to clients. But
I don't know how to confirm is a request coming from FaceBot? I have tried
using facebook debugging tools to access my website's url, I supposed the
cloud function would be triggered, but it wasn't. I'm not familiar with
back-end development, can you give me some hint? Thanks.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-tools/issues/33#issuecomment-337266581,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX5XbrCQ3mowcUnJjWYWsaiScoN1y4l0ks5stMfcgaJpZM4CtPYG
.

--
CONFIDENTIALITY NOTICE: The contents of this email message and any
attachments are intended solely for the addressee(s) and may contain
confidential and/or privileged information and may be legally protected
from disclosure. It is then shared with tech companies, bots, hackers,
government agencies, and marketers. The security of this message is none,
and it may be shared on Instagram at anytime. If you are OK with this,
please respond. There isn't really any security or privacy anywhere. If
you disagree you may want to go camping and talk to people face-to-face
like in old times.

Is there anything in your firebase logs like "Function execution started"?

On Tue, Oct 17, 2017 at 8:37 AM, Brian Cullinan megamindbrian@gmail.com
wrote:

When using Facebooks tool, make sure you use the button that read
something like "Fetch a fresh copy", near the preview.

On Tue, Oct 17, 2017 at 8:29 AM, Jude notifications@github.com wrote:

@mbleigh https://github.com/mbleigh @megamindbrian
https://github.com/megamindbrian Thank you for your messages. I have
made my hosting directing every requests to my function and response
index.html which is hosted in functions/build/index.html to clients. But
I don't know how to confirm is a request coming from FaceBot? I have tried
using facebook debugging tools to access my website's url, I supposed the
cloud function would be triggered, but it wasn't. I'm not familiar with
back-end development, can you give me some hint? Thanks.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-tools/issues/33#issuecomment-337266581,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX5XbrCQ3mowcUnJjWYWsaiScoN1y4l0ks5stMfcgaJpZM4CtPYG
.

--
CONFIDENTIALITY NOTICE: The contents of this email message and any
attachments are intended solely for the addressee(s) and may contain
confidential and/or privileged information and may be legally protected
from disclosure. It is then shared with tech companies, bots, hackers,
government agencies, and marketers. The security of this message is none,
and it may be shared on Instagram at anytime. If you are OK with this,
please respond. There isn't really any security or privacy anywhere. If
you disagree you may want to go camping and talk to people face-to-face
like in old times.

--
CONFIDENTIALITY NOTICE: The contents of this email message and any
attachments are intended solely for the addressee(s) and may contain
confidential and/or privileged information and may be legally protected
from disclosure. It is then shared with tech companies, bots, hackers,
government agencies, and marketers. The security of this message is none,
and it may be shared on Instagram at anytime. If you are OK with this,
please respond. There isn't really any security or privacy anywhere. If
you disagree you may want to go camping and talk to people face-to-face
like in old times.

@megamindbrian Function was triggered if I access my website with browser. But it wasn't triggered after using facebook tool to fetching the page's data.

@judewang take a look at https://firebase.google.com/docs/hosting/functions#when_is_cached_content_served

For a quick-and-dirty test you may try to add some random query parameter to the tested URL.

So the initial question was how to use prerender. This solution doesn't solve the prerender integration problem, but it does solve open graph for a single page app.

1. In my build script, I copy public/index.html to functions/hosting/index.html
2. In firebase.json I add a rewrites rule to point to a cloud function called "host"

"hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "host"
      }
    ]
  }

1. I define a cloud function called host. In most cases this just returns the index.html file that i copied over to functions/hosting/index.html, but if the agent is one of the known open graph parsers, I return database data in open graph format based on the route.

exports.host = functions.https.onRequest((req, res) => {
  var userAgent = req.headers['user-agent'];
  if (userAgent.startsWith('facebookexternalhit/1.1') ||
    userAgent === 'Facebot' ||
    userAgent.startsWith('Twitterbot')){

    //getOpenGraph() parses the path, and gets some data from the firebase database to construct open graph data.
    // eg: <meta property="og:description" content="My super cool webpage." /> <meta property="og:title"...

    res.status(200).send(getOpenGraph(req.path));
  }
  else{
    //optional - turn on caching: res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
    res.status(200).send(fs.readFileSync('./hosting/index.html').toString());
  }
});

I think that's it. Hope this helps some folks!

I have to say this is disappointing, newer competitors have this down, such as https://www.netlify.com/features/, that definitely make it more attractive for web apps that need the SEO / Social integration.

Firebase is killing it for mobile / react native, and I'm really enjoying it as a platform overall, but this is a pretty big flaw for web apps IMO.

In general we've found that content that needs prerendering is also content that is best served by server-side rendering (for performance and first-load reasons). Generic prerendering is not on our immediate roadmap for this reason.

That being said, we are listening to the feedback about wanting the functions integration to be more flexible to allow "sometimes" function execution. Since Firebase Hosting relies heavily on CDN caching this kind of flexibility is difficult to achieve technically for us. We will continue to listen to feedback and try to find ways to make the platform better for your use case. :smile:

A UI in Firebase for connecting functions directly to the front a domain
name would fix my use case.

https://us-central1-...dsaflk;sdafkljsdafkl;jsdf;
lkjsadfkljasdfkljsdaflk.cloudfunctions.net

On Fri, Jan 5, 2018 at 3:33 PM, Michael Bleigh notifications@github.com
wrote:

In general we've found that content that needs prerendering is also
content that is best served by server-side rendering (for performance and
first-load reasons). Generic prerendering is not on our immediate roadmap
for this reason.

That being said, we are listening to the feedback about wanting the
functions integration to be more flexible to allow "sometimes" function
execution. Since Firebase Hosting relies heavily on CDN caching this kind
of flexibility is difficult to achieve technically for us. We will continue
to listen to feedback and try to find ways to make the platform better for
your use case. 😄

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-tools/issues/33#issuecomment-355683821,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX5XbtVDQSPOIAZFyozujQQUektf2WM1ks5tHqM8gaJpZM4CtPYG
.

--
"I studied engineering"

CONFIDENTIALITY NOTICE: The contents of this email message and any
attachments are intended solely for the addressee(s) and may contain
confidential and/or privileged information and may be legally protected
from disclosure. It is then shared with tech companies, bots, hackers,
government agencies, and marketers. The security of this message is none,
and it may be shared on Instagram at anytime. If you are OK with this,
please respond. There isn't really any security or privacy anywhere. If
you disagree you may want to go camping and talk to people face-to-face
like in old times.

@mbleigh isn't this standpoint somewhat opposed to the ethos of serverless, and using a BaaS / FaaS provider like firebase? With the trend to towards SPA's over the last few years, this is a fairly common use case, so much so that it's been tackled by competitors like netlify and roast for instance. While they're smaller, for hosting this just makes sense, providing faster load times, along with critical discoverability and shareability.

Rather than adding additional development and maintenance overhead for customers, an optional prerender service or at the very least, the ability to integrate with a third-party service such as prerender.io would be a vast improvement.

Firebase really is a great platform but seems more mobile orientated, with hosting being the only lacklustre part of it for me.

Thanks for the prompt response.

@mbleigh

In general we've found that content that needs prerendering is also content that is best served by server-side rendering (for performance and first-load reasons).

Aside from @Pushplaybang's spot-on argument, I have to disagree with your argument. For one thing, it's up to the application developer (i.e. not to you guys) to take decisions in this area. Mere page performance considerations must be balanced with other equally important architectural decisions.

Single-page apps or sections of apps have to resort to some degree of client-side rendering and unfortunately crawlers, including google's own, are not very good yet at indexing such pages. I had to resort to PrerenderIO after months of failed attempts to let google index my websites properly, something that forced me to keep an express.js server based approach, __just for the indexing issue__.

Think of a website which has a /product/**.html page that renders ANY product depending on the client side detected deep url. The rationale behind this design is that loading an actual separate page for a product, even keeping into account browser and cdn caching, is not as smooth from the UX perspective as loading another product's data and rendering it while changing the url. Customers spend most of their time on product pages when browsign-to-buy while on an e-commerce website and often navigate to other products via "related products" links or in-page ajax searches links.

We are stuck with the absurd (IMHO) _escaped_fragment_ mechanism lest we get penalized for cloaking... is Google finding hard to hire engineers with neat solutions to this ubiquitous issue??

I find even the total absence of a website/webapp indexing section in the documentation __unjustifiable__.
Mobile apps might dominate the consumer market but how about B2B? Most office departments operate on desktop computers. Indexing desktop websites to reach R&D or purchase departments is not a "nice to have", it's critical for B2B supplier businesses.

If Firebase/Google are not interested in this because flashy apps running on shiny gadgets make more revenue, it would be nice to know it; 4 years of giving evasive answers to loyal technology adopters are quite insulting to anyone's intelligence.

Ranty? Yes, but I'm the one having to justify additional infrastructure costs additional development times and unexpected behaviours of crawlers to my customers.

four years of this issue being open does seem a bit silly. @cleverplatypus - couldn't agree more with your sentiments.

This problem area overall isn't something we've stopped thinking about, but we still do not have any immediate plans for escaped fragment prerendering.

I recognize that there are definitely times when a static Single-Page App can benefit from prerendering; however, I still believe that in the majority of (but not all) cases of these types of sites are better yet served by server-side rendering that can bootstrap the SPA from any URL.

Our goal is to make Firebase Hosting a fantastic platform to deliver all kinds of web experiences. While I appreciate the frank and impassioned feedback provided in this thread, we do have limited resources and have to prioritize work that we think will have the largest impact for our customer base overall. If you want to help change our mind about prioritization of a feature that you feel strongly about, the best way is to file a feature request -- these are tallied up and help guide us towards work that is demanded by our developer community.

I'm going to close this thread since I don't think there's really anywhere left for the conversation to go, but I'd encourage anyone who is not well-served by our Cloud Functions integration to file a feature request for prerendering so that we can directly see how large the demand is!

Thanks for using Firebase Hosting, all 😸