156 lines
3.2 KiB
ReStructuredText
156 lines
3.2 KiB
ReStructuredText
###############################
|
|
Add a web UI with Flask (basic)
|
|
###############################
|
|
**Audience:** Users who want to enable a flask app within a component.
|
|
|
|
**Prereqs:** Basic python knowledge.
|
|
|
|
----
|
|
|
|
**************
|
|
What is Flask?
|
|
**************
|
|
Flask is a web framework, that lets you develop web applications in Python easily.
|
|
|
|
----
|
|
|
|
************************
|
|
Add Flask to a component
|
|
************************
|
|
First, define your flask app as you normally would without Lightning:
|
|
|
|
.. code:: python
|
|
:emphasize-lines: 9
|
|
|
|
from flask import Flask
|
|
|
|
flask_app = Flask(__name__)
|
|
|
|
|
|
@flask_app.route("/")
|
|
def hello():
|
|
return "Hello, World!"
|
|
|
|
|
|
flask_app.run(host="0.0.0.0", port=80)
|
|
|
|
To enable the server inside the component, start the Flask server in the run method and use the ``self.host`` and ``self.port`` properties:
|
|
|
|
.. code:: python
|
|
:emphasize-lines: 12
|
|
|
|
import lightning as L
|
|
from flask import Flask
|
|
|
|
|
|
class LitFlask(L.LightningWork):
|
|
def run(self):
|
|
flask_app = Flask(__name__)
|
|
|
|
@flask_app.route("/")
|
|
def hello():
|
|
return "Hello, World!"
|
|
|
|
flask_app.run(host=self.host, port=self.port)
|
|
|
|
----
|
|
|
|
**************************************
|
|
Route the server in the root component
|
|
**************************************
|
|
The final step, is to tell the Root component in which tab to render this component's output:
|
|
In this case, we render the ``LitFlask`` output in the ``home`` tab of the application.
|
|
|
|
.. code:: python
|
|
:emphasize-lines: 17, 23
|
|
|
|
import lightning as L
|
|
from flask import Flask
|
|
|
|
|
|
class LitFlask(L.LightningWork):
|
|
def run(self):
|
|
flask_app = Flask(__name__)
|
|
|
|
@flask_app.route("/")
|
|
def hello():
|
|
return "Hello, World!"
|
|
|
|
flask_app.run(host=self.host, port=self.port)
|
|
|
|
|
|
class Root(L.LightningFlow):
|
|
def __init__(self):
|
|
super().__init__()
|
|
self.lit_flask = LitFlask(parallel=True)
|
|
|
|
def run(self):
|
|
self.lit_flask.run()
|
|
|
|
def configure_layout(self):
|
|
tab1 = {"name": "home", "content": self.lit_flask}
|
|
return tab1
|
|
|
|
|
|
app = L.LightningApp(Root())
|
|
|
|
We use the ``parallel=True`` argument of ``LightningWork`` to run the server in the background
|
|
while the rest of the Lightning App runs everything else.
|
|
|
|
----
|
|
|
|
***********
|
|
Run the app
|
|
***********
|
|
Start the app to see your new UI!
|
|
|
|
.. code:: bash
|
|
|
|
lightning run app app.py
|
|
|
|
To run the app on the cloud, use the ``--cloud`` argument.
|
|
|
|
.. code:: bash
|
|
|
|
lightning run app app.py --cloud
|
|
|
|
----
|
|
|
|
********
|
|
Examples
|
|
********
|
|
Here are a few example apps that expose a Flask server via a component:
|
|
|
|
.. raw:: html
|
|
|
|
<div class="display-card-container">
|
|
<div class="row">
|
|
|
|
.. Add callout items below this line
|
|
|
|
.. displayitem::
|
|
:header: Example 1
|
|
:description: TODO
|
|
:col_css: col-md-4
|
|
:button_link: example_app.html
|
|
:height: 150
|
|
|
|
.. displayitem::
|
|
:header: Example 2
|
|
:description: TODO
|
|
:col_css: col-md-4
|
|
:button_link: example_app.html
|
|
:height: 150
|
|
|
|
.. displayitem::
|
|
:header: Example 3
|
|
:description: TODO
|
|
:col_css: col-md-4
|
|
:button_link: example_app.html
|
|
:height: 150
|
|
|
|
.. raw:: html
|
|
|
|
</div>
|
|
</div>
|