Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Cannot modify the page title and html.meta doesnt exist?

I am not sure if this problem happens to anyone. I actually did some research on this topic before I post this question.
The problem I have with the dash app is that the page title can be modified and displayed locally with app.title = 'blah blah blah'. But the title reversed back to dash after I deployed it to Heroku. That is so weird.
here is the code:

import flask

server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server, url_base_pathname='/', csrf_protect=False)
server.secret_key = os.environ.get('secret_key', 'secret')

app.title = 'blah blah blah'

.........

if 'DYNO' in os.environ:
    app.scripts.config.serve_locally = False
    app.scripts.append_script({
        'external_url': 'https://cdn.rawgit.com/chriddyp/ca0d8f02a1659981a0ea7f013a378bbd/raw/e79f3f789517deec58f41251f7dbb6bee72c44ab/plotly_ga.js'
    })
else:
    app.scripts.config.serve_locally = True

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

The second problem I have is about the html.Meta. I take the ‘Dash Documentation source code’ as reference. I put html.Meta inside the first Div. But it turned out to be an error message like ‘the html.Meta attribute doe not exist.’

app.layout = html.Div([
    html.Meta(
        name='description',
        content=('ggggggg')
    )])

Not sure about what happened when you pushed to Heroku. Are you sure heroku got the most up to date version of your code?

Re your second question. I found a solution to this two days ago have a look here Adding meta tags to <head>?

thanks for your reply. I did see this solution too. But I am not sure how to use the code. Should I just copy and paste the whole thing into my dash app?

class Dash_responsive(dash.Dash):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    #Overriding from https://github.com/plotly/dash/blob/master/dash/dash.py#L282
    def index(self, *args, **kwargs):
        scripts = self._generate_scripts_html()
        css = self._generate_css_dist_html()
        config = self._generate_config_html()
        title = getattr(self, 'title', 'Dash')
        return ('''
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8"/>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
                <title>{}</title>
                {}
            </head>
            <body>
                <div id="react-entry-point">
                    <div class="_dash-loading">
                        Loading...
                    </div>
                </div>
            </body>
            <footer>
                {}
                {}
            </footer>
        </html>
        '''.format(title, css, config, scripts))


app = Dash_responsive()

That depends on what <meta > attribute you want to add to your html

Huh just encountered the same issue, not sure what’s happening in the transfer to Heroku, but you can ensure the title gets set by changing
title = getattr(self, 'title', 'Dash')
to
title = getattr(self, 'title', 'YOUR TITLE HERE')

1 Like

I accidentally fixed the title issue by upgrading the dependencies of dash on heroku. so app.title = 'blah blah blah' works like a charm.
But I havent figure out the meta problem yet. It doesnt have ‘no attribute error’ now but wont show up inside the head either.