Creating a website with Flask

This is the third and final post for the Chicago Python (ChiPy) Mentorship Prorgam, if you’re in Chicago you should check it out:

Our objective

Deploy a TensorFlow model so people can send the model data and get predictions back.

Where we are

In the last blog post, I showed you how to put together an API using Flask so people can use our model. We also put together a simple website to let users interact with the API using a form. In this blog post, I’ll go into more detail about the website and adding an SSL certificate.

My site is now live. You can see the final product here:

Purpose of my website

My goal is to keep it simple: provide my contact info, demo projects, and link out to my Github, LinkedIn, and publications. Now that the foundation has been built, I can easily add to my web portfolio. Let’s take a closer look at what’s under the hood.

Templating with Jinja2

On most websites, you’ll see some common elements on every page. It would be a lot of work to update every single page after you change a common element, and it would leave more opportunity for errors. Templates are a way to keep everything consolidated and save you time.

For example, my site has the same structure and navigation bar on each page. Instead of rewriting HTML on every page, I used Jinja2 templating. The format looks something like this:

Jinja2 uses the format {% something %}. In this case, we specify a new block named “content”. To use this base template on another page, we can do the following:

We first extend on our base template, and then fill in the block named “content”. In this case I add a button to download my CV, along with some contact info.

Jinja2 has more advanced features as well. Remember the form to use our API? At first, I hard coded each outcome in HTML. That was okay when we only had a couple outcome measures, but our final model will have dozens of outcomes in the end. We can use Jinja2 to dynamically generate our form in HTML:

As you can see, Jinja2 can harness the power of Python, including control structures like for loops and if statements. Now all I have to do is add an outcome to my outcomes class, and it will automatically be included in our form. To show the final piece of the puzzle, we needed to pass in some variables when we render our template in our main app file:

WTForms!?

WTForms is a great tool to create forms in Flask. It comes with built in validation and security. See the following docs for more info:

Here’s an excerpt of our outcomes form using WTForms:

It’s that easy. In our previous code, Jinja2 loops through each field in our form and adds it to the page. And because we are using WTForms, validation is already included.

Adding an SSL Certificate

Why get an SSL certificate? An SSL certificate provides encryption and authentication. It lets users know that you not an impostor trying to steal their information, and it also gives you cool green padlock next to your site.

Before I go into more detail about SSL certificates, I want to take this opportunity to make sure other students know about the Github Student Developer Pack. It’s free as a student and gives a you a bunch of perks — like getting a free SSL certificate for a year. Every time my mentor would tell me about a cool tool I should check out, I’d find that I already premium access through my Student Developer Pack.

I obtained my certificate through Namecheap and Comodo. After purchasing the certificate, I needed to demonstrate that I actually owned my domain name with Comodo. You can do this in a few different ways, I chose a DNS based verification. Comodo provided me with a CNAME, and I added it to my domain to demonstrate that I owned it. It took 12 hours or so to receive the actual certificate after I added the CNAME. Next, I followed this Namecheap tutorial below to install the certificate on my server with Apache2:

After following the tutorial, we can see that the certificate is installed!

Wrapping up

I want to end this series by giving a HUGE thank you to my mentor Will, along with everyone who helped organize the ChiPy Mentorship Program and other ChiPy events. The entire ChiPy community has been so welcoming and helpful throughout this experience. The meetings have really cool talks, and the project nights are a blast! I’ve learned more than I ever thought over the course of this program, and I would highly recommend anyone who is interested in Python to attend a meeting and/or apply for the mentorship program. It’s for all skill levels, so don’t be afraid to try it out!