Lab 8: Introduction to Web Applications
Lab 8: Introduction to Web Applications
Part 3: Getting Started with Heroku
Part 3: Getting Started with Heroku
If you find typos or problems with the lab instructions, please let us know.
Remember the Disclaimer from part 2 about "local host"? We'll be learning how to put your web app online using Heroku. Here's the outline:
Create a free Heroku account
Clone a repo with a basic flask app
Run it locally first
Use the Heroku toolbelt to get it set up online
Please visit heroku.com and signup for a free account. You just have to provide your name and email, nothing more. You can leave “company name” blank.
It's probably a good idea to sign up with your ucsd.edu email, because companies such as Heroku sometimes give discounts for folks at .edu addresses, but its up to you.
Open this link, which will take you to a very simple flask example. Once there, click the "Fork" button at the top of the Repl.it page, which will create a new Repl.it project for you with the same code. We're going to try and put this simple flask app online in Step 4.
You should be able to run the app by typing python hello.py in the terminal
Check out the mini Repl.it browser window, does it look like it's working correctly? (You should see 'Hello Vincent')
Make sure that works. If so, you are ready to try running it on Heroku.
Now we'll be setting up Heroku on Repl.it.
First, we'll be downloading the Heroku CLI (command line interface), which will allow us to run heroku commands from our terminal. Normally, if you were coding locally on your computer, you could simply download the Heroku CLI from their website. However, there's no way for us to do this on Repl.it. We have to use a workaround -- first, we'll do the workaround, and once it's finished, we'll explain how it worked:
You will want to install the Heroku CLI by running npm install heroku in the terminal (something should look like it's downloading in the terminal, and it might take a few minutes), and then alias heroku='node_modules/heroku/bin/run' in the terminal
Test that you downloaded it correctly by running heroku --version (if you see (node:38) [ENOENT] Error: spawn heroku ENOENT , ignore that error). You should see this output: heroku/7.42.6 linux-x64 node-v10.21.0
We used npm, a package manager -- aka you can use it to download tons of different packages that other people wrote, as a work around to download the Heroku CLI. Normally, you shouldn't use npm for python since it's a package manager for a different programming language, but again, it's a work around for Repl.it. alias heroku='node_modules/heroku/bin/run' simply makes an alias to the heroku 'run' command, so that instead of typing node_modules/heroku/bin/run each time you wanted to run a Heroku command, you can just type heroku. However, you'll have to write alias heroku='node_modules/heroku/bin/run' in the terminal each time you reopen or reload your Repl.it project.
Once you've ensured that the Heroku CLI is downloaded correctly, you should be able to type the command heroku login -i in the terminal and enter your heroku login credentials. Try that now. If you run into issues, ask a mentor for help.
Now, in the terminal, type this command:
heroku create
This automatically creates a new Heroku Application and creates a new git remote to access that application (this will be explained a little more in step 6).
A random name consisting of two words followed by a 4-digit number will be generated. Here's an example of what the command and the command's results should look like (the name is pure-peak-4027 in the example):
> heroku create
Creating app... done, ⬢ mighty-island-86260
https://mighty-island-86260.herokuapp.com/ | https://git.heroku.com/mighty-island-86260.git
Now you can deploy your code by doing:
git push heroku master
This is similar to, but different from when we do git push origin master
When we type git push heroku master we are pushing our code to heroku
On heroku, it will be run on a cloud-based web server.
When we type git push origin master, we are pushing our code to github
On github, it is just sitting there, being stored so we have a record of our code changes over time.
After you press “enter” on the git push heroku master command, you’ll see a LOT of output and may take around 6 minutes. This is the log of heroku doing everything necessary to put your application on the web. You might get errors, and if so, you’ll need to figure out what’s wrong. But, you will likely get some “warnings” that can be safely ignored (e.g. stuff about upgrading pip, etc.).
Near the end of the output, what you hope to see is something such as this:
remote: -----> Compressing...
remote: Done: 47.9M
remote: -----> Launching...
remote: Released v3
remote: https://mighty-island-86260.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/mighty-island-86260.git
* [new branch] master -> master
Once we push, we can visit our application by going to the URL for it. For example, if our application is mighty-island-86260, the URL would be https://mighty-island-86260.herokuapp.com/ .
You’ll find the URL in the output above, in the part that reads:
remote: https://mighty-island-86260.herokuapp.com/ deployed to Heroku
So, visit that URL and see if the web app is there.
Congrats! You've just uploaded a web app to the internet! Next, we'll learn to convert a Flask app you've already developed that does not yet use Heroku into one that does use Heroku.