jupyter-book · moorepants · Aug 4, 2021 · Jul 19, 2021 · Jul 24, 2021 · Aug 4, 2021
diff --git a/development.html b/development.html
diff --git a/development/binder.html b/development/binder.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="main.css" />
+    <!-- Configure and load Thebe !-->
+    <!-- two config sections: first binder, second local
+        switch which one has type="text/x-thebe-config"
+        to activate it
+      -->
+    <script type="text/x-thebe-config">
+      {
+        requestKernel: true,
+        binderOptions: {
+          repo: "binder-examples/requirements",
+        },
+        codeMirrorConfig: {
+          "theme": "abcdef"
+        },
+      }
+    </script>
+    <script src="../lib/index.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <button id="activateButton">Activate</button>
+      <script>
+        var bootstrapThebe = function () {
+          thebelab.bootstrap();
+        };
+
+        document
+          .querySelector("#activateButton")
+          .addEventListener("click", bootstrapThebe);
+      </script>
+
+      <pre data-executable="true" data-language="python" class="pre-element">
+print("Hello!")</pre
+      >
+      <pre data-executable="true" data-language="python" class="pre-element">
+from IPython.display import Math
+Math("$x = 5$")
+            </pre
+      >
+      <pre data-executable="true" data-language="python" class="pre-element">
+from ipywidgets import IntSlider
+w = IntSlider(0, 10)
+w
+            </pre
+      >
+    </div>
+  </body>
+</html>
diff --git a/development/local.html b/development/local.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="main.css" />
+    <!-- use this one (and set the token!) for local testing (much faster)
+        e.g.
+        jupyter notebook \
+          --NotebookApp.token=thebe-test-secret \
+          --NotebookApp.allow_origin='http://127.0.0.1:8080'
+        -->
+    <script type="text/x-thebe-config">
+      {
+        requestKernel: true,
+        kernelOptions: {
+          name: "python3",
+          path: ".",
+          // notebook server configuration; not needed with binder
+          serverSettings: {
+            "baseUrl": "http://127.0.0.1:8888",
+            "token": "thebe-test-secret",
+          },
+        },
+        codeMirrorConfig: {
+          "theme": "abcdef"
+        },
+      }
+    </script>
+    <script src="../lib/index.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <div>
+        <p>
+          For development against a local kernel, you need to start Jupyter with
+          the expected token:
+        </p>
+        <pre>
+              jupyter notebook \
+              --NotebookApp.token=thebe-test-secret \
+              --NotebookApp.allow_origin='http://127.0.0.1:8080'
+            </pre
+        >
+      </div>
+      <button id="activateButton">Activate</button>
+      <script>
+        var bootstrapThebe = function () {
+          thebelab.bootstrap();
+        };
+
+        document
+          .querySelector("#activateButton")
+          .addEventListener("click", bootstrapThebe);
+      </script>
+      <pre data-executable="true" data-language="python" class="pre-element">
+print("Hello!")</pre
+      >
+      <pre data-executable="true" data-language="python" class="pre-element">
+from IPython.display import Math
+Math("$x = 5$")
+            </pre
+      >
+      <pre data-executable="true" data-language="python" class="pre-element">
+from ipywidgets import IntSlider
+w = IntSlider(0, 10)
+w
+            </pre
+      >
+    </div>
+  </body>
+</html>
diff --git a/development/main.css b/development/main.css
@@ -0,0 +1,30 @@
+body {
+  margin: 0;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+#activateButton {
+  width: 130px;
+  height: 50px;
+  font-size: 1.25em;
+  border: 1px solid black;
+  border-radius: 5px;
+  background-color: lightblue;
+  text-transform: uppercase;
+}
+.pre-element {
+  width: 50vw;
+  height: 20vh;
+  border: 2px solid #aaa;
+  border-radius: 4px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+.thebelab-cell {
+  width: 50vw;
+}
diff --git a/docs/contribute.md b/docs/contribute.md
@@ -87,14 +87,28 @@ yarn run build:watch
 
 This will build `thebe/` locally (including any changes you've made to the source code).
 
-You can now demo the latest `thebe/` changes by opening the file at `development.html`. Open this file to see Thebe running.
+You can now demo the latest `thebe/` changes by opening the file at `development/binder.html`. Open this file to see Thebe running.
 
-The content of `development.html` is a simple HTML page that demonstrates Thebe functionality. You can edit it to test out new features or configurations.
+The content of `development/binder.html` is a simple HTML page that demonstrates Thebe functionality. You can edit it to test out new features or configurations.
 
-Running the `yarn run develop` command will start building the source code with webpack and serve it along with `development.html`.
-As you change the code in `src/`,
-the javascript will automatically be re-built,
-but you'll be required to refresh the page.
+Running the `yarn run develop` command will start a watch on the source code, building with webpack and will serve it along with `development/binder.html`.
+As you change the code in `src/`, the javascript will automatically be re-built, but you'll be required to refresh the page.
+
+### Using a local kernel
+
+`development/binder.html` will connect to a public binder instance which can be slow.
+
+For faster development and easy control over the python environment available to Jupyter is run `yarn run develop:local` instead.
+
+This will serve the file from `development/local.html` which will attempt to connect to a local Jupyter kernel.
+
+You will need to have Jupyter running with **the expected authentication token** for this to work. i.e.
+
+```bash
+jupyter notebook \
+  --NotebookApp.token=thebe-test-secret \
+  --NotebookApp.allow_origin='http://127.0.0.1:8080'
+```
 
 ## Committing changes
 

diff --git a/examples/local.html b/examples/local.html
@@ -29,7 +29,7 @@ <h1>Thebe: using a local server</h1>
   Jupyter server as kernel provider. This assumes that you have
   started the local server as:
   <pre>
-    jupyter notebook --NotebookApp.token=test-secret --NotebookApp.allow_origin='<span id="origin">*</span>'
+    jupyter notebook --NotebookApp.token=thebe-test-secret --NotebookApp.allow_origin='http://127.0.0.1:8080'
   </pre>
   and that it's running on port 8888</p>
 

diff --git a/package.json b/package.json
@@ -9,8 +9,10 @@
     "build:watch": "webpack --mode development --progress --color --watch",
     "prepare": "yarn run build:prod",
     "fmt": "prettier --trailing-comma=es5 --write *.js src/*.js examples/*.js test/*.js",
-    "serve": "http-server -c-1 -a 127.0.0.1 -o development.html",
+    "serve": "http-server -c-1 -a 127.0.0.1 -o development/binder.html",
+    "serve:local": "http-server -c-1 -a 127.0.0.1 -o development/local.html",
     "develop": "concurrently \"yarn run build:watch\" \"yarn run serve\"",
+    "develop:local": "concurrently \"yarn run build:watch\" \"yarn run serve:local\"",
     "test": "jest",
     "test:watch": "jest --watchAll",
     "test:e2e": "jest test.js --config=./jest.e2e.config.js",