From b76c401c0b300fcdd8266f9fac8548bab61d5b93 Mon Sep 17 00:00:00 2001 From: wi11yp <50165408+wi11yp@users.noreply.github.com> Date: Wed, 25 Mar 2020 19:29:38 +0800 Subject: [PATCH] DOC complete example of using Pyodide directly from JavaScript (#408) Co-authored-by: Michael Droettboom Co-authored-by: Roman Yurchak --- docs/using_pyodide_from_javascript.md | 71 ++++++++++++++++++++++++++- 1 file changed, 70 insertions(+), 1 deletion(-) diff --git a/docs/using_pyodide_from_javascript.md b/docs/using_pyodide_from_javascript.md index 8c0d92b6c..6f7a3cda4 100644 --- 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 + + + + + + + + Pyodide test page
+ Open your browser console to see pyodide output + + +``` + +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!