Build A Live Web Application In Minutes — Using Python, Flask, and Azure Web Apps (Part 2)
Customizing Your New Flask Web Application
Stop! Did you complete the steps of Part 1? That’s really really important so if you haven’t gone through that article yet, please don’t continue until you have finished it. Or continue. I’ve been known to take a few risks every now and then as well :).
Part 2, this, is all about how you actually customize that beautiful new web application you deployed as an Azure Web app. The default page is pretty and all… but it’s just not you, you know what I mean?
Well, no worries. I’m going to show you how to control what the users of your web app will see!
The first thing we need to do is to get the source code for the application we just deployed. Making changes to the source code for our app is how we control what our users experience.
Our application’s source code is being held hostage by the Deployment Center, let’s go rescue it!
Here’s the plan. We’re going to:
- Demand that the Deployment Center create a Git repository for us to work in.
- Clone the repository that it made for us.
- Make code changes inside our cloned repository, and save those changes. Actually, we’re just going to copy the code from Azure Samples into our repository… but don’t tell anyone!
- Reflect upon our brilliance. This is actually the most important part.
Deployment Center
Remember your Overview page for your web app?
Let’s head there again. One way to find it is to just go to the Azure Portal. There’s a good chance it’ll be in your list of recent resources. If not, on that left navigation menu, click App Services and you’ll get an interface for searching for the Web App you created.
Once you’re on the Overview page, have a look at that left navigation menu. Not the one you used to Create a resource (that’s too far left)… the one right beside it. The one that has Overview… Activity log… Access control (IAM), etc. This navigation menu is specifically for things related to a resource you created (your web app in this case).
In that menu, there’s a section called Deployment. Go ahead and click Deployment Center.
Source Code Location
Here, you’re going to select where your source code (the code for your web application) is located. Now, I know what you’re thinking. “But Damiene! I haven’t written a single line of code yet!” Don’t worry fam, I know. I’m going to need some blind faith from you right about now.
As you can see from the screen, the Deployment Center supports multiple repository (place where source code is kept) hosts. However, for what we’re doing, at least at the time of writing this, only GitHub and Local Git are supported.
We’re going to choose Local Git and leave setting this up with GitHub as an exercise for another time. Go ahead and click that.
That’ll take you to a screen that looks like:
At the time of writing this, only App Service build service (Kudu) works for our purposes. Click it like your life depended on it.
Finally, you get a nice summary:
Hit the finish button.
What Just Happened?
Well, you just told the Deployment Center to create a Git repository for you (if you don’t know what that is, you can read more about it). So it did, and then it generated a URL where you can clone that repository to your machine.
So?
The repository that it made, and that you’ll clone in just a bit, is really important. Any code changes you make in that repository is tracked. Once you commit and push those changes, they are automatically deployed to your Azure Web App. That’s it. You don’t have to do anything else. Change code, commit, push, done. Unless you broke something, I guess (I do this occasionally too, don’t even worry).
This is called continuous deployment.
The Clone Wars
So once you’ve hit Finish, you should be here:
See where I’ve highlighted the URL right under Git Clone Uri? Copy your URL as well. Don’t close this page. We’ll need to come back for the Deployment Credentials.
Next, go to your Desktop or some location that you like on your computer and make a new folder — we’ll clone the repository into this folder. On my PC, I created a new folder called Medium in my C:/ folder. So, just for context, the path that you’ll see in my screenshots are C:/Medium.
Open Powershell if you’re on Windows or your favorite terminal if you’re on another OS. Inside the shell, navigate to wherever you just created your new folder. Once there (and your prompt has changed to reflect that you’re now in the new folder), run the command (you’ll get a password prompt, don’t close it, just come back here):
git clone URL_YOU_COPIED_ABOVESo, for me, the command was:
git clone https://medium-flask-app.scm.azurewebsites.net:443/medium-flask-app.gitRunning the command causes a prompt to appear that asks for a user name and password. Go back to the Deployment Center (that I told you not to close :) — but if you did close it, just go back through the first two paragraphs under Deployment Center). At the top, there’s a button that reads Deployment Credentials. Click that, and presto! Your username and password!
Please take care to copy these values and put them in the right place the first time. On Windows at least, it will store anything you incorrectly put into the prompt… and it’ll just fail every time you try to clone the repository without asking you for the username and password again.
If this does happen to you though… on Windows , there’s a program you can search for, Credential Manager. You can find and delete the stored password for the git repository you just tried to clone, and then run the command again. On macOS, I *think* you can go to the Keychain Access app and do the same thing.
If you run into trouble here, just post a comment and I’ll dive into it some more.
Otherwise, you just successfully cloned the repository that the Azure Deployment Center created for you! Awesome! Now, we’re going to put some Flask (Python) code inside.
We’re almost done, I promise.
Clone Azure’s “Hello World” Flask Project
The next thing you should do is clone the Hello World flask project from the Azure folks. Open a shell (Powershell, Terminal, etc) and run the command:
git clone https://github.com/Azure-Samples/python-docs-hello-world.gitAfter you’ve cloned the repository, go into the python-docs-hello-world folder and copy everything.
The image above shows all the files highlighted for copying. We’re going to paste these files into the repository folder we cloned earlier (the one that Azure Web App generated for us):
Wonderful. One thing to note here is to not change the name of the application.py file to anything else. The build server looks for application.py or app.py. Naming this file anything else will require additional configuration which is out of scope for this article.
Now, open a terminal and navigate to the folder you just copied everything to. Remember, this should be the same folder that you got when you first cloned the repository that was generated from the Deployment Center.
Just as a sanity check, let’s run this command in that folder:
git statusThis will show us the new files that we added:
Your screen should have something similar. It may look different if you didn’t copy all the files here, or if you added an extra one. But if you don’t see this at all, ensure that you’re in the right folder.
Send it!
I have no idea what “send it” means, but I’ve been seeing it everywhere. Anyway, next, we’re going to tell Git to start tracking each one of these files (note the dot in the command below):
git add .Great, now it’s tracking all the files in our current directory. We now have to commit our changes with a message:
git commit -am "Damiene was here."Finally, give it a big push:
git pushYou’ll start to see some cool stuff happening in your terminal after this command, assuming you entered the previous ones correctly. This command kicks off the build and deployment for the code you just copied into your Web App’s repository!
Wrapping Up
Wait for the process to finish (it should tell you in the shell when everything is done). Then, navigate to your Azure Web App’s URL (e.g. https://medium-flask-app.azurewebsites.net/).
You’ll see a page that looks like this if everything went well:
You might not appreciate this just yet, but this is amazing. You just dropped some random code into a folder, ran three commands, and it was live for anyone with an internet connection to reach. Wow. I love this field.
Next Steps
So, you really don’t need me anymore (you grew up so fast). If you want to see changes reflected on your website, just go and make changes to the application.py file.
I invite you to make the changes you want, break it and see what happens! Given that you can just copy working code into the repository and push it up, you really can’t do any damage here.
At this point, you know how to create an Azure Web App, and push Flask (Python) code to it. Those are the essentials. It would also be helpful to not have to push your code changes just to see if things worked or not.
That’s what we’ll discuss in Part 3. How to develop and test your code changes locally, before pushing! Let’s go.
Thanks for reading!
Consider hitting that follow button and leaving a few claps. 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 :).
