Welcome back.
We have our flask application.
That saves user contact information to a CSV file.
And this is all great.
It's working really, really nicely.
Right?
We have a beautiful website.
We even have contact forms.
But there's a problem here.
You see, we're running the browser as well as the server on the same computer.
But this isn't real life, because if I give this URL to a friend, they're not going to be able to
see it because this.
Address points to local host.
It's saying local host.
Like this.
It's the same thing by local host simply means your computer.
So it's not like anybody else but us can access our app.
That's not very fun, is it?
Ideally, we can create this app so we can send it to all our friends, our family members, and possibly
future employers.
So how can we do this?
In this video, I'm going to show you a really fun, easy way to deploy your application or your website
online.
We're going to use something called Python anywhere and Python anywhere is going to allow us to host
our files.
That is all the files that we have here onto a server that they give us for free.
So this is completely free.
All you have to do is simply log in.
And you can click on Sign Up.
You can see that they have a different pricing plan so you can actually pay for their service.
But for a beginner plan where you can create one web application, we can do that for free.
So let's create a beginner account and create your username and password.
Agree to the terms.
Sure, I've read everything.
Oh.
Somebody else took my username.
How dare they?
Let's go with Andre.
And so again, create your own account.
And there we go.
We have our dashboard.
Now, the way Python anywhere works is that we need to load up the files on a machine.
Kind of like how we have our files over here on our computer.
We need to somehow upload them to Python anywhere as computers.
Now, the way we can do that is using GitHub.
So I'm going to open up my GitHub account.
I'm going to click on new repositories.
And I'm going to create my project here.
So let's just call it.
Portfolio because it sounds kind of cool and all the trendy names are short like this.
So this is my portfolio project.
I'm going to keep it public and then initialize with a re me and then create repository.
Now from here I'm going to clone.
This repository.
If you have SSH set up, you can copy the ssh.
Otherwise use https which might ask you for your github password when you clone.
So all I have to do now is to open up a new terminal.
Let's make this a little bit bigger.
And say get clone and then copy and paste the URL so that a clones are project.
Now from here if I open this.
We have our web server and then our portfolio, which is our GitHub account.
So we can just copy the files here.
Now the ones that we actually need is we need the database CSP, because these are going to be the files
that we want to upload to Python anywhere.
So for now, let's just select the CSV, file the server py the static folder, the templates folder.
Because those are all the files that run our Flask app.
Now, if I copy and paste this in here.
You might be asking yourself, what about what about the other files?
Well, there's a neat trick here because these files over here were created because of our virtual environment.
Right.
We have things like flask installed.
We have libraries like Python 3.7.
We have our pie cache folder.
Essentially, these folders created the virtual environment for us.
However, there's an interesting trick here that we can do.
We can run a command called Pip Freeze.
And remember, you might have to do PIP three based on what type of installation you have of Python
on your machine.
But if you do, pip frees with this little arrow and then requirements dot text.
Notice what happens as that requirements text gets added to my project.
Watch this.
Do you see that?
I get it.
Requirements dot text and this requirements text.
If we click on it, we see here that we have the requirements for our app to work.
And the cool thing about this is that the flask and then the gingiva for our templating, which we actually
include in our libraries here, can now be used with the requirements text to not necessarily upload
them to GitHub, but instead use this file as a way for us to install on any future machines, any of
these dependencies.
I'll show you what I mean.
For example, what we could do is upload all of these files to Python anywhere, right?
But that's a lot of files and a lot of work.
Instead, we only upload the critical files that we wrote plus the requirements dot text and automatically
Python anywhere is going to be able to install Flask and the Jinja and all the other requirements by
looking at the requirements text.
So for now, let's go back to our desktop and copy the requirements text as well.
Into our portfolio page.
So we now have all the files that we need for GitHub.
If we go back, we can simply go into our portfolio folder.
And then simply say, get add everything, then get commit and give it some sort of a message.
My portfolio website.
There we go.
And then finally get Push Origin Master.
And just like that, if I go back to GitHub.
And I refresh.
Look at that.
I have all my files for my portfolio project.
So using GitHub we can now upload really, really easily to our Python anywhere dashboard.
The way we're going to do this is to actually now clone this repo with all these files.
And we'll use HTTPS.
Let's copy this and then go to our dashboard.
Now in here in the console, we can hit bash so this will open up the terminal where our computer that
is hosted by Python anywhere exists.
Let's make this a little bit bigger.
And here I can say get clone.
And clone this repo.
There we go.
And now if we do less and remember, this is a Linux machine.
So Linux commands like LLS is going to work.
So we see that we have the text and the portfolio.
So let's go into portfolio.
And we see here that we have look at that all our files on our machine.
Now, the cool thing is that if I go back to the dashboard and I go into my files.
You see here that in the directories I have a portfolio project, which is my files that we've created.
How cool is that?
So I now have all the files necessary for me to run the app.
But how can we run an app?
Well, we have a web app tab.
So remember, with the free tier, we get access to one free web app.
So let's open up the Web tab and add a new Web app.
So unfortunately, with the free tier, you can have custom domain names.
That is a way for you to say Andre Nagoya dot com or whatever websites you want.
Instead they're going to generate one for you, but that's something that you can look into on your
own if you want to pay for it.
But for now, let's just use the free tier so we can select the Python framework that we want to use.
And I'm actually going to do manual configuration.
We can pick whatever Python version we want.
Let's do 3.6 for now because that's what we've been using.
And then finally click next.
There we go.
We have our Python project at this URL address.
But if I click on this.
All right, I get a hello world.
It's working.
But this isn't our portfolio, so how can we make that work?
There's a few things that we need to set up.
First, I'm going to link you to this tutorial on showing you how to set it up in case you have any
problems.
But let's go step by step.
First, what we need to do is scroll down.
And enter the source code.
So that is where is the code that we're looking for?
If you remember.
Let's go over here to files.
We have our portfolio folder.
So what we want to do in the web is to say that we want port pho in here.
And it's going to automatically create that link for us.
So that's where our source code, our server code exists.
Now, if we go back here, we've gotten our code onto Python anywhere, and then we have to set up our
virtual environment.
So we have to open up our console.
Let's make this a little bit bigger and then just run these commands.
So in our case, because we're using Python 3.6, we're just going to copy this.
Go to our.
Dashboard into the batch once again.
So that is the computer that we're going to serve our files from.
And then copy and paste to create a virtual environment called my virtual EMF.
And while that's installing.
Their next task is to install Flask.
So once again, we'll copy this.
So let's run pip install flask.
And you'll notice here as flask is being installed.
That we're now in a virtual environment.
See here how it says my virtual EMF, which was what we told it to name our virtual environment.
And then the next step is to run this command.
Well, actually, this command won't do anything because this command to work on simply takes us to
our virtual environment, which we already have created.
This is for next time.
Whenever you, let's say, go back and open up the console to make sure that you always working in our
virtual environment.
Now in here, if I look at the files.
I have my portfolio project.
But I can also run using the requirements text that we have in case we have a lot of dependencies.
We can actually run this command so that it reads our requirements.
Text.
To install any dependencies.
Oh.
Couldn't open up the file because we have to seed into our portfolio first and then run this command.
In our case, we don't have that many requirements and everything is set since we installed FLASK.
But this is how we can use the requirements to text to install all our dependencies.
Awesome.
So going back to the tutorial, we see that we've set up our virtual environment and we need to go to
our web tab to set up our virtual environment so that knows where the Web tab to look for this environment.
So going back, we can now go to our web.
And I know this is confusing.
This is what happens when you do configuration on a website.
It's one of those things that you just have to learn or follow documentation.
In here in the virtual EMF.
We will simply, as they ask.
Add the name of our virtual environment, which is my virtual.
So again, we'll copy this and automatically it gives us the link.
Now, finally, if we reload.
Our application will take a few seconds, but when it's done and I click.
I get the hello world.
Hmm.
Something is still not right.
Because we want to our server.
To be running.
Right.
So it serves us the index html.
This video is getting long, so let's take a break and see you in the next video.