DOC complete example of using Pyodide directly from JavaScript (#408)

Co-authored-by: Michael Droettboom <mdboom@gmail.com> Co-authored-by: Roman Yurchak <rth.yurchak@gmail.com>
2020-03-25 19:29:38 +08:00 · 2020-03-25 19:29:38 +08:00 · b76c401c0b
parent 7c0cbf61f4
commit b76c401c0b
1 changed files with 70 additions and 1 deletions
--- a/docs/using_pyodide_from_javascript.md
+++ b/docs/using_pyodide_from_javascript.md
@ -75,4 +75,73 @@ pyodide.loadPackage('matplotlib').then(() => {

 ## Complete example

-TODO
+Grab the latest release tarball from the [releases
+page](https://github.com/iodide-project/pyodide/releases/) and expand its
+contents into a `pyodide_local` directory.
+
+Create and save a test `index.html` page (in the `pyodide_local` directory)
+with the following contents:
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <script type="text/javascript">
+        // set the pyodide files URL (packages.json, pyodide.asm.data etc)
+        window.languagePluginUrl = 'http://localhost:8000/';
+    </script>
+    <script src="pyodide.js"></script>
+</head>
+<body>
+  Pyodide test page <br>
+  Open your browser console to see pyodide output
+  <script type="text/javascript">
+        languagePluginLoader.then(function () {
+            console.log(pyodide.runPython('import sys\nsys.version'));
+            console.log(pyodide.runPython('print(1 + 2)'));
+        });
+  </script>
+</body>
+```
+
+Because browsers require WebAssembly files to have mimetype of
+`application/wasm` we're unable to serve our files using Python's built-in
+`SimpleHTTPServer` module.
+
+Let's wrap Python's Simple HTTP Server and provide the appropiate mimetype for
+WebAssembly files into a `pyodide_server.py` file (in the `pyodide_local`
+directory):
+```python
+import sys
+import socketserver
+from http.server import SimpleHTTPRequestHandler
+
+
+class Handler(SimpleHTTPRequestHandler):
+
+    def end_headers(self):
+        # Enable Cross-Origin Resource Sharing (CORS)
+        self.send_header('Access-Control-Allow-Origin', '*')
+        super().end_headers()
+
+
+if sys.version_info < (3, 7, 5):
+    # Fix for WASM MIME type for older Python versions
+    Handler.extensions_map['.wasm'] = 'application/wasm'
+
+
+if __name__ == '__main__':
+    port = 8000
+    with socketserver.TCPServer(("", port), Handler) as httpd:
+        print("Serving at: http://127.0.0.1:{}".format(port))
+        httpd.serve_forever()
+```
+
+Let's test it out.
+In your favourite shell, let's start our WebAssembly aware web server:
+```bash
+python pyodide_server.py
+```
+
+Point your WebAssembly aware browser to
+[http://localhost:8000/index.html](http://localhost:8000/index.html) and open
+your browser console to see the output from python via pyodide!