1
1
# Beginning PyScript
2
2
3
- PyScript is a platform for running Python in modern web browsers.
3
+ PyScript is a platform for running
4
+ <a href =" https://python.org/ " target =" _blank " >Python</a >
5
+ in modern web browsers.
4
6
5
- Create apps with a PyScript development environment: write code, curate the
6
- project's assets, and test your application.
7
+ Create apps with a
8
+ <a href =" https://pyscript.com/ " target =" _blank " >PyScript development environment</a >:
9
+ write code, curate the project's assets, and test your application.
7
10
8
- To distribute a PyScript application, host it as a static web site , then click
11
+ To distribute a PyScript application, host it on the web, then click
9
12
on the link to your application. PyScript and the browser do the rest.
10
13
11
14
This page covers these core aspects of PyScript in a beginner friendly manner.
@@ -38,12 +41,6 @@ Create these files with your favourite code editor on your local file system.
38
41
Alternatively, [ pyscript.com] ( https://pyscript.com ) will take away all the pain
39
42
of organising, previewing and deploying your application.
40
43
41
- If you decide to use [ pyscript.com] ( https://pyscript.com ) (recommended for first
42
- steps), once signed in, create a new project by pressing the "+" button on the
43
- left hand side below the site's logo. You'll be presented with a page
44
- containing three columns (listing your files, showing your code and previewing
45
- the app). The "save" and "run" buttons do exactly what you'd expect.
46
-
47
44
If you're using your local file system, you'll need a way to view your
48
45
application in your browser. If you already have Python installed on
49
46
your local machine, serve your files with the following command run from your
@@ -62,22 +59,31 @@ refresh the page (`CTRL-R`) to see any updates you may have made.
62
59
[ Live Server extension] ( https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer )
63
60
can be used to reload the page as you edit your files.
64
61
62
+ If you decide to use [ pyscript.com] ( https://pyscript.com ) (recommended for
63
+ first steps), once signed in, create a new project by pressing the "+" button
64
+ on the left hand side below the site's logo. You'll be presented with a page
65
+ containing three columns (listing your files, showing your code and previewing
66
+ the app). The "save" and "run" buttons do exactly what you'd expect.
67
+
68
+ ![ PyScript.com] ( assets/images/pyscript.com.png )
69
+
65
70
Let's build a simple PyScript application that translates English 🇬🇧 into
66
71
Pirate 🏴☠️ speak. In order to do this we'll make use of the
67
72
[ arrr] ( https://arrr.readthedocs.io/en/latest/ ) library. By building this app
68
73
you'll be introduced to all the core concepts of PyScript at an introductory
69
74
level.
70
75
71
- You can see this application embedded into the page below:
76
+ You can see this application embedded into the page below (try it out!) :
72
77
73
78
<iframe src =" https://ntoll.pyscriptapps.com/piratical/v5/ " style =" border : 1px solid black ; width :100% ;min-height : 400px ; border-radius : 0.2rem ; box-shadow : var (--md-shadow-z1 );" ></iframe >
74
79
75
80
Let's explore each of the three files that make this app work.
76
81
77
82
### pyscript.json
78
83
79
- This file tells PyScript and your browser about various configurable aspects of
80
- your application. Put simply, it tells PyScript what it needs in order to run
84
+ This file tells PyScript and your browser about various
85
+ [ configurable aspects] ( ../user-guide/configuration )
86
+ of your application. Put simply, it tells PyScript what it needs in order to run
81
87
your application. The only thing we need to show is that we require the third
82
88
party ` arrr ` module to do the
83
89
[ actual translation] ( https://arrr.readthedocs.io/en/latest/ ) .
@@ -106,8 +112,8 @@ module in the document's `<head>` tag:
106
112
<meta charset =" utf-8" />
107
113
<meta name =" viewport" content =" width=device-width,initial-scale=1" />
108
114
<title >🦜 Polyglot - Piratical PyScript</title >
109
- <link rel =" stylesheet" href =" https://pyscript.net/releases/2024.4 .1/core.css" >
110
- <script type =" module" src =" https://pyscript.net/releases/2024.4 .1/core.js" ></script >
115
+ <link rel =" stylesheet" href =" https://pyscript.net/releases/2024.5 .1/core.css" >
116
+ <script type =" module" src =" https://pyscript.net/releases/2024.5 .1/core.js" ></script >
111
117
</head >
112
118
<body >
113
119
@@ -157,8 +163,8 @@ In the end, our HTML should look like this:
157
163
<meta charset =" utf-8" />
158
164
<meta name =" viewport" content =" width=device-width,initial-scale=1" />
159
165
<title >🦜 Polyglot - Piratical PyScript</title >
160
- <link rel =" stylesheet" href =" https://pyscript.net/releases/2024.4 .1/core.css" >
161
- <script type =" module" src =" https://pyscript.net/releases/2024.4 .1/core.js" ></script >
166
+ <link rel =" stylesheet" href =" https://pyscript.net/releases/2024.5 .1/core.css" >
167
+ <script type =" module" src =" https://pyscript.net/releases/2024.5 .1/core.js" ></script >
162
168
</head >
163
169
<body >
164
170
<h1 >Polyglot 🦜 💬 🇬🇧 ➡️ 🏴☠️</h1 >
@@ -232,7 +238,7 @@ Pirate-ish.
232
238
Alternatively, [ click here to see a working example of this app] ( https://ntoll.pyscriptapps.com/piratical/v5/ ) .
233
239
Notice that the bottom right hand corner contains a link to view the code on
234
240
[ pyscript.com] ( https://pyscript.com ) . Why not explore the code, copy it to your own
235
- account and change it to your satisfaction.
241
+ account and change it to your satisfaction?
236
242
237
243
### From a web server
238
244
@@ -261,4 +267,5 @@ needed to build yet more interesting things of your own.
261
267
262
268
PyScript is extremely powerful, and these beginner steps only just scratch the
263
269
surface. To learn about PyScript in more depth, check out
264
- [ our user guide] ( user-guide/index.md ) .
270
+ [ our user guide] ( user-guide/index.md ) or
271
+ [ explore our example applications] ( ../examples ) .
0 commit comments