MARTIN OMANDER: Hi.
I'm Martin, and I'm going to build and deploy
a React app to Google Cloud.
You will see every step along the way so you can do the same
and deploy your app.
Anyone on the internet will be able to use your React app,
and you won't have to manage any servers.
Let's get started.
The first step is to create a React app,
then I'll create a server-side app using Express.
That will serve the React app to users
and provide an API so the app can get data from the server.
Finally, I'll deploy the app to Google Cloud.
First off, I need Node.js installed on my computer.
I already do, but if you don't, go here to get it.
Next, I will use Veet to create a default React project.
You may prefer Next.js, Remix, or Gatsby instead.
They all work.
Veet will ask me for a project name, which framework to use--
in this case React--
and type of project.
Now, Veet created a starter project for me.
I can cd to this directory it created,
install all the dependencies, and run the app.
The app is now served from my local machine over this URL.
I will click, and there is my React app.
It displays a button, and when I click it, count is incremented.
Great.
The React app is working.
All right, let's make a small change.
I will open the app directory, then source, then App.tsx.
This is TypeScript, but it would be a JavaScript file, instead,
if you picked that language in the setup.
I will edit this line here and save.
And here we see that the app was rebuilt automatically,
and here, we see that it was reloaded in the browser.
Excellent.
We now have an environment for local development.
Now, let's build the app for deployment.
I'll press Control-C to get back my command prompt,
then I'll run npm run build to build the app for deployment.
Here we see the four files that were
created in the dist directory.
Those are the files that we will deploy to the Cloud later on.
All right, that was step 1.
Now, we're ready for step 2.
We will create a server-side express app.
It will do two things.
One, it will send the HTML, CSS, and JavaScript
files from the dist directory to the user's browser
so they can use the React app.
And two, it will provide a server-side API
that our React app can call.
Any web app I have ever built has
called an API to access the database
or to run other server-side code.
To create that server-side app, I'll
go up one directly, from the React app,
then I'll create a new Node.js app.
This server-side app will use the express package
for handling HTTP requests, so let's install that.
Then I will create the file, index.js.
This server-side code will initialize express,
so it can respond to incoming HTTP requests and handle JSON.
Then I will tell express to serve files
from the dist directory as static files
and not try to run them on the server.
Remember, that directory contains the HTML, JavaScript,
and CSS files for our React app.
And then I'll add code to start the express server,
so it listens to incoming HTTP requests.
Let's add a server-side API to our React app
so it can call it and get the list of pirates.
When the app hits this URL, this code will run on the server.
First, it will extract the ID from the URL,
then it will look up the pirate that
has that ID in our database.
If no pirate was found, it will return a 404 error to the React
app, but if the pirate was found,
that pirate record will be returned to the client as JSON.
Now, in the finished app, this getPirate function
would probably look up pirates in a database,
but just to get off the ground quickly,
let's hardcode some pirates here.
All right, the server-side code is done.
Let's run it on my local machine.
It's convenient to have an NPM script for this.
So I'll go to package.json for the server-side app,
and enter this start command.
We can use this ourselves to start the app.
And once we deploy the app to the cloud,
Google will run that too.
Let's run that start command.
All right, the server is running on this address
on my local machine.
Let's go there with the browser.
Very nice.
Our server-side app sent us the React files,
so I'm now running that app in my browser.
And next, let's take a look at that API.
I will ask for pirate number 3 from the API,
and there it is in JSON format.
The API is ready to be used by our React app.
But let's move on to the last step.
We're going to deploy this app to Google Cloud.
First, let's create a project in Google Cloud for our app.
I'll go to console.cloud.google.com,
then I'll pick my account here.
Then I'll click through here, and here, I
can click this button to create a new project.
If this is my first project on Google Cloud,
I will also need to set up billing.
We will use Cloud Run, which is serverless,
so it has no fixed monthly cost.
It will only charge us when our app is actively
creating response to a user's HTTP request.
What does that mean?
Well, in this chart, our container
is listening for incoming HTTP requests
for the entirety of the dark bar at the top.
The blue bars are the requests.
The green bars show what we are getting billed for.
As you can see, when no blue request is being processed,
there's a gap in the green billing bars.
We aren't charged for that time.
In other words, if our app gets 1,000 requests per day
and each request takes 1 second to process,
we will only be charged for 1,000 seconds
of CPU time that day.
We may even be charged for less than that
if some requests overlap, like the blue bars in the graph.
The first 200,000 CPU seconds each month
are free with Cloud Run.
There is also a free tier for memory usage.
You can find all the details about the free tier
and the cost if you go above that free tier
here on Cloud Run's pricing page.
In practice, this free tier means
that none of my development projects have cost me anything.
It's only when I got serious production-level traffic
that I've had to actually pay for Cloud Run.
Having said that, for the rest of the steps in this guide
to work, you'd need to create your billing account here.
If this is your first Google Cloud project,
you get a $300 credit.
All right, now, let's get ready to deploy the React and Express
apps to Google Cloud, and that is done with a gcloud command
line tool.
Here are the installation instructions.
I've installed that tool already,
so I will authenticate with gcloud auth login.
This will give me access to my projects in Google Cloud.
We see here that the gcloud tool tells us
that we should set our current project.
That's a good idea.
It looks like we need our project ID.
We can find that here in the Cloud Console.
Let's copy that, and then we'll use the gcloud tool
to set our current project.
All right, let's deploy our app to Cloud Run.
I'll enter gcloud, run deploy, and what I would like the Cloud
Run service to be called.
I can have multiple Cloud Run services in my project.
The gcloud tool will ask me where the source code is.
It's in the current directory, so I will hit Enter,
then it says, API run.googleapis.com
is not enabled.
To help with security, Google requires us to turn on each API
we want to use in our project.
I will enter y to enable Cloud Run in my project.
Next, I get to decide where in the world this code will run.
Any internet user will be able to access the app,
but it will be slightly faster for users close to the location
I pick.
us-central1 sounds good to me, so I'll enter 29.
Next, it asks me if I want to create an Artifact
Registry in my project.
That's where all the versions of my BILT app
will be stored, making it easy to roll back
to a previous version, if needed.
I accept by hitting y.
This question won't come up next time I deploy my app.
Now, it asks me about unauthenticated invocations
to my app.
Do I want my application to be reachable by anonymous users
on the internet?
I do, so I hit y again.
Next, it asks me if I want to turn on Cloud Build.
Again, this question only comes up
because it's the first time I deploy to this project.
Cloud Build builds my application, actually,
a container with my application from my source code
in the cloud.
That way, I get consistent builds
in a stable environment that does not
depend on any individual developer's laptop.
I'll hit y again.
And now, it's building and deploying my app.
This will take about three minutes,
so I'll refill my cup of tea.
[TIMER DINGS]
And I'm back.
The deployment succeeded, and here, it shows me the URL
that our app is served from.
Let's open that in a browser.
Look at that.
There's our React app.
It is now on the public internet ready for anyone to use.
Let's also make sure that the server side API works.
I'll enter /api/pirate/2 after the base URL,
and there is the pirate record.
Both my client side react app and the server-side API work
from the Cloud.
We have created a React app, created a server-side express
app, and deployed them to Google Cloud for all the world
to enjoy.
Now, there are few more things you'd
need to make a good web app that's ready for customers--
your own domain name, a database,
and user authentication.
Let's start with the domain name.
The URL that Cloud Run generated for us
is fine for development and testing,
but we'd probably want to use our domain name before we
send real users to our app.
Let's go to console.cloud.google.com
and our project.
I'll click the Hamburger menu and scroll down
to Serverless and Cloud Run, and here
is our Cloud Run service and any others
we may create in the future.
If I click the service, I get this page
where I can view metrics, set service level objectives,
check the logs, and so on.
But we want integrations.
I'll add an integration, make custom domains.
Here, I'll enter my domain name and enable some other APIs.
This will set up a load balancer that points from my domain name
to my Cloud Run service.
It will also create a certificate
so people can use HTTPS when accessing my domain.
And it will show me the DNS changes
I will need to make for my domain
with my DNS hosting provider.
I did all of this with my domain,
and this is what it looks like when it's done.
There it is.
By the way, this load balancer will carry a fixed monthly cost
of about $20.
All right, that was the domain name.
What about the database?
Well, there are plenty of choices in Google Cloud.
If you prefer relational databases,
you can activate Cloud SQL in your project.
If you like NoSQL databases, you may
want to use Firestore instead.
By the way, Firestore is completely serverless,
so it has no fixed monthly cost, and it includes a free tier.
Also, client side code can connect to Firestore directly
without a middle layer of server-side code, if you wish.
Finally, many web applications need
to authenticate their users.
Let's talk about that.
It takes a lot of work to build login functionality yourself,
and it's kind of dangerous too.
You might leave a security hole open.
I prefer using Firebase Authentication.
It lets users log in with existing accounts from Google,
Facebook, Apple, Microsoft, and others,
or users can create a new account for your app
with their own email and a password they pick.
Firebase Authentication takes care of all of that for you.
So there you have it, the three steps
to publish your React app to the world using Google Cloud.
In my opinion, the best way to build an app
is to focus on your users and what they need.
Don't waste your time on server maintenance, networking,
scalability, and so on.
Google knows how to run production web apps
and can take care of all that for you.
That way, you can launch version 1.0 of your app sooner.
And version 2.0 of your app will be
able to handle thousands or maybe even millions of users
because it runs on Google's infrastructure.
Thank you for watching.
If you have any questions, please enter them
in the comments.
Also, let me know if there are any other serverless
topics you'd like to hear about in future episodes.
I read every single comment.
I can't wait to see what you build.
[MUSIC PLAYING]