How to run dynamic web apps on Firebase
How to run dynamic web apps on Firebase
Deploying dynamic web apps with Firebase has never been easier! Come learn how to combine the power of Firebase Hosting and Cloud Functions to run Angular Universal, Astro, Django, Flask, Next.js, Nuxt, and SvelteKit web apps with ‘firebase deploy.’ We’ll show you how easy it is to get started, and dive into a bunch of exciting new enhancements along the way.
Resources:
Integrate web frameworks with Hosting → https://goo.gle/3m8tgc0
Speakers: James Daniel, Julia Reid
Watch more:
Watch all Firebase Sessions → https://goo.gle/IO23_firebase
Watch all the Technical Sessions from Google I/O 2023 → https://goo.gle/IO23_sessions
Watch more Web Sessions → https://goo.gle/IO23_web
All Google I/O 2023 Sessions → https://goo.gle/IO23_all
Subscribe to Firebase → https://goo.gle/Firebase
#GoogleIO
Content
0.84 -> foreign
5.279 -> hi my name is Julia I'm a product
8.34 -> manager for Firebase
10.44 -> and I'm James a developer relations
12.599 -> engineer for Firebase
14.46 -> we're going to show you how to run
16.02 -> Dynamic web apps with the latest node.js
18.18 -> and python Frameworks on Firebase
20.939 -> last year we announced an early preview
23.22 -> of what we call web framework awareness
25.32 -> in Firebase hosting with web framework
28.08 -> awareness you can easily deploy Dynamic
30.3 -> web Frameworks like nextgs and angular
32.759 -> Universal with a single command Firebase
36.059 -> deploy when called the CLI will detect
39.3 -> which framework you're using
40.76 -> automatically run the build generate a
43.86 -> backing Cloud function if one is
45.54 -> required and handle the entire
47.579 -> deployment for you with minimal
49.44 -> configuration
50.94 -> we've been hard at work enhancing these
53.399 -> Integrations and adding experimental
55.92 -> support for new Frameworks let's dive
59.16 -> into all the exciting new features for
61.379 -> web development in Firebase
64.799 -> Firebase hosting now lets you deploy
67.38 -> Dynamic full stack web apps to preview
70.14 -> channels so you can test your changes
72.36 -> before deploying to production
74.88 -> Dynamic preview channels are made
77.159 -> possible by our new support for Atomic
79.92 -> deployments with atomic deployments your
83.04 -> server and client-side code are always
85.32 -> in sync your front end which runs on
88.08 -> Firebase hosting CDN and your back end
90.96 -> powered by Cloud functions for Firebase
93.36 -> second generation are pinned to each
95.82 -> other when you deploy
97.259 -> so if your backend deployment fails your
99.659 -> front-end deployment fails too and if
101.939 -> you roll back your front end to a
103.619 -> previous version the back end will be
105.72 -> rolled back to that version as well
108.479 -> let's see this in action James
111.119 -> all right here we have a simple nex13
113.939 -> app we have a component that is serving
116.28 -> a picture of a dog using image
118.14 -> optimization but as we all know the
121.079 -> internet was built to serve our feline
123.119 -> friends so let's fix this bug
126.439 -> and now we're going to deploy it to a
128.819 -> preview channel for verification
130.92 -> next image optimization trips the
133.08 -> requirement for a back end
134.819 -> before we wouldn't have been able to
136.8 -> preview this without affecting the
138.48 -> production version of our site
140.58 -> and this seems to be working
143.04 -> and our production site remains
144.959 -> untouched
146.22 -> if you're already using the early
148.08 -> preview of our web framework awareness
149.76 -> and dynamic hosting these Atomic
151.98 -> deployments will be enabled by default
154.44 -> if you're still going at your own and
156.54 -> using rewrites then you can opt in Via
158.76 -> Firebase Json go to hosting set pin tags
162.36 -> to true
163.26 -> this will only work for second
165 -> generation functions though
167.16 -> I have to say I'm more of a dog person
169.86 -> but that's okay the point is that we're
173.099 -> investing in these modern full stack
175.2 -> Frameworks we want to make sure you can
177.78 -> leverage all the benefits and
179.7 -> optimizations they bring to your web app
181.86 -> for example we now have experimental
185.7 -> support for react server components
188.7 -> react server components is a new
191.159 -> application architecture designed by the
193.5 -> react team
194.64 -> with react server components you can
197.099 -> combine the benefits of server-side
198.959 -> rendering and client-side rendering to
201.36 -> optimize performance initial load times
203.58 -> and SEO
205.44 -> we're also excited to announce
207.239 -> firebase's preview support for next.js
210.239 -> and angular
211.76 -> internationalization rewrites so you can
214.5 -> serve different content depending on
216.72 -> your end user's country or preferred
219 -> language
220.44 -> in addition to internationalization
222.48 -> rewrites We Now support image
224.819 -> optimization for angular and xjs web
227.459 -> apps
228.54 -> image optimization speeds up your
230.819 -> website's initial load Time by only
232.98 -> loading critical images and lazy loading
235.739 -> the rest
236.7 -> to learn more about angular's New Image
239.519 -> optimization support check out what's
242.04 -> new in angular James will show you how
244.92 -> to piece these features together in your
247.14 -> web app
248.099 -> thanks Julia let's check out our
250.319 -> application we've made a couple changes
252.599 -> here now we have a react server
254.879 -> component as pulling content with async
257.639 -> await and using suspense in the render
260.04 -> cycle
261 -> this will stream HTML to your end users
263.34 -> as it comes in using a cloud function
265.62 -> this should really help with our
267.479 -> Lighthouse score
268.919 -> we pre-render this component in English
271.08 -> and Spanish when deployed the static
274.139 -> content will be served right up from the
275.759 -> CDN
277.08 -> we have our i-18n configuration and next
279.84 -> config.js Firebase deploy will translate
282.72 -> this into Firebase hosting rewrites for
285.06 -> us
285.84 -> and if we're using domain-based
287.88 -> internationalization it will map them to
290.16 -> Firebase hosting sites and deploy both
292.38 -> at the same time back to you Julia
295.5 -> we've heard from many of you that you
297.66 -> love the Firebase deploy developer
299.82 -> experience the abstraction of all the
302.34 -> infrastructure and configuration
303.9 -> required to build and run your web apps
306.36 -> while easy to use Firebase hosting is
309.84 -> also scalable and flexible our mission
312.9 -> is to empower you all to build
314.88 -> successful apps and we're prepared to
317.699 -> scale with you as your business grows
320.46 -> for example as your app grows you may
323.699 -> need to balance CPU memory and
326.639 -> concurrency to optimize performance
329.58 -> Firebase lets you customize these
331.86 -> aspects of your back end which is
333.96 -> powered by Cloud functions for Firebase
336 -> second generation
337.56 -> you can also tweak the number of minimum
339.96 -> and maximum instances which regions
342.479 -> you're deploying to environment
344.4 -> configuration and secrets and connect
347.039 -> your back end to Virtual private clouds
350.34 -> all right we'll go ahead and customize
352.38 -> our back end in Firebase Json we'll
355.08 -> start with Min instances this will make
357.36 -> it so that our backend never completely
359.22 -> spins down to zero and greatly reduce
361.199 -> cold starts
362.759 -> it's time to go to production let's call
364.8 -> Firebase deploy and it's building your
366.9 -> app once we're done it'll generate a
369.96 -> cloud function backend for us here we
372.479 -> see the reasons why a backend is needed
374.46 -> printed on the console this is great to
377.22 -> know if you want to deploy your
378.539 -> application as a fully static web app
381.24 -> and we're deploying both sites
383.699 -> let's check out the English version
386.16 -> this looks good to me
387.72 -> and the Spanish
389.639 -> CBN
391.199 -> but say we did find something now that
393.9 -> we're deploying both hosting and
395.58 -> functions atomically we could roll back
398.1 -> both at the same time and be assured
400.139 -> that our Cloud function is serving the
402.12 -> working version of our back end
404.4 -> back to Julia
406.02 -> we've talked a lot about nexjs and
408.66 -> angular Universal but Firebase deploy
411.419 -> works with many popular web Frameworks
414.479 -> we're happy to announce that we've added
416.699 -> experimental support for Astro and svelt
419.699 -> kit to our list of supported JavaScript
421.86 -> Frameworks
423.24 -> and guess what we're not just a
425.88 -> JavaScript hosting solution anymore you
428.46 -> can now run web apps with python
430.319 -> backends on Firebase with our new
433.02 -> experimental support for flask and
435.3 -> Django
436.62 -> Dynamic hosting is powered by Cloud
438.96 -> functions for Firebase Gen 2 which just
441.96 -> became generally available for node.js
444.539 -> and has preview support for python check
447.599 -> out Jeff and Daniel's Cloud functions
449.819 -> talk to learn more about what they've
451.62 -> been up to
453.3 -> we've also added support for flutterweb
456 -> the Firebase CLI will detect your
458.46 -> flutter projects and when you call
460.319 -> Firebase deploy your web Target will be
463.259 -> built for production and shipped to
465 -> Firebase hosting
466.74 -> check out our talk evolving flutter
469.08 -> support for web
470.94 -> we've also been hard at work improving
473.039 -> our existing Integrations we've upped
475.74 -> our next GS game with early preview
477.66 -> support for next 13 react server
480.539 -> components internationalization rewrites
482.88 -> back-end logging and middleware
485.22 -> capabilities
486.479 -> we've enhanced our angular Universal
488.759 -> integration to support angular 15 image
491.699 -> optimization and internationalization
493.68 -> rewrites
494.94 -> also Firebase deploy now integrates
497.52 -> nicely with NG deploy
499.919 -> we've also added experimental support
501.9 -> for nux3 enabled fast Dev mode to speed
505.139 -> up local development for both next and
507.3 -> Veet with fast Dev mode your local
510 -> server automatically refreshes to
512.7 -> reflect the latest changes to your code
514.62 -> without requiring a new build and we're
517.68 -> not done
519.36 -> we're eager to continue investing in
521.88 -> this space we're experimenting and
524.099 -> iterating quickly and we'd love to learn
526.2 -> from you so we can continue to build
528.12 -> developer tools that make your lives
530.279 -> easier
531.36 -> so give our early preview of web
533.94 -> Frameworks awareness in Firebase hosting
536.1 -> a try and let us know what you think if
538.86 -> you have feedback or feature requests
540.959 -> please sign up to join our Google group
543.6 -> to chat with us
545.58 -> happy coding do check out the other
547.92 -> great Firebase content here at IO
551.15 -> [Music]
554.339 -> foreign
555.45 -> [Music]
Source: https://www.youtube.com/watch?v=MhkDpZA_Ciw