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]
