Thanks to things like cloud services and continuous deployment tools, it’s become easier than ever to build small web apps using CI/CD workflows. In this tutorial, I’ll show you how to use Azure, GitHub and Python to build a very simple web app which auto-refreshes every time you update your code. All you need for this is a free GitHub account and a free Microsoft Azure account.
Creating our code
Once you’ve signed up, go to GitHub and create a new repository with any name you want. In it, create two new files:
requirements.txt
Flask==1.0.2
index.py
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!"
You can make these files directly in your web browser, or you can use a git client to clone the repository and create the files. Your git repository should look like this:
Creating our app service
Log into the Azure web portal and click on App Services and then Add. Here, create a new app service using Python 3, pick a region, and give it a unique name:
If you look at the list of available stacks, you can see that Azure supports most popular coding languages, so you can use this same workflow regardless which language you’re comfortable with. Once the app service has been created, you’ll be sent to the app service’s overview page where you should see the URL of your web site:
You can visit that URL to see the default Microsoft welcome page.
Deploying our app
On the Azure portal, click on the Deployment Center link in order to configure and view the deployments of your app. Follow the quick start guide where you can select GitHub as your source and connect your GitHub account for continuous deployment, then pick the Kudu deployment method. As soon as you’ve done this configuration, the deployment will begin. If you wait a minute and refresh the URL of your web app, you should see Hello World! appear on the web site.
To make sure that the continuous integration works, go back to GitHub and update the index.py file. Replace the text like this:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "This is a test of the pipeline!"
Now, if you go back to the Azure deployment center, you should see that Azure has detected the changes and is deploying a new version of your web app behind the scenes:
After another minute or so, your web app should display the new text. Congratulations, you’ve just deployed a fully functional web app using Ci/CD in less time than it takes to go buy a coffee down the street! Make sure to Stop the app service on the overview page in order not to incur any potential cost for running it in Azure after your free trial is over.