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