diff --git a/GETTING-STARTED.md b/GETTING-STARTED.md index 16721b0d..c48b1b81 100644 --- a/GETTING-STARTED.md +++ b/GETTING-STARTED.md @@ -7,23 +7,21 @@ This page will guide you through getting started with PyScript. PyScript does not require any development environment other than a web browser. We recommend using Chrome. +If, you're using [VSCode](https://code.visualstudio.com/) the +[Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) +can be used to reload the page as you edit the HTML file. + ## Installation -First, go to https://pyscript.net and download the PyScript assets. -Unzip the archive to a directory where you wish to write PyScript-enabled -HTML files. You should then have three files in your directory. +There is no installation required. In this document we'll use +the PyScript assets served on https://pyscript.net. -``` -├── ./ -│ ├── pyscript.css -│ ├── pyscript.js -│ └── pyscript.js.map -``` +If you want to download the source and build it yourself follow +the instructions in the README.md file. ## Your first PyScript HTML file -Here's a "Hello, world!" example using PyScript using the assets you -downloaded from https://pyscript.net. +Here's a "Hello, world!" example using PyScript Using your favorite editor create a new file called `hello.html` in the same directory as your PyScript JavaScript and CSS files with the @@ -33,8 +31,8 @@ open an HTML by double clicking it in your file explorer. ```html - - + + print('Hello, World!') @@ -53,8 +51,8 @@ example we can compute π. ```html - - + + @@ -85,8 +83,8 @@ the `` tag write to. ```html - - + + @@ -125,8 +123,8 @@ as a shortcut, which takes the expression on the last line of the script and run ```html - - + + - numpy - matplotlib @@ -143,6 +141,55 @@ import numpy as np x = np.random.randn(1000) y = np.random.randn(1000) +fig, ax = plt.subplots() +ax.scatter(x, y) +fig + + + +``` + +### Local modules + +In addition to packages you can declare local Python modules that will +be imported in the `` tag. For example we can place the random +number generation steps in a function in the file `data.py`. + +```python +# data.py +import numpy as np + +def make_x_and_y(n): + x = np.random.randn(n) + y = np.random.randn(n) + return x, y +``` + +In the HTML tag `` paths to local modules are provided in the +`paths:` key. + +```html + + + + + + - numpy + - matplotlib + - paths: + - /data.py + + + + +

Let's plot random numbers

+
+ +import matplotlib.pyplot as plt +from data import make_x_and_y + +x, y = make_x_and_y(n=1000) + fig, ax = plt.subplots() ax.scatter(x, y) fig