Anyone knows if is possible to upload an Flet App in Azure?

I have the to_Do_app model that the Flet documentation gives, and i am trying to learn how upload it to an azure server in a way to learn how Azure works. But investigating there is not clear information about it. I'll be grateful if someone teach me if is it possible and how.

The only thing i found is this textbut im still not sure if the framework its not compatible with Azure for now.

This is the code that i want to upload.

https://github.com/flet-dev/examples/tree/5c16ccc21c41c3acf9221dec8bac5127a3871b4f/python/apps/todo

Solution

I tried the sample code and successfully deployed it to the Azure app service.

I ran the commands below for the virtual environment:

python -m venv venv

.\venv\Scripts\activate.

requirements.txt:

flet  ==  0.19.0

I added this flet.app(target=main, view=flet.AppView.WEB_BROWSER) to the end of main.py for deployment as a web app.

main. py:

import flet
from flet import (
    Checkbox,
    Column,
    FloatingActionButton,
    IconButton,
    Page,
    Row,
    Tab,
    Tabs,
    TextField,
    UserControl,
    colors,
    icons,
)
class Task(UserControl):
    def __init__(self, task_name, task_status_change, task_delete):
        super().__init__()
        self.completed = False
        self.task_name = task_name
        self.task_status_change = task_status_change
        self.task_delete = task_delete
    def build(self):
        self.display_task = Checkbox(
            value=False, label=self.task_name, on_change=self.status_changed
        )
        self.edit_name = TextField(expand=1)

        self.display_view = Row(
            alignment="spaceBetween",
            vertical_alignment="center",
            controls=[
                self.display_task,
                Row(
                    spacing=0,
                    controls=[
                        IconButton(
                            icon=icons.CREATE_OUTLINED,
                            tooltip="Edit To-Do",
                            on_click=self.edit_clicked,
                        ),
                        IconButton(
                            icons.DELETE_OUTLINE,
                            tooltip="Delete To-Do",
                            on_click=self.delete_clicked,
                        ),
                    ],
                ),
            ],
        )
        self.edit_view = Row(
            visible=False,
            alignment="spaceBetween",
            vertical_alignment="center",
            controls=[
                self.edit_name,
                IconButton(
                    icon=icons.DONE_OUTLINE_OUTLINED,
                    icon_color=colors.GREEN,
                    tooltip="Update To-Do",
                    on_click=self.save_clicked,
                ),
            ],
        )
        return Column(controls=[self.display_view, self.edit_view])

    def edit_clicked(self, e):
        self.edit_name.value = self.display_task.label
        self.display_view.visible = False
        self.edit_view.visible = True
        self.update()
    def save_clicked(self, e):
        self.display_task.label = self.edit_name.value
        self.display_view.visible = True
        self.edit_view.visible = False
        self.update()
    def status_changed(self, e):
        self.completed = self.display_task.value
        self.task_status_change(self)
    def delete_clicked(self, e):
        self.task_delete(self)
class TodoApp(UserControl):
    def build(self):
        self.new_task = TextField(hint_text="Whats needs to be done?", expand=True)
        self.tasks = Column()
        self.filter = Tabs(
            selected_index=0,
            on_change=self.tabs_changed,
            tabs=[Tab(text="all"), Tab(text="active"), Tab(text="completed")],
        )
        # application's root control (i.e. "view") containing all other controls
        return Column(
            width=600,
            controls=[
                Row(
                    controls=[
                        self.new_task,
                        FloatingActionButton(icon=icons.ADD, on_click=self.add_clicked),
                    ],
                ),
                Column(
                    spacing=25,
                    controls=[
                        self.filter,
                        self.tasks,
                    ],
                ),
            ],
        )
    def add_clicked(self, e):
        task = Task(self.new_task.value, self.task_status_change, self.task_delete)
        self.tasks.controls.append(task)
        self.new_task.value = ""
        self.update()
    def task_status_change(self, task):
        self.update()
    def task_delete(self, task):
        self.tasks.controls.remove(task)
        self.update()
    def update(self):
        status = self.filter.tabs[self.filter.selected_index].text
        for task in self.tasks.controls:
            task.visible = (
                status == "all"
                or (status == "active" and task.completed == False)
                or (status == "completed" and task.completed)
            )
        super().update()
    def tabs_changed(self, e):
        self.update()
def main(page: Page):
    page.title = "ToDo App"
    page.horizontal_alignment = "center"
    page.update()
       app = TodoApp()
       page.add(app)
flet.app(target=main, view=flet.AppView.WEB_BROWSER)

I ran the command below:

python main.py

Local Output:

enter image description here

I ran the command below to generate a "dist" folder for deployment purposes.

flet publish main.py

I created an Azure web app in the Azure portal, selected the runtime stack as Node 18, and chose the operating system as Windows, as shown below.

enter image description here

I deployed a web app to Azure App Service through VS Code, as shown below.

enter image description here

Azure App Service Output:

enter image description here