Skip to content

Commit 4751da3

Browse files
committed
stage rework of get started, concepts, and tutorials
1 parent 30332ad commit 4751da3

16 files changed

+1768
-81
lines changed

_quarto.yml

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ website:
7676
search: true
7777
left:
7878
- text: "Get Started"
79-
file: get-started/overview.qmd
79+
file: get-started/welcome.qmd
8080
- text: "Concepts"
8181
file: docs/ui-overview.qmd
8282
- text: "Components"
@@ -228,9 +228,9 @@ website:
228228
collapse-level: 1
229229
align: left
230230
contents:
231-
- get-started/overview.qmd
232-
- get-started/user-interfaces.qmd
233-
- get-started/install-create-run.qmd
231+
- get-started/welcome.qmd
232+
- get-started/install.qmd
233+
- get-started/create-run.qmd
234234
- get-started/debug.qmd
235235
- section: "Deploy"
236236
contents:
@@ -249,6 +249,10 @@ website:
249249
collapse-level: 2
250250
align: left
251251
contents:
252+
- section: "Essentials"
253+
contents:
254+
- docs/overview.qmd
255+
- docs/user-interfaces.qmd
252256
- section: "User interfaces"
253257
contents:
254258
- docs/ui-overview.qmd

docs/comp-streamlit.quarto_ipynb

Lines changed: 407 additions & 0 deletions
Large diffs are not rendered by default.

docs/nonblocking.quarto_ipynb

Lines changed: 314 additions & 0 deletions
Large diffs are not rendered by default.
File renamed without changes.

get-started/user-interfaces.qmd renamed to docs/user-interfaces.qmd

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: User interfaces
2+
title: User Interfaces
33
editor:
44
markdown:
55
wrap: sentence
226 KB
Loading
File renamed without changes.

get-started/create-run.qmd

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
title: "Create and Run"
3+
---
4+
5+
When you [install shiny](get-started/install.qmd), you will have access to the `shiny` command line interface (CLI).
6+
You can use this interface to help you create and run your Shiny applications.
7+
8+
## Create a Shiny application
9+
10+
The best way to create a new Shiny app is with the `shiny create` command line interface.
11+
This command asks you a series of questions about what kind of app you want to create,
12+
and then provides all the boilerplate code you need to get started with a working app.
13+
14+
```bash
15+
shiny create
16+
```
17+
18+
![Running the shiny create command from a terminal](assets/shiny-create.mp4){class="img-shadow"}
19+
20+
::: callout-tip
21+
### Copy/paste examples
22+
23+
If you find an example on this site that you want to run or edit locally,
24+
you can use the following command to get a basic app template,
25+
then copy and paste the code from the example into the template.
26+
27+
```bash
28+
shiny create --template basic-app -m express
29+
```
30+
:::
31+
32+
33+
## Run
34+
35+
Shiny apps can be launched from Positron, VS Code, or the command line via `shiny run`.
36+
37+
::: {.callout-tip}
38+
#### Name your app `app.py`
39+
40+
We recommend naming your shiny application `app.py`.
41+
This is the default file that `shiny run` will look for, so you can run the application in the terminal without any additional parameters.
42+
43+
If you need a more unique name, we recommend beginning the file with `app`, so the shiny extension can still run with a [play button click](install.qmd#positron).
44+
:::
45+
46+
### Positron and VS Code
47+
48+
The best way to run (and develop) Shiny apps is in [Positron][positron] or [Visual Studio Code][vscode] with the [Shiny extension][vscode-shiny].
49+
When a Shiny `app.py` file is being edited, the default behavior of the Run button (circled in red in the screenshot below) becomes "Run Shiny App".
50+
51+
![Visual Studio Code running with the Shiny extension](assets/positron-run.png)
52+
53+
This launches a Python process in a dedicated terminal instance, and a captive web browser.
54+
This lets you test your app without leaving your editor, and whenever you make changes to your app's source, the preview will update. To preview your app in a full browser, click the icon to the right of the URL bar to launch the app in an external browser.
55+
56+
Next to the Run button is a dropdown menu that lets you "Debug Shiny App". This launches the app in debug mode, which lets you set breakpoints and step through your code.
57+
See the [debugging](debug.qmd) section for more information.
58+
59+
### Command line
60+
61+
To run a Shiny app from the command line, use the `shiny run` command.
62+
This command takes a single argument, the path to the app's entry point.
63+
For example, if your app's entry point is `app.py` in the directory `./app_dir`, you can run it like this:
64+
65+
```bash
66+
shiny run --reload --launch-browser app_dir/app.py
67+
```
68+
69+
This should start your app and also automatically launch a web browser.
70+
71+
The `--reload` flag means that file changes in the current directory tree will cause the Python process to restart and the browser to reload.
72+
Update and save changes to `app.py` and then wait a moment for the changes to appear in the browser.
73+
74+
With these two `shiny` commands, you now have a project that you can run in your terminal.
75+
You can use any text editor or Python IDE to write Shiny apps, but we've taken special care to ensure a smooth workflow for [Positron][positron] and [Visual Studio Code][vscode].
76+
77+
[positron]: https://positron.posit.co/
78+
[vscode]: https://code.visualstudio.com/
79+
[vscode-shiny]: https://marketplace.visualstudio.com/items?itemName=posit.shiny
80+
[vscode-python]: https://marketplace.visualstudio.com/items?itemName=ms-python.python

get-started/debug.qmd

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,9 @@ The error displayed in the app is only the final part of the stack trace, but th
5757
When Shiny apps are deployed, error messages are sanitized to the eliminate the possibility of leaking sensitive information. To unsanitize error messages, you'll need to set `sanitize_errors=True` in the `App` constructor (of a [Shiny core app](express-vs-core.qmd)).
5858
:::
5959

60-
61-
6260
## Debugging
6361

64-
### VS Code debugger
62+
### Positron and VS Code debugger
6563

6664
The [VS Code debugger](https://code.visualstudio.com/docs/editor/debugging) is a powerful tool for debugging Python code.
6765

Lines changed: 41 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
---
2-
title: Install
3-
aliases:
4-
- install.html
2+
title: Installation
53
---
64

7-
## Install
8-
9-
`shiny` can be installed via `pip` or `conda`.
5+
Shiny for Python can be installed can be installed via `pip` or `conda`.
106

117
::: {.panel-tabset .panel-pills}
128

@@ -18,13 +14,16 @@ Before installing you may want to upgrade `pip` and install `wheel`:
1814
pip install --upgrade pip wheel
1915
```
2016

17+
2118
Next, install `shiny` from PyPI.
2219

2320
```bash
2421
pip install shiny
2522
```
2623

27-
You may on occasion need to force installation of updated versions of our packages, since they are in development. This can be done with:
24+
25+
You may on occasion need to force installation of updated versions of our packages, since they are in development.
26+
This can be done with:
2827

2928
```bash
3029
pip install --upgrade shiny htmltools
@@ -33,13 +32,17 @@ pip install --upgrade shiny htmltools
3332
::: {.callout-note collapse="true"}
3433
##### Virtual environments
3534

36-
For production apps, we recommend using a virtual environment to manage your dependencies. In this case, you should install `shiny` in your virtual environment scoped to your app, rather than globally. For example, if you are creating an app in a directory called `myapp`, you would create a virtual environment in that directory and install `shiny` there:
35+
For production apps, we recommend using a virtual environment to manage your dependencies.
36+
In this case, you should install `shiny` in your virtual environment scoped to your app, rather than globally.
37+
For example, if you are creating an app in a directory called `myapp`, you would create a virtual environment in that directory and install `shiny` there:
3738

3839
```bash
3940
mkdir myapp
4041
cd myapp
42+
4143
# Create a virtual environment in the .venv subdirectory
4244
python3 -m venv .venv
45+
4346
# Activate the virtual environment
4447
source .venv/bin/activate
4548
```
@@ -50,6 +53,7 @@ source .venv/bin/activate
5053

5154
If you want to install the development versions, you can do so with:
5255

56+
5357
```bash
5458
pip install https://github.com/posit-dev/py-htmltools/tarball/main
5559
pip install https://github.com/posit-dev/py-shiny/tarball/main
@@ -59,46 +63,57 @@ pip install https://github.com/posit-dev/py-shiny/tarball/main
5963

6064
#### conda
6165

62-
If you want to use a conda environment, feel free to create/activate one now:
66+
You can install `shiny` from conda-forge channel.
6367

6468
```bash
65-
# Create a conda environment named 'myenv'
66-
conda create --name myenv
67-
68-
# Activate the virtual environment
69-
conda activate myenv
69+
conda install -c conda-forge shiny
7070
```
7171

72-
Next, install `shiny` from conda-forge.
72+
You may on occasion need to force installation of updated versions of our packages, since they are in development.
73+
This can be done with:
7374

7475
```bash
75-
conda install -c conda-forge shiny
76+
conda update -c conda-forge shiny
7677
```
7778

78-
You may on occasion need to force installation of updated versions of our packages, since they are in development. This can be done with:
79+
::: {.callout-note collapse="true"}
80+
##### Conda Virtual environments
81+
82+
For production apps, we recommend using a virtual environment to manage your dependencies.
83+
Create a conda environment with the code below before installing the `shiny` package.
7984

8085
```bash
81-
conda update -c conda-forge shiny
86+
# Create a conda environment named 'shiny'
87+
conda create --name shiny
88+
89+
# Activate the virtual environment
90+
conda activate shiny
8291
```
92+
:::
8393

8494
:::
8595

86-
### Positron
96+
## Positron {#positron}
8797

8898
We recommend using
8999
[Positron](https://positron.posit.co/),
90100
a next-generation data science focused fork of Visual Studio Code.
101+
91102
If you already have VS Code installed, we still recommend giving Positron a try,
92103
your extensions from VS Code will not conflict with your Positron extensions.
93-
94104
Positron already ships with many Python-focused VS Code extensions from Open VSX,
95105
including Quarto, Jupyter Notebooks, and Pyright.
106+
96107
To get started with Shiny for Python, you will need to install the
97108
[Shiny Extension](https://open-vsx.org/extension/posit/shiny).
109+
This provides, among other things, a play button in the top right corner of your editor that will run your Shiny app.
98110

99-
### Visual Studio Code
111+
![](assets/positron-run.png)
100112

101-
We recommend installing the [Python][vscode-python] and [Shiny][vscode-shiny] extensions for [Visual Studio Code][vscode]. This provides, among other things, a play button in the top right corner of your editor that will run your Shiny app.
113+
## Visual Studio Code
114+
115+
For for [Visual Studio Code][vscode],
116+
you will need the [Python][vscode-python] and [Shiny][vscode-shiny] extensions.
102117

103118
If [type checking is important](https://john-tucker.medium.com/type-checking-python-306ad8339da1) to you, in addition to installing the [Python VSCode extension][vscode-python], you may want to do some additional configuration for a smooth experience with types in Shiny. See the tip below for more details.
104119

@@ -118,7 +133,7 @@ We recommend the following settings in your project's `.vscode/settings.json` fi
118133

119134
or alternatively, if your project keeps these settings in `pyrightconfig.json`:
120135

121-
```default
136+
```json
122137
{
123138
"typeCheckingMode": "basic",
124139
"reportUnusedFunction": "none",
@@ -127,7 +142,7 @@ or alternatively, if your project keeps these settings in `pyrightconfig.json`:
127142

128143
The `basic` type checking mode will flag many potential problems in your code, but it does require an understanding of type hints in Python. This is the mode that is used by the [Shinylive](https://shinylive.io) examples editor. If you want to make even greater use of type checking, you can use `strict` mode:
129144

130-
```default
145+
```json
131146
"python.analysis.typeCheckingMode": "strict"
132147
```
133148

@@ -137,60 +152,14 @@ In the above configuration, we also disable the `reportUnusedFunction` diagnosti
137152

138153
You can also modify these settings on a per-file basis with comments at the top of the file. For example, you might have something like this at the top of your `app.py`:
139154

140-
```default
155+
```python
141156
# pyright: strict
142157
# pyright: reportUnusedFunction=false
143158
```
144159

145160
A full list of configuration settings for Pyright/Pylance is available [here](https://github.com/microsoft/pyright/blob/main/docs/configuration.md).
161+
:::
146162

147163
[vscode]: https://code.visualstudio.com/
148164
[vscode-shiny]: https://marketplace.visualstudio.com/items?itemName=posit.shiny
149165
[vscode-python]: https://marketplace.visualstudio.com/items?itemName=ms-python.python
150-
:::
151-
152-
153-
## Create
154-
155-
The best way to create a new Shiny app is with the `shiny create` command line interface (CLI). This command asks you a series of questions about what kind of app you want to create, and then provides all the boilerplate code you need to get started with a working app.
156-
157-
```bash
158-
shiny create
159-
```
160-
161-
![Running the shiny create command from a terminal](assets/shiny-create.mp4){class="img-shadow"}
162-
163-
::: callout-tip
164-
### Copy/paste examples
165-
166-
If you find an example on this site that you want to run/edit locally, you can use `shiny create --template basic-app -m express` to get a basic app template, and then copy/paste the code from the example into the template.
167-
:::
168-
169-
170-
## Run
171-
172-
Shiny apps can be launched from VSCode or the command line (via `shiny run`).
173-
174-
### VS Code
175-
176-
The best way to run (and develop) Shiny apps is in [Visual Studio Code][vscode] with the [Shiny extension][vscode-shiny]. When a Shiny `app.py` file is being edited, the default behavior of the Run button (circled in red in the screenshot below) becomes "Run Shiny App".
177-
178-
![Visual Studio Code running with the Shiny extension](assets/vscode.png)
179-
180-
This launches a Python process in a dedicated terminal instance, and a captive web browser. This lets you test your app without leaving your editor, and whenever you make changes to your app's source, the preview will update. To preview your app in a full browser, click the icon to the right of the URL bar to launch the app in an external browser.
181-
182-
Next to the Run button is a dropdown menu that lets you "Debug Shiny App". This launches the app in debug mode, which lets you set breakpoints and step through your code. See the [debugging](debug.qmd) section for more information.
183-
184-
### Command line
185-
186-
To run a Shiny app from the command line, use the `shiny run` command. This command takes a single argument, the path to the app's entry point. For example, if your app's entry point is `app.py` in the directory `./app_dir`, you can run it like this:
187-
188-
```bash
189-
shiny run --reload --launch-browser app_dir/app.py
190-
```
191-
192-
This should start your app and also automatically launch a web browser.
193-
194-
The `--reload` flag means that file changes in the current directory tree will cause the Python process to restart and the browser to reload. Update and save changes to `app.py` and then wait a moment for the changes to appear in the browser.
195-
196-
With these two `shiny` commands, you now have a project that you can run in your terminal. You can use any text editor or Python IDE to write Shiny apps, but we've taken special care to ensure a smooth workflow for [Visual Studio Code][vscode]. The next section will help you set up VS Code for Shiny for Python.

0 commit comments

Comments
 (0)