Serving static web pages

In this homework, you'll go through all the necessaries to host static (unchanging, non-Python-fueled) Web pages on a Flask instance running on the cpsc server, and making them accessible on any browser anywhere in the world. There are two parts to this: (1) setting up all the administrative gobbledy-gook, and (2) writing two HTML pages.

Step 1 (of 2): Getting a Flask app running

First, create a minimal Flask app and access it over the Internet.

Log on to the cpsc server, and create a directory called "hw5". In it, create a Python virtual environment as described in the first section of the Flask cheat sheet, namely:
```
$ python -m venv venv
$ source venv/bin/activate
$ pip install flask
```
Make sure that each time you log in to your Google Cloud instance afresh and attempt to run your app, you first cd to the proper directory and "source venv/bin/activate" to activate your virtual environment. You might want to make an alias for this, by including something like the following in your .bash_profile file (create such a file if there's not already one in your home directory):
```
    alias hw5="cd ~/hw5 && pwd && source venv/bin/activate && export FLASK_APP=hw5app"
```
(Now either log off and log back in, or source your .bash_profile with the command ". ~/.bash_profile", and then make sure you can type "hw5" to get to your new directory.)
Now, in your hw5 directory, create the standard three required Flask files:

__init__.py:

from flask import Flask
hw5app = Flask(__name__)
from hw5 import routes

hw5app.py:
```
from hw5 import hw5app
```

routes.py:

from hw5 import hw5app

@hw5app.route("/")
def does_this_work():
    return "<HTML><BODY><H1>YES IT WORKS!!</H1></BODY></HTML>"

Now, open a second window to the server, on the right-hand-side of your screen. On its command line, type "hw5" to go to the right place, and then run:
```
$ export FLASK_APP=hw5app
$ flask run -h 0.0.0.0 -p yourPortNumber
```
where "yourPortNumber" is the first of the two special numbers assigned to you on this page.
Finally, in your browser, go to the url "http://cpsc.umw.edu:yourPortNumber" and make sure you see a YES IT WORKS!! message.

At this point you should celebrate and stretch your legs before you come back for more.

An important note about keeping your website up

If you run flask (or any other program) from the command line, the program will terminate when you exit the window. You will of course want your website up and running for others (like me) to connect to even when you're not logged in. To do that, you'll add two things to your command: (1) the word "nohup" (an abbreviation for "no hangup") at the very beginning, and (2) an ampersand (&) at the very end. Your entire command will therefore be:

$ nohup flask run -h 0.0.0.0 -p yourPortNumber &

This will run your program "in the background" and it will stay running when you log out. The output — which hitherto has been appearing in your terminal window — will now be put in the file nohup.out instead. (You may vim it to see its contents, if and when you're interested.)

Question: now how do you stop the program, when you change the code and want to restart it? Answer: you have to find the program's "PID" (process ID) and "kill" it. To find the PID, search the active process list for processes having "flask" in the name, like this:

$ ps -ef | grep yourPortNumber

The output will look something like:

stephen+   21305       1  0 17:11 ?        00:00:00 /usr/bin/python3 /home/stephenclarkdavies/.local/bin/flask run -h 0.0.0.0 -p 5150
stephen+   21423   21405  0 17:12 pts/0    00:00:00 grep --color=auto flask

That second entry is just the grep command itself; ignore that. The entry with python3 is what you want. The PID of that process is the first number on the line: in my case, 21305. To stop my flask server, therefore, I type:

$ kill 21305

Run your ps command again and verify that the flask process no longer appears in the list. (If by chance this didn't work, use a heavier hammer by adding a -9 argument and running the kill command again: "kill -9 21305".)

You can now make whatever code changes you wish, and restart flask, either with the nohup version or the regular version, depending on what you're doing.

Step 2 (of 2): Creating two web pages

Create a static directory in the appropriate place in the Flask hierarchy, and in it create two files, using vim:

filbert.html, a Web page which, when rendered, should look as close as possible to this PDF file in most major details (except for the name "Jezebel"; see below.) Scroll down to see all the content in this PDF. Everything should be laid out basically the way the PDF file shows it, and the hyperlinks need to be "real." The second hyperlink (which says "reed baskets") should point to https://www.basketweaving.com/uncategorized/dyed-reed/. The headings ("Filbert's home page," "Welcome," etc.) should be HTML headings, not simply font increases or bold face applications. The numbered/lettered list should be a bona fide HTML numbered/lettered list, not merely hand-annotated. The title of the page, which should appear in the browser's title bar, should be "Filbert's World."

(The graphics for the page can be found here and here.)

The only part of the page that should look different for you is the word Jezebel (near the bottom), which you should replace with your own name. The URL for this hyperlinked text should go to the second page, below.

The URL you should be able to point your browser to in order to access the Filbert page is: http://cpsc.umw.edu:yourPortNumber/static/filbert.html.
yourname.html, (with "yourname" replaced by your real first name, of course) which contains a simple (or complex; heck, go for it) Web page about you. You can include anything you want on this page — it doesn't have to be Michaelangelo, but you should at least take the effort to make it moderately interesting. The only thing I mandate about this page is that you include the text "Also check out the home page of my good friend Filbert!" somewhere near the bottom of the page. Clicking on this link, of course, should take the user to your re-creation of the Filbert page, above.

The URL you should be able to point your browser to in order to access your personal page is: http://cpsc.umw.edu:yourPortNumber/static/yourname.html.

Turning it in

Send me an email with subject line "CPSC/DATA 350 Assignment #5 turn-in". In the body of the email, simply paste the link to your Filbert page. (From it, I will be able to click on your name at the bottom to get to your page.)

Getting help

Come to office hours, or send me email with subject line "CPSC/DATA 350 Assignment #5 help!!"