How I made my CLI script to a website using Flask

Context

So, I was building my starting portfolio. I wanted to show my beginner Python skills but I only had a Twitter bot and some CLI scripts. In my portfolio, I showed my source codes but I wanted a live preview. Something someone could see live.

How do I show a live preview of my CLI scripts?

Answer: make them into a website!

And here is the beginning of my journey into Flask and Render.com.

CLI script

There once was a script that prints the weather of the location that you want. (On the tone of Wellerman ahah!)

So, I had a script and I wanted to make it alive. 🧟 I search in my mind and I thought of Flask, yeah!

Starting Flask journey

What is Flask?

First, what exactly is Flask? Well, like Django (maybe you know this better), it's a Web Framework written in Python. But it's smaller than its brother and also build for smaller projects. Although... 🧐

Installing Flask

Installing Flask is pretty easy, just some pip command. Here it is:

pip install flask

Virtual environment

It's not mandatory but it's a good habit to take: create a virtual environment for each project. So you don't mess with dependencies from a project to another, you can maintain multiple Python versions on a single system, etc.

$ mkdir weather
$ cd weather
$ virtualenv -p python3 venv

Activate the environment

Once the environment is created, you have to activated it ("enter inside it", if you want). You do that like that (assuming you are in the weather directory):

source venv/bin/activate

A CLI script to a Flask app

I read the doc and I understood that my website would look like something like that:

from flask import Flask, render_template, request
# To import Flask itself, to make it beautiful and 
# to interact with forms


app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
# To interact with forms and their methods

def index():
    return "<p>Hello, World!</p>"


if __name__ == '__main__':
    app.run()

I assume my CLI script would go into the function home and I was right. I learned more about render template so my return statement looks like that:

return render_template('index.html', city_name=city_name, days=days, daily=daily)

I used the POST and GET method to separate the using of my form.

Final code

You can find my final app.py file here: gitlab.com

Starting Render journey

I had my code running perfectly on my local computer. And I searched how to host it on the internet. DuckDuckGo (my friend) shows me Heroku firstly. But, maybe you already know it, it's not free anymore... So I searched again and bim, render.com

Prerequisites

Firstly, I know you're a good dev' and that you already had your code on gitlab or github, right? Else, create a repository and commit your code.

Secondly, create a free account on render.com.

Create your Web Service

First, clic the New + button and choose Web Service.

Next, connect either your GitHub repository or GitLab repository.

On the next screen, enter your informations:

1. Name: ie. weather.boreux.dev
2. Region: choose the one that fits you the most. For me, as I live in Belgium, I chose Frankfurt (EU Central)
3. Branch: the branch of your repository you wish to deploy, ie. main
4. Root Directory: I left it empty, as my root directory to deploy is my repository root directory
5. Runtime: Python 3
6. Build Command: enter pip install -r requirements.txt
7. Start Command: this is the command that will start our Web Service, ie. gunicorn app:app
8. (Click Advanced if, like me, you have to enter some Environment Variables, such as an API key).

A little note about the KEY environment variable.

I enter my KEY var with my API KEY that I find in api.openweathermap.org.

In my Flask app, I get my API key with :

import os


key = os.getenv('KEY')

Deploy to Render

Here is my project architecture :

weather/
|_ .git/
|_ .gitignore
|_ static/
    |_ img/
        |_ covers/ # my background covers
|_ templates/
    |_ index.html
|_ app.py
|_ requirements.txt

The requirements.txt is obtained with:

pip freeze > requirements.txt

With my project and its environment variable, I just have to deploy it on Render. You can do that, after completing all the informations, by clicking the Create Web Service button at the bottom of the page.

Here is the result

And here is the result:

You can find the code of this project, under MIT Licence, here : gitlab.com/tt-bb