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]
