Why does this error happen with dash when i try to display my interactive figures on a server?

Question

I am running the following codes but the server doesn't work. It produces a link but the link doesn't open. I receive the following warnings:

• Serving Flask app "main" (lazy loading)
• Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
• Debug mode: on

I am running the codes on Jupyter Notebook. I have tried jupyterdash and flask. Nothing worked for me. How can I solve this problem?

import dash
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)