Dude, I don't know if you are going to see this, but you just saved my life, I've been trying to use puppeteer in firebase to make a PDF from hbs template and save it to firebase storage, so far I was not able to do that, it gave me an error of "exceeded memory", but when you said to set the memory of the app to 1GB, I did it and it worked like a charm. Really love your videos, you just got a new sub :)
already implemented it but it fails when going to an angular path for example app.com/contact if it is only accessed through app.com it works wonders but if the page is reloaded through app.com/register firebase hosting says it doesn't exist
I implemented all that was done in the tutorial on my website, it still loads, and twitter cards were working even before implementing ssr. On the functions logs I can see ssr function being called and returning ok. But i dont see calls to the render function, how can I confirm if it's working properly?
This video is similar to rendertron which i have been struggling with for weeks now with urls that has query params like ?x=2 And the url encoding for the query characters
i do but angular router encodes the url as well, then when you send it to the /render endpoint that encoding coming from angular doesn't match the encoding the rendertron endcoding. the request.originalUrl in the cloud function you have created. if you please may take a look into this case and maybe you can help i would be grateful
I'm trying to do something similar but I need to send two parameters URL and CSS selector. I'd like to resolve it to JSON. Do you think I'd still need the serialize script from Rendertron? The only problem with my code is that it takes the first parameter but won't attach the second param in the URL.
Jeff just keeps making fantastic content, what a legend! On the topic of SSR, certain material components like the nav component seem to misbehave during rendering on the server ( i.e. nav renders half way through and looks nothing like the real deal ). Does anyone know a workaround?
Thanks for the fast reply, I appreciate it! Link to repo: github.com/mytee306/puppeteer You can see a screenshot here github.com/mytee306/puppeteer/issues/1
So it looks like it just doesn't know the source of static assets. Are you using the "serialize" function from render-tron? If not, that should fix the issue and you can use the code here github.com/AngularFirebase/130-cloud-functions-puppeteer
Using serialize was a big step forward, only two things left Let renderer know where to find static assets and Figure out how to fix header and login buttons color and header items positioning ( might be a lack of an external stylesheet, hence will be fixed by including static files )
Is this function quicker to resolve? I've been using your other dockerized Rendertron + Cloud Function tutorial through other projects and I usually get over 10scs for the function to finish (on payed Firebase accounts and no cold start). Most of the time Facebook bot just times out and doesn't show the rendered content... So it could be really interesting to try this other method if it's faster.
Too bad... I think there was a way to tell Rendertron to stop rendering at a certain point but I never got it to work. Since I really don't care too much about the content for social networks but about the head tags it would be a great way to reduce times. Maybe a topic for a short video? :)
Thanks for the awesome content 👍 but I've a question I've tried to use puppeteer to scrape data from Qwiklabs Public profile but i got "name resolution error" And this not only with Qwiklabs but with any other URL i try to scrape
Sir please do complete tutorial on Ionic 4 not a basic vedios,,please do advance development with Ionic 4 . because of lack of resources we can't adore it easily please help.
@@Fireship please do sir ,,,there is lack resources on Ionic...and evryone doing only basic vedios... specially we have to understand Ionic typescripts sir. THANK YOU SO MUCH SIR FOR YOUR RESPONSE.
I don't know if it's only me, but it seems like you make content for pretty advanced users. I really have a hard time following what you say because it's very technical without enough explanation, at least for me. I do think you have nice video's, but not super beginner friendly. Hopefully you will also do more content for beginners because I like your style. Good job!
Dude, I don't know if you are going to see this, but you just saved my life, I've been trying to use puppeteer in firebase to make a PDF from hbs template and save it to firebase storage, so far I was not able to do that, it gave me an error of "exceeded memory", but when you said to set the memory of the app to 1GB, I did it and it worked like a charm. Really love your videos, you just got a new sub :)
yesss more puppeteer content please!
yes become a pro member
already implemented it but it fails when going to an angular path for example app.com/contact
if it is only accessed through app.com it works wonders but if the page is reloaded through app.com/register firebase hosting says it doesn't exist
I implemented all that was done in the tutorial on my website, it still loads, and twitter cards were working even before implementing ssr. On the functions logs I can see ssr function being called and returning ok. But i dont see calls to the render function, how can I confirm if it's working properly?
This video is similar to rendertron which i have been struggling with for weeks now with urls that has query params like ?x=2
And the url encoding for the query characters
You would need to encode/decode the params if using a query string. I believe rendertron does this, www.w3schools.com/tags/ref_urlencode.asp
i do but angular router encodes the url as well, then when you send it to the /render endpoint that encoding coming from angular doesn't match the encoding the rendertron endcoding.
the request.originalUrl in the cloud function you have created.
if you please may take a look into this case and maybe you can help i would be grateful
I'm trying to do something similar but I need to send two parameters URL and CSS selector. I'd like to resolve it to JSON. Do you think I'd still need the serialize script from Rendertron? The only problem with my code is that it takes the first parameter but won't attach the second param in the URL.
More Puppeteer content would be great.
I've got what you need on my channel ^_^
how do you learn so many things?
Niiiiice. Thanks for this one too. I'm gonna use this for sure
I have set your Intro song in my Ringtone..❤❤❤
Jeff just keeps making fantastic content, what a legend! On the topic of SSR, certain material components like the nav component seem to misbehave during rendering on the server ( i.e. nav renders half way through and looks nothing like the real deal ). Does anyone know a workaround?
Thanks Mateja :) That happens with puppeteer rendering? It would be helpful to see a screenshot
Thanks for the fast reply, I appreciate it! Link to repo: github.com/mytee306/puppeteer
You can see a screenshot here github.com/mytee306/puppeteer/issues/1
So it looks like it just doesn't know the source of static assets. Are you using the "serialize" function from render-tron? If not, that should fix the issue and you can use the code here github.com/AngularFirebase/130-cloud-functions-puppeteer
Indeed, I'll take it for a run but this time using the "serialize" function. Hopefully, I'll be back with good news, thank you very much!
Using serialize was a big step forward, only two things left
Let renderer know where to find static assets
and
Figure out how to fix header and login buttons color and header items positioning ( might be a lack of an external stylesheet, hence will be fixed by including static files )
Much appreciation ♥♥
How do you paste those chunks of code just like that in all of your videos?!!
Nice. I just found out about Puppeteer a few days ago.
It's an awesome tool and way easier to deploy now that it's on FCF
I'm having this issue where I can't deploy a cloud function using puppeteer because it just can't find chrome's dependency :(
were you able to resolve it ? please help! :(
Is this function quicker to resolve? I've been using your other dockerized Rendertron + Cloud Function tutorial through other projects and I usually get over 10scs for the function to finish (on payed Firebase accounts and no cold start). Most of the time Facebook bot just times out and doesn't show the rendered content... So it could be really interesting to try this other method if it's faster.
I would not expect it to be faster unfortunately. The load time depends mostly on how quickly he frontend site loads.
Too bad... I think there was a way to tell Rendertron to stop rendering at a certain point but I never got it to work. Since I really don't care too much about the content for social networks but about the head tags it would be a great way to reduce times. Maybe a topic for a short video? :)
and cors?
Hello Jeff!
Amazing as always!!!
Is that better to use this approach instead of Rendertron? ( is this approach faster ? )
Thank you :) It's probably not faster, but much easier to deploy and experiment with (and it's free).
Angular Firebase, oh I got it. So we don't need a server working 24h per day and Pay for it ?
Correct, just easier to maintain across the board.
That's amazing!) Thanks for sharing
BTW, does it work with regular firestore stuff, so with dynamic data in meta tags?
Please make a video on same topic but for javascript not for typescript
Thanks for the awesome content 👍 but I've a question
I've tried to use puppeteer to scrape data from Qwiklabs Public profile but i got "name resolution error"
And this not only with Qwiklabs but with any other URL i try to scrape
Best youtube channel ever!!!
Brotherman made me a star and I'm not subscribed to pro just yet! Shout out
🌟🌟🌟🌟🌟🌟™️
What is it about exactly?🥺😐🤨😕
Does this not work on a free Firebase account? Do you need a paid account?
No it works just fine on a free Firebase account.
Nowadays you need a paid account to make requests outside your db
AWESOME. Thanks !
Thanks for watching Gustavo :)
Sir please do complete tutorial on Ionic 4 not a basic vedios,,please do advance development with Ionic 4 . because of lack of resources we can't adore it easily please help.
I have a bunch of Ionic4 vids planned :)
@@Fireship please do sir ,,,there is lack resources on Ionic...and evryone doing only basic vedios... specially we have to understand Ionic typescripts sir.
THANK YOU SO MUCH SIR FOR YOUR RESPONSE.
what amazing tool, I see some useful cases for it. thanks..
For sure. Web scraping, SSR, testing, crawling, etc.
Thank u for this awesome video
Ok this video was nice, BUT: Do you want to master machine learning? ˜piano song˜
Great helpful, thanks
I don't know if it's only me, but it seems like you make content for pretty advanced users. I really have a hard time following what you say because it's very technical without enough explanation, at least for me. I do think you have nice video's, but not super beginner friendly. Hopefully you will also do more content for beginners because I like your style. Good job!