Hi, I'm Martin.
This is smores, and we're going to deploy a view 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 app and you won't have to manage any servers.
Let's get started.
The first step is to create a view app.
Then I'll create a server side app using Express and that will serve the view
up to users and provide an API so the app can get data from the server.
And finally, we will deploy the app to Google Cloud.
Right. S'mores. Yes.
All right.
First off, I need Node.js installed on my computer.
I already do.
But if you don't go here to get it. Oh.
Oh. You want to get down?
Okay. I'll continue by myself.
Next, I will run NPM create view
at latest to create a default view project.
It will ask me for a project name.
It will also ask me for a bunch of settings for the new project.
I'll pick what I usually use here.
It will run for a little bit
and then will show me what to do next.
I said to the directory to create it
and install the dependencies
like it told me to
and run the app for my local machine.
There is my view up.
Great.
But it's working.
Right. S'mores.
All right.
Let's make a small change.
I will open the source directory then open
App store to view
and I will edit this line here
and save
how we see that it was automatically reloaded in the browser.
Excellent.
We now have an environment for local development with hot reload
when we update the code.
Let's build the app for distribution.
I'll press Q to get back my command prompt.
Then I'll run NPM, run, build to build the app for deployment.
Here we see that some files were created in the dist directory.
Those are the files that will deploy to the cloud later on.
All right.
That was step number one.
Now we're ready for step number two.
We'll create a server side Node.js app.
It will do two things.
One, it will send the Edge HTML thesis and JavaScript files from the dist
directory to the user's browser so they can use the view app.
And two, it will provide a server side
API that our view app can call.
Any web app I've ever built has called an API to access the database
or to run server side code to create that server side app.
I'll go up one directory from the View app.
Then I'll create a new Node.js app.
The server side app
will use the Express package for handling issues API requests.
So let's install that.
If you prefer another package that's fine.
Then I will create the file index.
DOJ's.
This server side
code will initialize express so it can respond to incoming.
It should appear requests and handle JSON data.
Then I will tell express to service files from the disk directory
as static files and not try to run that code on the server.
Remember that directory has the edge, html, JavaScript
and CC files that our view app built.
And then I'll add code to start the express server
so it listens to incoming HTP requests.
Let's add a server side
API that our view app can call to get a 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.
If no pirate was found, it will return the four forever
to the view up.
But if the pirate was found
that Pirates record will be returned in JSON format.
Now in the finished app,
this get pirate function would probably look up pirates in a database.
But just to get off the ground quickly, let's hardcoded
some of my favorite pirates here.
All right.
The server side code is done.
Let's run it on my machine.
It's convenient to have an MP pm script for this, so I'll go to package
to JSON for the server side Node.js app and enter this START command.
We can use this ourselves
and once we deploy this app to the cloud, Google will actually look
for the start command and run it on our behalf up on a server.
I will also add take module here so that import statements work
the way we expect them to.
All right, let's run that start command.
The server is running on this port
on my local machine and let's go there with the browser.
Very nice.
Our server side app sent us the built view files,
so I'm now running that app in my browser.
Now let's take a look at that API.
I'll look for a pirate number three here slash
API, slash pirates slash three
and there it is in JSON format.
The API is ready to be used by our view app,
but let's move on to the last step.
The third step was to deploy this app to Google Cloud.
First, let's create a project in Google Cloud for our app.
I'll go to console dot Cloud dot, Google dot com.
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 charges when our app is actively creating
a response to a user's HP request.
What does that mean?
Well, in this chart are containers listening for incoming instant type
requests for the entirety of the dark gray bar at the top.
The blue bars are requests.
The green bars shows what we're 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 those gaps.
In other words, if our app gets 1000 requests
per day and each request takes one second to process, we will only be charged
for 1000 seconds of CPU time that day,
not 24 hours of CPU time.
We may even be charged less than that actually,
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's also a free tier for memory usage.
You can find all the details about the free tier and the cost.
If you go above the free tier here on cloud runs pricing page.
In practice, this free tier means that none of my development
or testing projects have cost me anything.
It's only when I got serious production level traffic
that I've actually had to pay for cloud run.
Having said that, for the rest of the steps
in this guide to work, you need to create a billing account
here.
This is your first Google Cloud project.
You get a $300 credit,
all right, now.
Let's get ready to deploy the View and Node apps to Cloud run.
That's done with the G Cloud command line tool.
And here are the installation instructions.
I'm installed that tool on my machine already,
so I will first authenticate with G cloud all log in.
This will give me access to my projects in Google
Cloud.
We see here
that the G Cloud tool tells us that we should set our current project.
That's a good idea.
Looks like we need our project ID.
We can find that here at the project Home
page on console or the cloud at Google dot com.
Let's copy that
and then we'll use the G Cloud tool
to set our current project.
All right.
Let's deploy our app to Cloud run.
I'll enter G-Cloud, run, deploy.
And what I would like the club run servers to be called.
I can have multiple cloud run services in my project.
The G Cloud tool will ask me where their source code is.
It's in the current directory so I will hit enter.
Then it says that
some APIs will need to be enabled to help with security.
Google requires us to turn on each API we want to use in our project.
I will turn on those API and 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'll be slightly faster for users close to the location I pick here.
US Central one sounds good to me, so I'll enter 30.
Now it asks me about unauthenticated invocations of my app.
Do I want my application to be reachable by anonymous users on the public internet?
I do.
So I hit Y again,
and now it's building and deploying my app.
This will take a few minutes, so I'll refill my cup of tea
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 is our view up.
It's now on the public internet ready for anyone to use.
Let's also make sure that the server side API works.
I'll enter slash API slash pirate slash
one after the base URL
and there is the Pirates record.
Both the client side view app and the server side
API work from the cloud.
We have created a few app, created a server side node.js app
and deploy them to Google Cloud for all the world to enjoy.
Now there are a few more things
you'd need to make a good web app that's ready for actual customers.
Your domain name, a database
and user authentication.
Let's start with the domain name.
The URL the cloud run generator for us is fine for development and testing,
but we probably want to use our own domain name
before we send real users to our app.
Let's go back to console
dot cloud at Google dot com and our project
and click the hamburger menu and scroll down to Serverless
Cloud Run.
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 many other useful things.
But we want integrations.
I'll add an integration and custom domains.
Here, I'll enter
my domain name that I bought previously
enabled some APIs.
This will set up a load balancer that points to my cloud run service.
You will also create a certificate
so people can use a setpiece when accessing my domain.
When the APIs have been enabled, I'll click this submit button.
After a few minutes it will show me the DNS changes
that I will need to make with my DNS hosting provider.
I did all this for my domain and this is what it looks like
when it's done.
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.
Cloud sequel is a popular choice.
You can turn that on in your project like this.
But there are other SQL choices as well.
If you like no sequel document databases,
you may want to use Firestar instead.
By the way, I love Firestorm because it's completely serverless.
So it has no fixed monthly cost and it comes with a free tier.
Also, it has a client side API,
so clients can access the database directly without any server side code.
If you wish to set it up that way.
Finally,
many web applications need to authenticate the users.
Let's talk about that.
It takes a lot of work to build log
in functionality yourself and is kind of dangerous too.
You might leave a security hole open.
I know I've done that in the past for some of my hobby applications.
That's why 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 specifically
for your app with their 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 view Up 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 time on server maintenance, networking, scalability, and so on.
Google knows how to run production web apps and can take care of 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 serve thousands or millions of users
because it runs on Google 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
and I can't wait to see what you build.
Until next time.