Search code examples
javascriptpythonreactjstornadojupyter-lab

How to render a React component with Python Tornado template?

I'm trying to modify login page UI (with React) in JupyterLab, it seems like its server consists of Python Tornado and renders login.html as one of templates. (literally stored in templates directory. ...jupyter_server\templates\) It might also render others like 404.html, error.html respectively in terms of contexts.

I simply followed https://reactjs.org/docs/add-react-to-a-website.html like below so:

page.html

<head>
    
    <meta charset="utf-8">

    <title>{% block title %}Jupyter Server{% endblock %}</title>
                                           :
                                           :
                                          
    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    {% block login %}  
    {% endblock login %}
  
</body>

</html>

logint.html

{% extends "page.html" %}

{% block login %}
    <script src="like_button.js"></script>
    <script>console.log('This is Login page.')</srcipt> // logs shows fine
    <h1>This is Login Page.</h1> // tag shows fine  
{% endblock login %}

As I understand so far, when the url hit as login, login.html renders with appending its contents to page.html.

I was expecting the like_button.js component renders fine but it is the only thing excluded. The log and h1 are visible correctly meanwhile.

Have I missed something? any ideas welcome.

Solution

  • The src of the script isn't correct. In Tornado, you put your static files in a folder called static and then set the src like this:

    <script src="{{ static_url('like_button.js')"></script>

    If you put the file in a subfolder such as static/js/, then provide its relative path:

    <script src="{{ static('js/like_button.js') }}"></script>