字幕表 動画を再生する
Welcome to another working with data and APIs video.
I have one more thing to demonstrate to you.
I mean, the truth of the matter is
there's probably hundred thousands, tens of thousands,
millions of things that I've missed that I should cover
that I could get to that I don't even know about
that I will hear from you.
And so I look forward to hearing all about in the comments
and hopefully returning and making
more videos that continue these projects and this discussion.
But before I go, at least in this first round
of what I'm making right now, I'm gonna show you one thing.
How to deploy your project to a server.
Put it out in the world so that people could access and use it.
There's an inherent problem with me even making this video,
because there's no one way to do this.
I mean, you could build your own server,
get your own internet connection, get an IP address,
create your own web server on a Raspberry Pi
even, put it somewhere out in the forest wirelessly.
Who knows?
Attach it to a space station.
But what I want to look for here at least,
I want to look at least two scenarios
of using a commercial hosting service that
allows you to deploy your node code and have it run somewhere.
And we'll give you a URL so that you can actually
see it in the browser.
And the two services I want to show you are Glitch and Heroku.
Glitch, as it says on their website,
is the friendly community where you'll
find the app of your dreams.
I love Glitch.
It's an amazing code editor in the browser
that you can write node code, client JavaScript.
You can build all sorts of apps.
You can share them.
You can remix them.
It's colorful.
It's friendly.
You can ask for help.
There's so much there in Glitch.
And honestly, I could imagine a version of these tutorials
where I just started with the first day
opening up Glitch and building the project there.
But since I've already built the project,
I'm going to show you how to import it right into glitch
and run it there.
After that, I'm going to show you
another service called Heroku.
It's a cloud platform that lets you deploy web applications.
It has a pretty reasonable free tier that I can get up
and running with easily.
This is not sponsored content.
There are lots of other servers that I've used.
Amazon Web Services, DigitalOcean
are just a couple to name a few.
And I'm happy to come back and show some other ones in a video
as well if that might be something useful.
Or leave in the comments what type of cloud server
you like to deploy your applications on.
There's also this thing called serverless programming.
We'll come back to that another time.
Let's start off here with Glitch.
So here I am logged into my Glitch account.
My Glitch account is actually linked to my GitHub account,
although you don't need to GitHub account
to sign up and start working with Glitch.
I could make a new project, and I could actually
make a blank project.
Hello express.
This would have been a good place for me
to start when I was back in the day I didn't have anything yet
and I could just make a new simple express app
and build on top of that.
But I'm going to do something a little bit different.
I'm going to use this clone from Git Repo.
Since I've already gone through all the motions
of writing my code locally on the computer
and then pushing it to GitHub, I could just
grab it and put it here.
But before I do that, I better make one more change.
There's something that I missed that's rather important.
So in my code, I have hard coded in here the port 3000.
That's the port that I've arbitrarily
choosing to run and test the stuff locally on this computer.
But any type of web hosting platform
is probably going to generate a port automatically.
And there are some standard ports for hosting up a website.
So I actually want to pull that from the environment variable.
And this will be maybe an environment variable
that I don't actually set but that already
comes with the platform.
So not necessarily something that I put in here,
but something that's just going to be present whenever
I'm on that platform itself.
So let me go back to the code, and let
me add a const port equals process dot env dot port.
Now here's the thing.
Now when I run this-- and I'm going to put this port here,
and I'm going to just change the string to starting server at
and then I'm just going to say port.
So this is some changes I made to the code.
OK, so here's the thing.
This now, if I go and try to run this locally.
Boom.
It doesn't have a port number.
Or do I actually have another error?
Oh, that's a different error.
I've got some syntax error.
Let me fix that.
Always getting syntax errors.
Oh, I don't know.
I lost my curly brackets.
I'm not sure what I did here.
There we go.
Yes.
Listen at that port and start the ser-- then
I log, starting the server at that port.
Sorry about that.
Let's try that again.
Starting server at undefined.
So I don't even know how would I possibly-- there's no port.
I can't access the server.
So this is where I could do something nice.
I could say, if there is no port in an environment
variable or 3000.
So now if I run the server again, it's starting at 3000.
I can go back and look at the project running locally
at port 3000.
And here it is.
OK.
But I needed to do this, because I want now
want Glitch to take care of the port for me.
I don't want to be in charge of that.
Now, since I'm going to be getting the code from GitHub
onto Glitch, I need to make sure I take that change
that I just made locally and push it onto GitHub.
So I'm going to add and I'm gonna commit port
from environment variable.
And then I'm gonna say Git push origin master, which
sends it up to GitHub itself.
This is getting a little bit confusing,
so let's make a quick diagram just to understand the pieces.
So I've got my laptop here.
And so I've been writing all the code here,
the server and the client.
Now what I've done is I have now taken all that code,
and I have put it onto GitHub.
And these are now linked.
I can always push, which is sending code this way,
or I can pull, which is sending code this way.
So this is really the thing that I've set up.
But I want to add a third component here.
So that third component, I'm going to add Glitch as one.
I'm also going to show you, I'm also
eventually going to add Heroku.
Now, the difference with Glitch and Heroku
is this is actually a code editor.
So once I get the code from GitHub
and place it onto Glitch, this is
kind of a connection that doesn't need to persist.
And I can just-- it's just there.
I can work on it.
I just want a quick way of getting this stuff on Glitch.
I could have uploaded my files or copy paste
or been working there all along.
But something different will happen
once I put it on Heroku, which I will
keep all of these things sort of linked so I can continue
to do the development here on my laptop
and push those changes through.
So let's come back to Glitch and let's look at-- click
on this button Clone From a Git Repo.
And then I'm going to go over to my repo.
I'm gonna copy the URL.
And I'm going to-- whoop, I'm going
to press that button again, and I'm
going to go over here and paste it in.
So I am grabbing all the code from coding
train slash the weather here.
And I'm gonna hit OK, and I'm gonna wait for a little bit.
And look at that.
Look at this.
Everything is there.
Public check ins, public logs, public index, public sketch,
public style, Git ignore, index, package, ooh,
environment sample.
Aha.
So remember, I need my API key.
So before I even try to run this, what I'm going to do now
is I'm going to hit Rename.
And I'm gonna change this to just dot env.
So now you can see it's got a key there.
Glitch knows.
Glitch really knows that dot env files are secret files.
So if someone chooses to remix this project
or based on it, if I'm sharing this,
no one will be able to see the API key in there.
I'm going to go and I'm going to go back to my code
where I have my dot env file, grab this API key,
paste it in here, hit Save and then
I'm going to click on this Show button.
And so now I can choose to show in a new window or right next
the code.
Let's just look at it right next the code.
There it is.
There's my project.
Now let's click on Show and go in a new window
and look at this.
If you go to coding dash the dash weather dash here
dot glitch dot me, you have the project.
And I can go back here and I can start saying,
hey, let's go to Berlin and check in,
and let's go to London and check in, and let's go
to San Francisco and check in.
Let's view check ins.
And all of those check ins are here.
And in fact, I don't know what this
is going to look like now when you go to it.
I assume I'm going to leave this here as is and lots
of other people will have gone there
and added their check ins.
So we can see all of that, and you'll
see that if you go to that URL right now.
And to be clear, remember, this is a code editor.
So I can start changing stuff.
I can go to this index and HTML page
and I can say the weather is here.
And you can see that immediately updated.
I could change something in the server.
I don't know.
I'm afraid to change things in the server.
But I could start working on the server code.
It's all very, very small here.
I could change that.
And stuff would change that the server would rerun itself
automatically.
So again, I would love to come back and revisit more videos
about how Glitch works itself.
Now that this project is there, I
would encourage you to go to the URL,
it'll be in the video's description,
and click Remix Project.
You don't even have to do any of this stuff,
because once I have it deployed on Glitch,
other people can get the code and make
their own version of it.
So I'll include this as an example
that you can start with.
And I probably shouldn't mention that.
I should have mentioned that earlier.
Oh well.
Let's try one more deployment, just so we can
see how another system works.
So now I'm going to show Heroku.
Heroku has its own CLI, which stands for a Command Line
Interface.
So you can actually do things and deploy projects just
from your terminal application itself.
So you're going to need to first install the Heroku CLI.
I've done that already.
But then you can download and install for Mac OS
and you can download and install for Windows or Ubuntu,
whatever your operating system is.
You'll know that you have the CLI installed
if you can type Heroku into the command line
and see it doesn't say, I don't know what that is.
So one of the things I'm going to do is type in Heroku log in.
So I've already signed up for a Heroku account.
So you'll have to have done that if you're going to follow along
with these instructions.
It's going to ask me to press any key.
It's going to open up the browser.
It's going to ask me to log in.
I'm already logged in.
I've already logged in.
We can go back to the terminal, and we can
see that I've logged in now.
Once I'm logged in in terminal, I need to create a new app.
So I can go to my Heroku dashboard at this URL,
and then I can just click here and say New, Create New App.
So I'm going to create an app called the weather here.
The weather here is available.
I'm going to hit Create App.
And then look at this.
This is so perfect.
It's kind of given me everything I need to do.
I need to do Heroku log in, which I've already done.
I've already created a Git repository,
so I don't need to worry about any of this.
But now I just need to add Heroku as a remote.
So I'm going to go back to terminal here
and I'm gonna say git remote dash v. So this is listing me
the current remotes.
And the only current remote is called origin,
and it's at github.com.
I want to add another remote by copying and pasting
this command right here.
Gonna paste that in.
OK, I've got another remote.
If I say git remote dash v, we can see, aha,
I have the Heroku remote and the origin remote.
What's next?
Now I'm going to say, actually, if I
made any changes of the code, I would need to do git add
and git commit.
But all I need to do is now deploy it
to deploy it to Heroku is say git push Heroku master.
I'm sure I've forgotten something.
Let's see what happens.
It's going to run through a bunch of things.
Building the project.
And it's deployed.
So I can click on this and open it in the browser.
And look, there it is.
Huh.
So it's working.
It's deployed, but I don't see temperature.
If I go to View Check Ins, there's
nothing added to the database.
So something's not working.
It's deployed, but it's not working.
Aha.
Do you remember?
I remember.
So the thing that I missed is, once again, the API key.
So this environment file did not make it to Heroku.
And actually, in this case with Heroku,
I don't need a dot env file.
I don't actually even need that NPM package dot env,
because the Heroku command line interface lets me set
environment variables directly.
So I can go back to the terminal and I can type Heroku config.
And Heroku config is going to show me, ah,
all of my environment variables, of which there are none.
So I can now say Heroku config colon set
API underscore key equals, go back to my code,
grab this, paste that in, hit Enter.
It's setting the API key and even restarting the app for me.
So nice of it to do that for me.
Let's just check Heroku config again.
You can see that's my environment variable.
It's not found anywhere other than here.
It's saved secretly.
And I can hit Refresh.
And there we go.
Now I've got the temperature.
Once again, I can go to Mountain View.
I can hit Refresh to check in.
I can go to San Francisco.
I can check in again.
Ooh, I can go to Sao Paolo.
I can check in again.
I can view all my check ins.
And there they are.
Everything is here and the app is working.
I kind of can't believe this actually worked.
And in many ways, I'm done with the series and I'm not done.
That's the thing I already discussed.
But there is some important stuff I need to talk about.
Number one, where's the database again?
Look at these three check ins here.
And I'm at the-weather-here.herokuapp.com.
Let me now go to codingtrain the weather here.glitch.me.
And let's look at those check ins.
One, two, three, four.
There's like seven of them.
Over here on the Heroku one, there's four of them.
They're not sharing a database.
This is very important.
Remember, the server is the holder of the database.
So you wouldn't want to deploy this to multiple places.
I'm just kind of showing you how that works.
But that database is something that
is created from the server side itself.
And it's different than I could be running this local here.
I'm not running the server right now.
But I could still say node index dot js.
And I've got whatever data I happen to have here locally.
So I could take that database dot db file and pass it around,
but that's not what I'm doing here.
So ultimately, once-- what I think of
is I would have a sort of local database for testing purposes.
And once I've deployed it, that database will persist forever.
Of course, I might want to wipe it for whatever reason.
And again, I'm just sort of tinkering around here.
But where the database lives, where the app lives,
is quite important.
There's also the question, if I wanted
to continue to work on this if I'm on Glitch,
Glitch is a whole code editor itself.
So I can kind of continue and play and work there.
But if I wanted to make a change on Heroku, how would I do that?
So to do that, I've got to now go through multiple steps.
I first would come here to my local code.
And just to make the simplest change possible,
I'm just going to change and say the weather is here.
Just as the header.
Then I would have to go back to my terminal.
I've got to commit that.
Making a change to demonstrate deploy to Heroku.
I'm going to make that change.
And then I'm going to say git push Heroku master.
And this will now automatically rebuild and restart the app.
Heroku knows to do that automatically
when you try to send it revised code.
But it only can [INAUDIBLE] revised code
if it's been committed to Git.
I can go back to the browser.
I'm on Heroku.
I can click on Check In.
And you can see, aha, is is there now.
I've added is.
Now, interestingly enough, if I go here onto GitHub
and I go into public index dot HTML,
it still just says the weather here.
Let's return to this simple diagram for a second
to think about this.
So I'm working on the code.
This is my local dev environment.
Then I can push my code up to GitHub
really just as a way of backing it up or releasing
it open source or collaborating with other people who might
want to work on it as well.
I can pull changes from GitHub if other people are sharing
and implementing things.
But that's kind of beyond the scope of what I'm doing here.
But now I've added Heroku.
So what's important to realize, unlike with Glitch
when I kind of from Glitch grabbed the code from GitHub,
I'm actually also pushing the code here to Heroku.
So this is where I'm working on it.
When I push it to Heroku, it rebuilds the server.
So this is important.
That's a deployment thing.
So as I'm developing it, I might just
test it locally, push to GitHub to publish the code,
and then when I'm ready actually push it to Heroku.
And I can have a development server and a deployment server,
and I can kind of go grab a lot of rabbit holes
there to have a much more complex workflow.
But it's important to realize that GitHub and Heroku are
never talking to each other themselves.
I am just working on my code here, sending it to GitHub,
sending it to Heroku.
So to finish this off, I'm going to say git push origin master.
And that's sending it to GitHub.
And if I go here, we can see that it now
has the weather is here also.
Everything is in sync, and I have
my project deployed to the weather
here dot Heroku dot app.
And I'll remind you that if you want to go here,
you can-- a base project for the git cloning.
So I gotta clean this up and edit this description.
But you can go here to this particular URL.
And this is where now you can also find the project,
remix it, take a look at the code,
and have it already running online in the browser itself
just through Glitch.
Thank you so much for watching this whole course.
Did you really watch the whole course?
If so, I'm quite amazed.
I mean, maybe this isn't the end.
Maybe in the future, there will actually
be some videos that follow this.
But right now, this is where I'm finishing up.
By watching this course, you've hopefully added something new
to your toolbox.
Even just from the client side, you've
learned how to work with the fetch wipe API,
loading a CSV file, graphing it.
Hopefully you've also learned something
about how the basics of JavaScript,
knowing how JavaScript objects works,
leads you to understand how JSON data, data
in JSON, format JavaScript Object Notation, works.
And you can make a call to an external API,
get information, and use that information,
repurpose it in a web page itself.
Then more importantly, hopefully now you've
realized that server side programming is something
that you can add to your toolbox.
You can use it to save data to a database.
You can use it to hide API keys.
There is so much more that you can
do with server side programming in terms
of being able to have multiple applications communicate
to each other across the network.
So I hope this is just the beginning for you.
Let me know what kind of questions
you have in the comments.
If you make a project, if you've made one
and you've deployed it, go to thecodingtrain.com
where I'll have a page that you can share URLs to projects
that you've made and deployed.
And in particular, if you found a web service, a web
hosting service, that you like to deploy your project,
I would love to hear about it as well.
So thanks so much for watching.
Hope you enjoyed this whole set of videos,
and I'll see you in future Coding Train stuff.
Goodbye.
[BLOWS WHISTLE]
[MUSIC PLAYING]