Angular Universal and Firebase Hosting (Server-side Rendering with JavaScript Frameworks)

Angular Universal provides server-side rendering for Angular apps. With help from the Angular CLI and Firebase Hosting you can make your site more SEO friendly and improve your time to first render.

[RaviRajput-ffle]

was eagerly waiting for you next video.. even an hour ago i was checking firebase channel for new video..thanks

[ValAllenSamonte]

Hopefully the CLI team will be able to minimize the work done here

[domhnallodubhlainn]

I've been trying to implement SSR with Universal for the last week - all day, every day. I've read every tutorial blog, watched every video, read the documentation multiple times, and still can't be sure what I'm doing. It's like every tutorial and video carries out a different process and requires different steps and I'm just lost. I have a local web app which appears to serve SSR pages (based on inspecting the source in Chrome), and now I want to deploy it, but this has me very confused. I know that if I try to just "firebase deploy" it won't work, because I need Firebase to not only run my Angular app, but also the server-side rendering app (and also a separate Universal app too? Not sure) And I just don't know how to tell Firebase to run all of them simultaneously. I know he did that here by editing the angular-cli.json file, but AFAIK all Angular versions since 6 have a different file (angular.json) which has a different structure. Even if I had the same file with the same structure as he uses here, I still wouldn't be able to implement the changes as I wouldn't have a clue what I'm changing or why (and this is after a week of reading documentation). I sincerely hope web crawlers will read JS pages properly soon because I cannot be arsed with this SSR business. Totally wrecking my buzz.

[estebanpa]

Hi David, what VSCode plugin do you use for angular?

[ValAllenSamonte]

Also, I would love to see the Firebase SDK to have offline first support for PWAs (offline like caching the fetched data from firebase)

[pierrechavaroche]

Does AngularFire2 with Firestore supports Angular Universal? That would be very important for us to know.
Thank you for the great video!

[nucik]

I followed your instructions and my issue is that the express app is not called. Should I setup something else except rewrite in my firebase.json? Also when I try to execute function manually using function's URL I get "Billing account not configured. External network is not accessible and quotas are severely limited. Configure billing account to remove these restrictions".

[abdallahabdedaiem]

Thanks for sharing! It's been a while since this has been shared. I've everything running fine. Now I want to set meta tags from api call on server? is that possible? I created logic for making that but that doesn't show up as expected when I check 'doc' in response? I appreciate any kind of help.

[tenaciousprevailer]

can you please share a github link for this demo?

[mrbassocam]

it still works with Angular 6 🤔 or there is a new way of doing SSR with angular 6 + firebase hosting?

[kartikwatwani]

The module created by you is giving error mergeMap not found

[Kalebviews]

Wish you started with React.js but I'm sure this will be useful in the future when I add Angular to my tool box.

[LarsRyeJeppesen]

I wonder when functions will be available outside the US.. it makes SSR useless with functions anyone hosting on a region outside US

[fedor_U]

@Firebase Failed to complete. After trying to start locally(firebase serve --only functions, hosting) I get 'moduleFactory.create is not a function' with latest angular cli and angular5

[abhishekpandey]

Hello in my project i have angular.json instead of .angular-cli.json, how can i change kindly help me

[cutiko]

Im really looking forward for the React version of this, kind of got confuse with the Angular code. When you do the React version can you please reinforce the Firebase work thar has to be done? Please :)

[EwanZaidi]

Hello, I have an error on server/index.ts.. It stated that cannot find module 'firebase-functions', can somebody help me with it?

[niahi]

Would love to know when is the React video comming...

[JD-yzcn]

This is a mess that now lives in my brain. Was this before Angular added `platform-server`?

[Mazziko]

i think this video is outdated now, so many things has changed on Angular-6