Great intro to Flask -- building a website with Python

Great intro to Flask -- building a website with Python
Photo by Raghav Bhasin / Unsplash

Wanted to share back a recent mini project I did, which built upon some new learning content in conjunction with several other technologies I've been using.

In short, I built a simple translator website. Though the course of building it I was able to rapidly gain some new experiences in web development, while reinforcing some existing experience in applying cognitive services.

a screenshot from the web app

I was surprised how quickly and smoothly things came together, despite covering a lot of ground, including some of my own chosen topics to explore.

How this hit my radar

First, I do a lot on Microsoft Learn. I recently got a notification about a new Build real world applications with Python learning path. I decided to peek at the modules to see if it interested me.

The third module is the one that was the most fun for me:

Build an AI web app by using Python and Flask - Training
Use Python, Flask, and Azure Cognitive Services to build a web app that incorporates AI

The module came together pretty quickly for me, despite having some Netflix on while I went through it.

Taking it further

The module is great, but I also used it as an excuse to learn/reinforce some other things:

  • Leverage Codespaces for the dev environment
  • Deploy the Flask app to Azure App Service
  • Secret management
  • Modify the app and validate the build/deployment
  • Adding some additional features to the app

I like to try to incorporate other things that I want to skill on as part of simple exercises, which gives me a chance to think a bit more critically about the lab/scenario. The authors of this content (appropriately) limit the scope, which is a good chance to add some of my own what-if’s.

In this case, what if I wanted to deploy this as a public app, not just run it on my local machine?

A while back I had posted about Codespaces, which I used here (there was a Flask template for Codepaces). This was an easy pick for Azure App Service as I didn’t have to muck around with any server setup in order to deploy the app, though I did spend some time researching different methods for secret management (not just the concepts, but how/where to specifically do the work).

How did I get here?

I often talk with people about little things I’m trying out with technology, which are often met with pauses and curiosity how seemingly random the path was that led me to it. Usually I’m not aware of the specific path, just that things had been on my mind as something to investigate.

In this case, I had a fairly good grasp on why this was something to investigate.

I’d run across this demo app a few weeks ago:

GitHub - Azure-Samples/azure-search-openai-demo: A sample app for the Retrieval-Augmented Generation pattern running in Azure, using Azure Cognitive Search for retrieval and Azure OpenAI large language models to power ChatGPT-style and Q&A experiences.
A sample app for the Retrieval-Augmented Generation pattern running in Azure, using Azure Cognitive Search for retrieval and Azure OpenAI large language models to power ChatGPT-style and Q&A e…

After deploying the demo, I reviewed the contents and the front-end of the demo application used Flask, which I wasn’t particularly familiar with.

Later, when the Microsoft Learn lesson plan notification came through, and I saw Flask in one of the Modules, it was time to add it to my learning list.

Final thoughts

This was a really fun one, and I’ve talked about it with quite a few folks already. I will keep looking for more opportunities like this. Not just to earn XP on Microsoft Learn 😆

Note, something I explicitly did not do was try to work on a slick look/feel of the app. This is something I know I’m capable of, but I chose to focus on other aspects of my learning, which helped me save some time and call it “done”.

If you’re interested in seeing my finished product, check it out here. I don't plan to keep the site up long-term, but at time of posting it works. The code will live on GitHub indefinitely.

GitHub - mathyousee/first-flask: Using for a codespace to do a Python and Flask learning path on MS learn
Using for a codespace to do a Python and Flask learning path on MS learn - GitHub - mathyousee/first-flask: Using for a codespace to do a Python and Flask learning path on MS learn

Last but not least, I didn't know that the translation services in Azure support Klingon, but they do. Apparently Duolingo also offers a Klingon course The world's best way to learn Klingon - Duolingo. Maybe once I complete the Spanish course I'm taking...