Deploy a Gradio Web App on Azure with Azure App Service: a Step-by-Step Guide
Published Apr 23 2024 05:54 AM 3,504 Views

A teaser image generated by DALL E 2A teaser image generated by DALL E 2



Gradio is an open-source Python package that you can use for free to create a demo or web app for your machine learning model, API, Azure AI Services integration or any Python function. You can run Gradio in Python notebooks or on a script. A Gradio interface can automatically create a public link, so you can then share a link to your demo or web app easily with Gradio's sharing features. A share link usually looks like this: . This link uses the Gradio Share Servers, but these servers only forward your local server, and do not keep any data sent through your app. Share links are valid for 72 hours. For a more stable way to build a demo app, we suggest using Azure App Service.  App Service is a Platform as a Service (PaaS) offering from Microsoft. It allows us to host web applications, REST API's and backend services for mobile applications. We can host web applications and services that are made with multiple programming languages or frameworks including, .NET, Java, Python etc. This document gives you a detailed guide on how to get your gradio application working on Azure. Up we go!


Run your project locally


Any IDE will work, but we recommend using VSCode, because it has many features that make it easy to create a virtual environment, deploy your project to azure and run a local server. Download the Visual Studio Code installer for Windows. When the download is done, run the installer (VSCodeUserSetup-{version}.exe). It will take a minute or less. VS Code will be installed in C:\Users\{Username}\AppData\Local\Programs\Microsoft VS Code by default. During the installation, don't forget to select the "Add Open with Code Action". 




As an example, we will show this basic gradio app that shows the hello message to user.


import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("Hi friends!")



You can run this code as a Python terminal or as a Jupyter notebook cell.




However, to get the Gradio app to work, we need to connect a gradio.Blocks to a FastAPI application that is already in place.


Begin by creating a virtual environment. To achieve this, you need to install the library first.


pip install virtualenv


To create a venv for your project, follow these steps in your terminal: make a new project folder, use cd to go to the project folder, and run this command


cd my-project
python -m venv myenv


Otherwise you can create a venv in VSCode, using the command palette : Ctrl + Shift + P -> Python: Create Environment




Now install the libraries


pip install gradio
pip install fastapi


And rewrite your initial gradio code. Create  and add the following code :


from fastapi import FastAPI
import gradio as gr

app = FastAPI()

with gr.Blocks() as demo:
    gr.Markdown("Hi friends!")

app = gr.mount_gradio_app(app, demo, path="/")


You are now ready to run your FastAPI application




Please note, that when you need to use secrets in your code, you should use the environment variables.



import os
import gradio as gr

with gr.Blocks() as demo:
    my_secret_key = os.environ["MY_SECRET_KEY"]
    gr.Markdown("Hi friends!")




One way to make the environment variable is through the terminal or PC settings, but a better way to set up the debug profile in VScode is to make your development easier. In your .vscode folder, put the launch.json file that has this content:



    "version": "0.2.0",
    "configurations": [
            "name": "Python Debugger: FastAPI",
            "type": "debugpy",
            "request": "launch",
            "module": "uvicorn",
            "args": [
            "jinja": true,
            "env": {
                "MY_SECRET_KEY": "<my secret key value>"



This will enable you to launch your local app by using the Run > Start Debugging






Deploy to Azure App Service


Because Azure App Services run in the Linux environment, you need to install the gunicorn package, as this is what the startup command relies on instead of uvicorn.


pip install gunicorn


Use the following command to make a requirements file:


pip freeze > requirements.txt


This will create a file that displays all the packages and their dependencies with their versions, something like this:




Make a new folder called deploy and open it in VSCode. Paste the and requirements.txt files in this folder.


Some of the tutorials suggest creating a Docker image that can then run on App Service. But this is not required. You can also deploy code directly from a local workspace to App Service without making a Docker image.


Before you start, make sure you have the Azure Tools extension pack  installed and you are logged into Azure from VS Code. Then go to the Azure portal to create the resource. Sign in to the Azure portal, type app services in the search bar at the top of the portal. Choose the option called App Services under the Services heading on the menu that shows up below the search bar.




On the App Services page, select + Create, then select + Web App from the drop-down menu.




On the Create Web App page, fill out the form as follows.

  1. Resource Group → Select Create new and use your RG name.

  2. Name → you-app-name. This name must be unique across Azure.

  3. Runtime stack → Python 3.11.

  4. Region → Any Azure region near you.

  5. App Service Plan → Under Pricing plan, select Explore pricing plans to select a different App Service plan.




The App Service plan determines the amount of resources (CPU/memory) that your app can use and how much you pay for them.For this example, under Dev/Test, choose the Basic B1 plan. The Basic B1 plan will cost a little bit from your Azure account but is better for performance than the Free F1 plan. When done, select Select to confirm your changes.




At the bottom of the screen on the main Create Web App page, choose the Review + create option. This will bring you to the Review page. To create your App Service, select Create.


Now in VSCode sign to Azure using the command palette (Ctrl + Shift + P)




Then open the Azure extension in VSCode:




Now go to your Web App resource that you made earlier > Right Click > Deploy to Web App




This will start the deployment job




After the deployment is finished, go to the Azure portal, search for the Web Service, select the Settings and input environment variables






And then type the secret name and value as they appear in your local settings in VSCode.


To finish, go to Settings > Configuration > Startup Command and type in this command


python -m gunicorn main:app -k uvicorn.workers.UvicornWorker




To make the web app work properly and recognize the secrets, you have to restart it after setting the environment variables.


To see if the app service is functioning, go to Overview > Default Domain, and you can use this link to access your Web App.




There you have it, your Azure Web App is ready to go. I hope this article was useful.

Version history
Last update:
‎Apr 23 2024 06:10 AM
Updated by: