Planet-scale reach for Next and Angular apps with Firebase App Hosting

Introducing Firebase App Hosting, the next generation of serverless web hosting with Google. Ship full-stack, AI-powered web apps to Google Cloud, without managing any of the backend infrastructure. With automatic rollouts from GitHub, reproducible builds with Cloud Build, and native Cloud Run integration, running server-rendered Next.js and Angular apps with Firebase has never been better. Learn how to ship full-stack web apps at planet scale with Firebase App Hosting.
Speakers: Mark Thompson, Julia Reid, Thomas Bouldin
Resources:
Firebase App Hosting Quickstart → goo.gle/3JFD6dt
Firebase App Hosting Blog → goo.gle/44WAfa9
Watch more:
Check out all the Web videos at Google I/O 2024 → goo.gle/io24-w...
Check out out all the Firebase sessions from Google I/O → goo.gle/io24-f...
Subscribe to Firebase → goo.gle/Firebase
#GoogleIO
Products Mentioned: Firebase App Hosting, Firebase Data Connect, Angular, Gemini
Event: Google I/O 2024

[@AmenraRobinson]

This is the best news to come out of IO this year. My team and I were just in the process of setting up Cloud Run, Build, etc in GCP. We already use multiple other Firebase services in our app, and this just simplifies everything! We need to get our Angular MVP online so that our early adopters can get access to it, and Firebase just greatly sped up our production tasks. Thanks Team. 🙏

[@LarsRyeJeppesen]

We use Cloud Run for our Angular SSR but this looks interesting.

[@qwerty-or1yg]

have you tried this out? Is it properly working for you? I can't get app hosting backend to work and it just keeps throwing errors when trying to host the application which I cannot wrap my head around why on earth is it not working.

[@Jmaiers75]

I would love to see an example of migrating an existing app from Firebase Hosting w/ SSR handled in Cloud Functions/Cloud Run to the new App hosting

[@sleepingempires]

Well done guys, this is definitely the future for easily hosting apps and not having to use Cloudflare or Vercel. Support for Remix would also be very useful for us.

[@fahadahmed3242]

Remix is now becoming React Router v7 with Vite. Would be good to know if we can have the same experience with React 19, Vite and React Router v7.

[@rehanshaikh386]

Is it supports next js App router?

[@geshanm]

I tried it but it doesn't roll out, (7:35) it doesn't create the Cloud run service for me.

[@ThomasBouldin]

Contact firebase support. You should have error logs in Google cloud logging

[@geshanm]

@@ThomasBouldin I have found the solution, thanks!

[@qwerty-or1yg]

what was the solution? I can't wrap my head around why builds keep failing.

[@iscchristianlara]

Geshan, please help me, I haven't been able to find a solution, maybe your solution is mine too.

[@TheGameWatcher]

Awesome! Is Nuxt on the roadmap?

[@nicolaschabaud5071]

Wildcard subdomains, it is the key feature that push me to migrate from firebase hosting.

[@dylanbronson3650]

This is so dope!! Great presentation too!

[@portalteam5832]

When is SvelteKit support coming?

[@jamesdaniels8256]

Any NodeJS app with a 'build' and 'start' script in it's package.json should work but may be subject to change until we add official support. Give it a spin!

[@1Bishop]

Would absolutely use this when there is nuxt / vue ssr support!

[@yogenp]

wow. finally. gonna take it for a spin today

[@JohnMcclaned]

All this needs is protection from a stampede of malicious traffic. Vercel just announced being able to protect it in real time. Probably needs a firebase wrapper around Cloud Armor.

[@TrialEmail-yh2cn]

Nice presentation and explanation and i liked Julia's firebase earings!!

[@jkk23-g7c]

This is an awesome update. I was wondering if you are able to deploy a dev build and a public build separately?

[@bzengineer8969]

Wildcard subdomain is the thing what i needed before i could migrate from vercel to firebase.

[@kalebkloppe6193]

This is awesome. How would this would work if I’m using a monorepo with npm workspaces, or turborepo, or lerna instead of a single Next.js repo. Monorepos are really popular right now.

[@arubin1978]

Indeed support for monorepo is really important - I'm using turborepo as well

[@pongphontan9258]

24:17 for adding secrets e.g., API keys and access tokens to Firebase App Hosting

[@youhan96]

Nuxt Nuxt Nuxt Nuxt

[@dukeselwood]

Damn, this is cool. Nice work

[@patricsteiner8483]

Very cool! But what I'm missing is: How can we manage multiple environments, such as staging & prod? Should I have 2 firebase projects? But then how to properly integrate this in the ci/cd pipeline?

[@santosharakere]

Excellent product, thanks.

[@ByteBandit4]

Do it for Flutter apps

[@shalomihaza825]

Can we connect to app hosting using Gitlab instead of Github?

[@ruiqisg]

Does App hosting provide support of dynamic subdomains like Vercel hosting do?

[@jamesdaniels8256]

Wildcard domains are coming soon

[@bmxdeveloper]

​@@jamesdaniels8256 You know how to support multiple domains like shopify?

[@qwerty-or1yg]

is there no full video tutorial from scratch? Their AngularFire web codelab tutorial isn't working and app hosting backend just keeps throwing errors when trying to host the application following their tutorial.

[@iscchristianlara]

I have been unable to deploy a NextJs application on Firebase app hosting, I don't know what I'm doing wrong, I have followed the very few videos that exist on the subject, I have read the documentation and I can't get it to work, please help!

[@TheFumesPlatform-ko1il]

Struggling to find any kind of answers to why my angular ssr app wont deploy. What commands run? I assume it just automagically starts the node server. An example of a deployable angular ssr 18 app would be nice, i already tried npm i @apphosting

[@alycheikhouldsmail7576]

when builing nextjs crash we don't have signicant raison for why this happen, I have this issue write now, I already the deploy site netlify without issu, another issue adding env var not intuive.

[@Sergedable]

is possible to deploy flutter app to Firebase App Hosting ? thank you

[@cornerman4529]

Are wildcard domain supported?

[@enzopagotto1597]

Is there any proper way to use firebase auth on server components?

[@SquelpDiscovery]

This would go great with a DNS

[@TheKoppi99]

possible with VUE.js?

[@vlhbnk]

Helo , I have an issue. Build is fine but rollout fails. Can someone assist me please ?

[@iscchristianlara]

If you find the answer, please share it with me.

[@Michael-hudson]

Does this support next 14

[@jamesdaniels8256]

Yes, all versions of NextJS 13+ are supported

[@davidlintin]

Play on 1.25X speed. You’re welcome.

[@thedelanyo]

I guess this is similar as Cloudflare Pages?

[@shrawanthakur4168]

is she really wearing old Firebase earrings?

[@pjarnfelt]

Sveltekit support please