Build A Live Web Application In Minutes — Using Python, Flask, and Azure Web Apps (Part 1)
Introduction
A long, long time ago — dinosaurs freely roamed the Earth, and people actually had to put significant thought into making web sites and web applications accessible to the rest of the world. I’m no history buff, but my, how things have changed.
Today, with the help of the deservedly hyped cloud services like those provided by Microsoft Azure, we really don’t have to think for ourselves anymore. I know, I know, what a relief right? Whew.
Cloud services have made creating web sites/web applications that can be accessed by literally millions of simultaneous users terrifyingly easy. Don’t believe me? Fine. I’ll prove it by showing you how to use Microsoft Azure’s Web Apps to quickly build and deploy a Flask (Python) web application that can be accessed by anyone with an internet connection.
Article Structure
- Prerequisites
- Azure Web App Setup (Part 1)
- Customizing Your New Flask Web Application (Part 2)
- Local Development (Part 3)
Prerequisites
An explanation of the following are out of scope for this article:
- Cloud/Cloud Services
- Azure
- Python
- Flask
A brief understanding of these will be sufficient for making sense of the steps we’re about to go through. That being said, you can find plenty of good reads about each of these via your favorite search engine!
E.g. Flask.
Get An Azure Account (required)
Since, we’re about to use Microsoft Azure for this tutorial, it would be super helpful to actually have an Azure account. If you don’t have one, don’t even sweat it. Just go to the Azure trial subscription page and get a free 12 month subscription.
Get Git (required)
If you’re on macOS or Linux, then you should already have this installed. For everyone else (my Windows friends) — please go to the Git download page and git it (see what I did there?).
Get Visual Studio Code (optional)
I’ve tried various code editors, and Visual Studio Code is by far my favorite — and it just keeps getting better. If you have a favorite editor already (like Sublime, or Atom) feel free to stick with it. But I’d say give VS Code a try.
Get Miniconda (optional)
Miniconda is Anaconda with only the conda and it’s dependencies. None of that make sense? Alright, don’t sweat it. I got you.
Conda is a powerful package manager and environment manager that you use with command line commands at the Anaconda Prompt for Windows, or in a terminal window for macOS or Linux. — Getting Started with Conda
Ok, well why should you care? Let’s say you just installed Python on your machine and you’re ready to do some serious devving on a project that came to you in a dream. So naturally you go install some really important and specific versions of the packages you need.
The next day, on a leisurely stroll, you come up with another idea that’s sure to make you your first million. Again, you install the packages you need. However, for some contrived reason, this new project requires different versions of the same packages you previously installed! So. Changing the currently installed packages will break your previous project, and you can’t proceed with your new project without the change. See the dilemma?
Tools like conda help you to solve this problem by allowing you to create isolated Python (conda works with other languages as well) environments where you can install whatever versions of dependencies you want. You then run your project in the environment you created just for that project, and all is right with the world.
Azure Web App Setup
Alright, let’s get going. I’m going to do my best to make these steps as clear as possible so that you can reproduce them whenever you need to, but remember that there is constant development on Azure. Things are always changing. If you run into something weird, shoot a message or leave a comment and I’ll try to help out!
Navigate To The Azure Portal
Once you’ve got your subscription, navigate to the Azure Portal. For those that don’t know, this is where you manage the Azure services you have at your disposal.
Create A Resource
Do you see the button on the top of the left navigation menu? The button that reads “Create a resource”. Yeah, go ahead and click that. In the search bar that appears, type “Web App” and select the first one that comes up.
Once you select that first one, you’ll be taken to another screen where you confirm that you do in fact want to create an Azure Web App.
Whoo! Now we’re cookin’! Click that Create button.
Configure Your Web App
Once you click Create, you’ll get a menu for setting up your brand new Web App. The only important thing to remember here is to select Linux as the OS. Not Windows. If you select Windows, you might run into issues down the line as there is still work being done to support running a Flask application in a Windows environment. Maybe the kinks will be worked out later… but I’m not here to show you something that kinda works. Also, choose Code instead Docker Image. Here’s an example of some values for the settings:
The app name you choose determines the address of your web application (https://{appName}.azurewebsites.net). If you don’t like it, you can always purchase a different domain name once this is all done.
Once you hit the Create button in this configuration menu, it’s go time. Your Azure Web App will be deployed. It’ll be live and reachable (at https://medium-flask-app.azurewebsites.net for example). Anyone can access it!
So after you’ve clicked that Create button, you’ll be taken back to the portal and you’ll see this amazing little message on the top right:
Just let it do it’s thing and wait for it to finish. When the deployment finishes, you’ll get a notification. Click the little notification bell at the top right in the navigation bar to see it.
We’re going to go have a look at our creation. Hit the Go to resource button and you’ll be taken to an Overview of your new Azure Web App:
Finally, at the top right in the Overview, click the link next to URL. Behold!
Your creation. My advice? Pour yourself a glass of wine and soak it all in. You did this. You’re amazing.
Next, we’re going to figure out how to make changes to our application so that you can really make it yours!
Thanks for reading!
Consider hitting that follow button. Also, follow me on Twitter @damienestewart. I can’t promise I’ll say anything interesting, but it’ll give me that good “new follower” feeling :).
