Binder postBuild missing steps? #153

chrisjsewell · 2021-05-14T01:55:09Z

Description

It feels like the Binder postBuild is missing a few steps.
For an extension with server, this works to display my extension:

...

# verify the environment the extension didn't break anything
_(sys.executable, "-m", "pip", "check")

# Install the node dependencies
_("jlpm")

# build the labextension
_("jlpm", "run", "build")

# link the labextension to JupyterLab
_("jupyter", "labextension", "develop", ".", "--overwrite")

# install server
_("jupyter", "server", "extension", "enable", "jlab_aiidatree")

However, there is still a problem for me that POST requests to the server are failing (see below for full output), even though this works fine locally.

Perhaps you know a fix?

Reproduce

See binder link of https://github.com/chrisjsewell/jlab_aiidatree

Expected behavior

The extension is loaded on Binder load

Context

Operating System and version: OSX 10.15.7
Browser and version: Firefox 88.0.1
JupyterLab version: 3.0

Post request failure:

Not a JSON response body. 
Response {type: "basic", url: "https://hub-binder.mybinder.ovh/user/chrisjsewell-…x5b44ro/jlab_aiidatree/querybuilder?1620960326400", redirected: false, status: 404, ok: false, …}
body: ReadableStream
bodyUsed: true
headers: Headers
__proto__: Headers
ok: false
redirected: false
status: 404
statusText: ""
type: "basic"
url: "https://hub-binder.mybinder.ovh/user/chrisjsewell-jlab_aiidatree-zx5b44ro/jlab_aiidatree/querybuilder?1620960326400"

Error on POST /jlab_aiidatree/querybuilder [object Object].
Error: <!DOCTYPE HTML>
<html>

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

    <title>Jupyter Notebook</title>
    <link id="favicon" rel="shortcut icon" type="image/x-icon" href="/user/chrisjsewell-jlab_aiidatree-9zlte1op/static/base/images/favicon.ico?v=50afa725b5de8b00030139d09b38620224d4e7dba47c07ef0e86d4643f30c9bfe6bb7e1a4a1c561aa32834480909a4b6fe7cd1e17f7159330b6b5914bf45a880">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="/user/chrisjsewell-jlab_aiidatree-9zlte1op/static/components/jquery-ui/themes/smoothness/jquery-ui.min.css?v=fb45616eef2c454960f91fcd2a04efeda84cfacccf0c5d741ba2793dc1dbd6d3ab01aaae6485222945774c7d7a9a2e9fb87e0d8ef1ea96893aa6906147a371bb" type="text/css" />
    <link rel="stylesheet" href="/user/chrisjsewell-jlab_aiidatree-9zlte1op/static/components/jquery-typeahead/dist/jquery.typeahead.min.css?v=5edf53bf6bb9c3b1ddafd8594825a7e2ed621f19423e569c985162742f63911c09eba2c529f8fb47aebf27fafdfe287d563347f58c1126b278189a18871b6a9a" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    

    <link rel="stylesheet" href="/user/chrisjsewell-jlab_aiidatree-9zlte1op/static/style/style.min.css?v=56dfd556850eb17b7998c6828467598a322b41593edc758739c66cb2c3fea98f23d0dd8bf8b9b0f5d67bb976a50e4c34f789fe640cbb440fa089e1bf5ec170bd" type="text/css"/>
    
<style type="text/css">
/* disable initial hide */
div#header, div#site {
    display: block;
}
</style>

    <link rel="stylesheet" href="/user/chrisjsewell-jlab_aiidatree-9zlte1op/custom/custom.css" type="text/css" />
    <script src="/user/chrisjsewell-jlab_aiidatree-9zlte1op/static/components/es6-promise/promise.min.js?v=bea335d74136a63ae1b5130f5ac9a50c6256a5f435e6e09fef599491a84d834a8b0f011ca3eaaca3b4ab6a2da2d3e1191567a2f171e60da1d10e5b9d52f84184" type="text/javascript" charset="utf-8"></script>
    <script src="/user/chrisjsewell-jlab_aiidatree-9zlte1op/static/components/react/react.production.min.js?v=9a0aaf84a316c8bedd6c2ff7d5b5e0a13f8f84ec02442346cba0b842c6c81a6bf6176e64f3675c2ebf357cb5bb048e0b527bd39377c95681d22468da3d5de735" type="text/javascript"></script>
    <script src="/user/chrisjsewell-jlab_aiidatree-9zlte1op/static/components/react/react-dom.production.min.js?v=6fc58c1c4736868ff84f57bd8b85f2bdb985993a9392718f3b4af4bfa10fb4efba2b4ddd68644bd2a8daf0619a3844944c9c43f8528364a1aa6fc01ec1b8ae84" type="text/javascript"></script>
    <script src="/user/chrisjsewell-jlab_aiidatree-9zlte1op/static/components/create-react-class/index.js?v=894ad57246e682b4cfbe7cd5e408dcd6b38d06af4de4f3425991e2676fdc2ef1732cbd19903104198878ae77de12a1996de3e7da3a467fb226bdda8f4618faec" type="text/javascript"></script>
    <script src="/user/chrisjsewell-jlab_aiidatree-9zlte1op/static/components/requirejs/require.js?v=d37b48bb2137faa0ab98157e240c084dd5b1b5e74911723aa1d1f04c928c2a03dedf922d049e4815f7e5a369faa2e6b6a1000aae958b7953b5cc60411154f593" type="text/javascript" charset="utf-8"></script>
    <script>
      require.config({
          
          urlArgs: "v=20210514014226",
          
          baseUrl: '/user/chrisjsewell-jlab_aiidatree-9zlte1op/static/',
          paths: {
            'auth/js/main': 'auth/js/main.min',
            custom : '/user/chrisjsewell-jlab_aiidatree-9zlte1op/custom',
            nbextensions : '/user/chrisjsewell-jlab_aiidatree-9zlte1op/nbextensions',
            kernelspecs : '/user/chrisjsewell-jlab_aiidatree-9zlte1op/kernelspecs',
            underscore : 'components/underscore/underscore-min',
            backbone : 'components/backbone/backbone-min',
            jed: 'components/jed/jed',
            jquery: 'components/jquery/jquery.min',
            json: 'components/requirejs-plugins/src/json',
            text: 'components/requirejs-text/text',
            bootstrap: 'components/bootstrap/dist/js/bootstrap.min',
            bootstraptour: 'components/bootstrap-tour/build/js/bootstrap-tour.min',
            'jquery-ui': 'components/jquery-ui/jquery-ui.min',
            moment: 'components/moment/min/moment-with-locales',
            codemirror: 'components/codemirror',
            termjs: 'components/xterm.js/xterm',
            typeahead: 'components/jquery-typeahead/dist/jquery.typeahead.min',
          },
          map: { // for backward compatibility
              "*": {
                  "jqueryui": "jquery-ui",
              }
          },
          shim: {
            typeahead: {
              deps: ["jquery"],
              exports: "typeahead"
            },
            underscore: {
              exports: '_'
            },
            backbone: {
              deps: ["underscore", "jquery"],
              exports: "Backbone"
            },
            bootstrap: {
              deps: ["jquery"],
              exports: "bootstrap"
            },
            bootstraptour: {
              deps: ["bootstrap"],
              exports: "Tour"
            },
            "jquery-ui": {
              deps: ["jquery"],
              exports: "$"
            }
          },
          waitSeconds: 30,
      });

      require.config({
          map: {
              '*':{
                'contents': 'services/contents',
              }
          }
      });

      // error-catching custom.js shim.
      define("custom", function (require, exports, module) {
          try {
              var custom = require('custom/custom');
              console.debug('loaded custom.js');
              return custom;
          } catch (e) {
              console.error("error loading custom.js", e);
              return {};
          }
      })

    document.nbjs_translations = {"domain": "nbjs", "locale_data": {"nbjs": {"": {"domain": "nbjs"}}}};
    document.documentElement.lang = navigator.language.toLowerCase();
    </script>

    
    

</head>

<body class=""
 
  
    data-jupyter-api-token="EC36h18LRE6j6_ZE-_IMVg"
  
 
dir="ltr">

<noscript>
    <div id='noscript'>
      Jupyter Notebook requires JavaScript.<br>
      Please enable it to proceed. 
  </div>
</noscript>

<div id="header" role="navigation" aria-label="Top Menu">
  <div id="header-container" class="container">
  <div id="ipython_notebook" class="nav navbar-brand"><a href="/user/chrisjsewell-jlab_aiidatree-9zlte1op/tree?token=EC36h18LRE6j6_ZE-_IMVg" title='dashboard'>
      <img src='/user/chrisjsewell-jlab_aiidatree-9zlte1op/static/base/images/logo.png?v=a2a176ee3cee251ffddf5fa21fe8e43727a9e5f87a06f9c91ad7b776d9e9d3d5e0159c16cc188a3965e00375fb4bc336c16067c688f5040c0c2d4bfdb852a9e4' alt='Jupyter Notebook'/>
  </a></div>

  
  
  
  







  <span>
    <a id="visit-repo-link" href="https://github.com/chrisjsewell/jlab_aiidatree/tree/ad90a5a40e2d4c480095f59c1967fb4e6bb8502a" class="btn btn-default btn-sm navbar-btn" target="_blank"
       style="margin-right: 2px; margin-left: 4px;">Visit repo</a>
  </span>



  <span>
    <button id="copy-binder-link" title="Copy binder link to clipboard" class="btn btn-default btn-sm navbar-btn"
            style="margin-right: 0; margin-left: 2px;"
            data-url="https://mybinder.org/v2/gh/chrisjsewell/jlab_aiidatree/ad90a5a40e2d4c480095f59c1967fb4e6bb8502a" onclick="copy_link_into_clipboard(this);">
      Copy Binder link
    </button>
  </span>



  
  </div>
  <div class="header-bar"></div>

  
  
</div>

<div id="site">


<div class="error">
    
    <h1>404 : Not Found</h1>
    
    
<p>You are requesting a page that does not exist!</p>

</div>


</div>







<script type='text/javascript'>
    function copy_link_into_clipboard(b) {
        var $temp = $("<input>");
        $(b).parent().append($temp);
        $temp.val($(b).data('url')).select();
        document.execCommand("copy");
        $temp.remove();
    }
</script>


<script type='text/javascript'>
require(['jquery'], function($) {
  // scroll long tracebacks to the bottom
  var tb = $(".traceback")[0];
  tb.scrollTop = tb.scrollHeight;
});
</script>


<script type='text/javascript'>
  function _remove_token_from_url() {
    if (window.location.search.length <= 1) {
      return;
    }
    var search_parameters = window.location.search.slice(1).split('&');
    for (var i = 0; i < search_parameters.length; i++) {
      if (search_parameters[i].split('=')[0] === 'token') {
        // remote token from search parameters
        search_parameters.splice(i, 1);
        var new_search = '';
        if (search_parameters.length) {
          new_search = '?' + search_parameters.join('&');
        }
        var new_url = window.location.origin + 
                      window.location.pathname + 
                      new_search + 
                      window.location.hash;
        window.history.replaceState({}, "", new_url);
        return;
      }
    }
  }
  _remove_token_from_url();
</script>
</body>

</html>

The text was updated successfully, but these errors were encountered:

welcome · 2021-05-14T01:55:11Z

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

chrisjsewell · 2021-05-14T01:57:48Z

thanks otherwise, the extension tutorial + this cookiecutter made it pretty easy to get my extension up and running!

jtpio · 2021-05-14T21:24:17Z

Thanks @chrisjsewell for the report.

Would you be able to check whether removing the -e part of the following command does the trick?

extension-cookiecutter-ts/{{cookiecutter.python_name}}/binder/postBuild

Line 33 in 12c1452

_(sys.executable, "-m", "pip", "install", "-e", ".")

Looks like this might be related to the recent update of jupyter-packaging.

However, there is still a problem for me that POST requests to the server are failing (see below for full output), even though this works fine locally.

Maybe the server extension is not correctly activated. This could be checked on Binder by opening a terminal and running:

jupyter serverextension list   # binder starts a classic notebook server by default for now
jupyter server extension list  # just to double check

s-weigand · 2021-05-21T05:08:19Z

Would you be able to check whether removing the -e part of the following command does the trick?

This fixed it for me with a client-side only extension that didn't console.log that it is installed with the -e flag in place.

fcollonval · 2021-05-21T07:03:08Z

The root cause is that BinderHub is not using the new jupyter server logic. So a server extension needs to be made backward compatible to work: see jupyterlab/jupyterlab-git#863

Fixes jupyterlab#153

Fixes #153

chrisjsewell added the bug label May 14, 2021

chrisjsewell mentioned this issue May 14, 2021

Get Binder working properly chrisjsewell/jlab_aiidatree#3

Open

fcollonval added a commit to fcollonval/extension-cookiecutter-ts that referenced this issue May 21, 2021

Add backward compatibility hook for notebook server

c2d6677

Fixes jupyterlab#153

fcollonval mentioned this issue May 21, 2021

Add backward compatibility hook for notebook server #155

Merged

blink1073 closed this as completed in #155 May 21, 2021

blink1073 pushed a commit that referenced this issue May 21, 2021

Add backward compatibility hook for notebook server (#155)

6a41739

Fixes #153

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Binder postBuild missing steps? #153

Binder postBuild missing steps? #153

chrisjsewell commented May 14, 2021 •

edited

Loading

welcome bot commented May 14, 2021

chrisjsewell commented May 14, 2021 •

edited

Loading

jtpio commented May 14, 2021

s-weigand commented May 21, 2021 •

edited

Loading

fcollonval commented May 21, 2021

Binder postBuild missing steps? #153

Binder postBuild missing steps? #153

Comments

chrisjsewell commented May 14, 2021 • edited Loading

Description

Reproduce

Expected behavior

Context

welcome bot commented May 14, 2021

chrisjsewell commented May 14, 2021 • edited Loading

jtpio commented May 14, 2021

s-weigand commented May 21, 2021 • edited Loading

fcollonval commented May 21, 2021

chrisjsewell commented May 14, 2021 •

edited

Loading

chrisjsewell commented May 14, 2021 •

edited

Loading

s-weigand commented May 21, 2021 •

edited

Loading