[MUSIC PLAYING]
WIETSE VENEMA: Hi, there.
If you're building web apps, you'll surely love Firebase.
I know I do.
Firebase Hosting has a powerful CDN
and makes it simple to configure custom domains.
And then there are many other features
to love like managed user authentication and extensions
that make it easy to send email or resize images.
On Google Cloud, the easiest and most convenient place
to run backend code is Cloud Run.
It lets you run your code, written in any programming
language, directly on top of Google's
scalable infrastructure.
Building web applications with Google Cloud and Firebase
makes a lot of sense.
Until now, using Firebase Hosting and Cloud Run
together required multiple steps to set up.
We fixed that, and as of today, you
can integrate Firebase Hosting with Cloud Run in one click.
Well, maybe two.
Let me show you how to build a web application with Firebase
and Google Cloud using a demo.
Here's my new blog.
You can scroll through all the recent posts,
and if you sign in, you can subscribe
to a weekly digest email.
Yeah, I know.
This is a classic and timeless example,
but you'll still learn a lot from it.
Because this is everything I will cover in this video--
using any programming language with Cloud Run,
adding a domain and a global CDN with Firebase Hosting,
storing data in Firestore, adding user authentication
with Firebase, and scheduling a recurring job
with Cloud Run jobs in Cloud Scheduler,
and sending emails with Firebase.
Let's get started.
On Google Cloud, Cloud Run is a great place
for your backend code.
It lets you run your code directly
on top of Google's scalable infrastructure.
And you can use any programming language on Cloud Run.
I really like to use the programming language Go,
so that's what I use as a backend for my blog.
My backend code renders the HTML and sends it to the browser.
My blog's data is stored in Firestore.
That's a document-oriented database,
and I like that it's incredibly reliable.
Google offers in 99.999% SLA for multi-regional locations.
That's a Service Level Agreement of five 9s.
Now that's reliable.
This is my blog's code.
It's fairly minimal, as you can see.
It has a few Go files and just a sprinkle of JavaScript and CSS.
There's also a Docker file.
The Docker file describes how to build and package
my app into a container image.
That's useful, because containers can run anywhere.
If you don't like the write and maintain Docker files,
Cloud Run also lets you do a source-based deployment.
And that means Cloud Run figures out
how to build and package your app into a container
without requiring a Docker file.
Let's deploy my blog.
I navigate to the Cloud Run page in the Google Cloud Web
Console.
I click Create Service.
I have the source code of my blog stored in GitHub,
so I'll select Continuously Deploy New
Revisions from a Source Repository
and set up a Cloud Build.
That brings up this panel.
I can select the repository I want to use.
And I have a Docker file, so that's what I select here.
Cloud Run also suggests using Google Cloud build packs
if you don't have a Docker file, but let's Save.
Let's call my service fictional-blog.
That sounds good.
And I will select a region close to me
here in Europe, one that has low CO2, because that's important.
And there are more settings here.
I can configure CPU allocation and auto-scaling.
Ooh, and I want to allow unauthenticated invocations
to make sure that my blog is publicly available.
It's now deploying.
Before we continue, there's one thing I want to emphasize here.
You can use any programming language on Cloud Run,
because it's container-based.
And I used Go because I like it, but I
could have used Java, Node.js, Python, Ruby,
PHP, or any other language.
Cloud Run only needs a container to start a web server
and handle incoming requests or events.
Let's take a look at that deployment again.
It's still running.
And look, it's ready.
Cloud Run deployed my blog.
It's ready on an HTTPS endpoint.
I click on the URL to see it in action.
And it worked.
So there's my blog.
I should write a blog post now.
But look at the URL.
It's the Cloud Run default endpoint.
It has a unique hash in the subdomain,
and I don't really want to use that as the URL for my blog,
so let's change that.
To add my domain, I'll use Firebase Hosting.
It comes with a web.app subdomain,
and I can pick any subdomain that's still available.
It also comes with a built-in Content Delivery Network,
a CDN, and the ability to use my own custom domain later
if I wanted to.
Now there's an alternative, which
is to use Cloud Load Balancing on Google Cloud,
and that's a good option if you need advanced features
such as multi-regional Cloud Run deployments or integrations
with other Google Cloud Services like Cloud Armor.
I don't need any of that, so I'm going
to go with Firebase Hosting.
I will set up Firebase Hosting using the Google Cloud Console,
and this is the part that we're launching today.
Adding Firebase Hosting to a Cloud Run service
is now one click.
In the Integrations tab, click Add Integration
and select Firebase Hosting.
Now I entered a subdomain I like.
Fictional-blog.web.app sounds about right.
Cloud Run is now setting up Firebase Hosting for me.
Previously, I would have had to complete multiple steps
and read through documentation to set this up properly.
It looks like Cloud Run needs some time here,
so let's talk about Firebase Hosting in more depth.
Earlier, I mentioned that Firebase Hosting
has a global CDN, and you might wonder why that's important.
A CDN is a great way to improve the performance of your site,
because it stores frequently requested data
on an edge location that's closer to the user
than the Cloud Run service is, and this improves end user
response times.
It makes your site faster.
Let's check if Cloud Run has already
added Firebase Hosting in front of my blog.
Oh, it looks like it just completed.
My blog is now available on fictional-blog.web.app,
which is a better URL rather than the one in Cloud Run.
And I can also change this to my own custom domain later using
the Firebase Console.
One thing to note here is that to make
good use of this caching ability of the CDN,
you should include cache control headers in the responses
like I'm doing here.
Public tells shared caches that the response is cacheable.
Don't set that for private pages.
max-age tells your browser to cache no longer
than 30 seconds.
And the s-maxage tells shared caches, such as the CDN,
to cache no longer than 60 seconds.
All my blog's data is stored in Cloud Filestore, which
is a document-oriented database from Firebase and Google Cloud.
It's for mobile, web, and server development.
Today, I'll connect to it for my code on Cloud Run.
Let's return to the demo and add a first post.
Here is my blog again with no posts.
I'll navigate to Firestore in the Google Cloud Web Console
and add the first post.
I picked Native mode.
That's the recommended mode for Firestore.
Datastore mode is only needed if you
are migrating from Datastore.
I choose a multi-regional location in Europe.
They have better availability than regional locations,
but it's also more expensive.
I'll now add a new collection called posts,
and in this collection, we'll have a document
for each post on my blog.
I add a first post.
It's a document with two fields.
There's content and markdown.
I make it say, Hello world, first post.
And I also have to set a published date, which
I will set to now, because I want to see my first post live,
immediately.
I click Save.
I go back to my blog.
And this is great.
My first post is live now.
Now let's allow my readers to sign in
to subscribe to the weekly digest email
by adding Firebase authentication.
I'll add only a Google One Tap sign in button,
but Firebase authentication supports many identity
providers.
This is the Firebase Console.
Let's set up Google One Tap sign in here.
I click Set Up Sign-in Method.
As you can see, there are many available sign in providers
here.
I click Google, and Enable it.
To get the button to work on my blog,
I added a few API keys and other settings
that you can copy from the Firebase Console.
Now when users, readers of my blog,
click Sign In to Subscribe, they go to the sign in page.
I click the button, consent to logging in, and there you go.
I'm logged in to my own blog.
I'll make sure to subscribe to the weekly digest
of my own blog, because I really like to receive email.
Let's dive into what just happened under the hood.
With Firebase authentication, you
can sign in users with only client-side code.
When the user presses the Sign In with Google button,
it kicks off the sign in flow.
The user consents to logging in, and the identity provider
shares the user details with Firebase.
And Firebase returns an identity token to the browser.
To complete the sign in flow, the client-side code
passes the identity token to the backend, a Cloud
Run using a POST request.
And the backend then uses the Firebase Admin SDK
to verify the token, get the user details,
and set an HttpOnly session cookie to make
sure the user stays logged in.
Now that we've covered user login, let's talk
about implementing that weekly digest email.
Now the most straightforward way to implement that
is to write some code that does three things--
pull a list of recipients from Firestore, formats the email,
and send all the emails.
Let's take a look at the code.
I can query the list of recipients from Firestore.
When I clicked Subscribe earlier,
it added the record to a collection
called "preferences."
You can see it here in the Firebase Console.
It shows subscribed is true, and that's my user ID.
So, in my code, when I get the list of emails,
I can filter on subscribed here, and I
use the UserID to query the email using the Firebase
authentication SDK.
And the third step is to use a Firebase
extension to send the emails.
I'll show you how shortly.
I'll also need to execute that code once every week.
Here's a good way to implement the recurring
job on Google Cloud.
Use Cloud Run jobs to run the code,
use Cloud Scheduler to execute it every week,
and use a Firebase extension to easily send email.
That's it.
Cloud Run jobs is cron for the Cloud.
This is the Cloud Run interface again.
I can create a job here, like our Services and Jobs,
two different tabs.
Now when I press Create Job, earlier, I
configured automatic deployments from GitHub,
and I can reuse the same container image for my job
because I added the second entry point
to the container that runs the code that sends the emails.
I select a container image, and let's call
this job weekly digest.
I set it to run in the same region in Europe
where my service runs, and this is
where you can configure the second entry point.
Now this is how it works.
In my Docker file, I build a second binary called job,
and that runs the logic to send the emails.
So I set that container command to run the binary,
and I set my job to execute immediately.
Now let's take a look at the logs.
Oh, that's great.
It looks like I got my first email.
Now I want to schedule this on a weekly schedule.
So I go to the Triggers tab and click Add Scheduler Trigger.
I can add a schedule for this job to run on every Monday.
I like that this field legend, that it changes
when I type to help me figure out
how this cron job format works.
So it should be 09**1, and that's at 9:00 AM on every
Monday.
I created the trigger, and now it
runs on every Monday morning.
To wrap up this part, I want to highlight
that there are two main resources in Cloud Run.
Services are for web services.
Cloud Run provides an HTTPS endpoint
and handles all incoming requests using a web server
that you provide in a container image.
And this is what we did at the beginning of the demo.
Now, jobs are used to run code that performs a job
and quits when the work is done.
Compiling and sending the weekly digest
is the perfect use case for jobs.
I want to quickly show how to add the extension.
So this is the Firebase Console again.
I navigate to the list of Extensions.
There are several extensions available,
and I pick the Send Email extension by Firebase.
It wants to create some resources in my project,
and that's OK.
I also have to configure my SMTP server.
I'll fill in some made up values here
and replace them later when you're not watching me type.
I click Next, and there we go.
It's installing.
This is how I use the extension.
To send an email, I write a document
in the mail collection with a subject
and an email body and a recipient.
That's it.
And this is what happens if I add a new record to the mail
collection.
If I'm quick enough, I can see that the email extension adds
a new field to the document with the delivery info,
and it looks like it succeeded and delivered my email
using just one attempt.
If there's one thing to remember from watching this video,
it's this--
it's great to build web applications with Google Cloud
and Firebase.
Firebase is a powerful CDN and many more features to love.
It works together well with Cloud Run,
which is a great place for your backend code.
Thank you.
[MUSIC PLAYING]