-
Notifications
You must be signed in to change notification settings - Fork 3
/
webr.qmd
132 lines (107 loc) · 6.22 KB
/
webr.qmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
---
title: "Exercise: Create a website with Quarto, WebR (or Pyodide), and Github Pages to use R (or Python) on your smartphone or tablet"
format: html
lang: en
---
# Description
In this exercise you can practice how to:
- Host a Quarto website with Github Pages
- Use WebR in a Quarto document that allows you to run R in your browser
- **Optional.** Use Pyodide to run Python
The final result of the exercise is a website on which you can run R (or Python) directly in your browser, without having it installed on the device like your smartphone or tablet.
You can just follow our step-by-step instructions or have a look at the relevant documentation we link to in the blue boxes.
# Final result
The final result of the exercise using webR could look something like this:^[This example only showcases R in the browser with webR, but the following sections also describe how to run Python with Pyodide.]
- [Website](https://lmu-osc.github.io/mywebr/)
- [Code](https://github.com/lmu-osc/mywebr)
# Step by step instructions
1. Log into your Github account and create a new **public** Github repository
::: {.callout-note}
- If you need a refresher on how to work with Git and Github you can checkout the following two self-paced online tutorials:
- [Introduction to version Control in R with RStudio, Git, and Github](https://lmu-osc.github.io/Introduction-RStudio-Git-GitHub/)
- [Collaborative coding with GitHub and RStudio](https://lmu-osc.github.io/Collaborative-RStudio-GitHub/)
- You can find a screenshot of how to create a new repository [here](https://lmu-osc.github.io/Introduction-RStudio-Git-GitHub/github_sync.html)
:::
2. Create a new project in RStudio
::: {.callout-note}
You can find a screenshot of how to create a new project [here](https://lmu-osc.github.io/Collaborative-RStudio-GitHub/clone.html)
:::
- Click *File* > *New Project* > *Version control* > *Git*
- Go to your Github repository, click on *Code* and copy the *HTTPS URL* to the clipboard
- In RStudio, insert the URL into the *Repository URL* field
- Optional:
- You can leave the *Project directory* field blank to adopt the name of the Github repository
- You can click on *Open in new session* to avoid closing your original RStudio session
- Click *Browse* to select where to save the project on your computer
- Click *Create Project*
3. Download the *webR* Quarto extension (needed to run R in the browser)
::: {.callout-note}
You can find the *quarto-webr* documentation [here](https://quarto-webr.thecoatlessprofessor.com/)
:::
- Open the terminal in RStudio
- Install the Quarto extension with the following code:
```sh
quarto add coatless/quarto-webr
```
- Answer *Yes* that you trust the author
- Answer *Yes* that you want to install the webR filter
- Answer *Yes* if you now want to open the *quarto-webr* documentation in your default browser (you do not have to)
- You should now have a folder `_extensions/coatless/webr` in your project directory
4. **Optional.** Download the *Pyodide* Quarto extension (needed to run Python in the browser)
::: {.callout-note}
You can find the *quarto-pyodide* documentation [here](https://quarto.thecoatlessprofessor.com/pyodide/)
:::
- Open the terminal in RStudio
- Install the Quarto extension with the following code:
```sh
quarto add coatless-quarto/pyodide
```
- Answer *Yes* that you trust the author
- Answer *Yes* that you want to install the pyodide filter
- Answer *Yes* if you now want to open the *pyodide* documentation in your default browser (you do not have to)
- You should now have a folder `_extensions/coatless-quarto/pyodide` in your project directory
5. Create a new Quarto document, named e.g. `mywebr.qmd`
- In RStudio, click *File* > *New File* > *Quarto Document*
- Add the following options to the YAML header (only add the filter relevant to you):
```yml
format: html
engine: knitr
filters:
- webr
- pyodide
```
- Interactive R chunks must be formatted like this:
````qmd
```{{webr-r}}
```
````
- **Optional.** Interactive Python chunks must be formatted like this:
````qmd
```{{pyodide-python}}
```
````
- Declare the language of the document by setting e.g. `lang: en` in the YAML header (see the [Quarto documentation on document language](https://quarto.org/docs/authoring/language.html) for more information)
- Add some text or other things you want to see on your Quarto website
6. Check that the file `mywebr.qmd` renders successfully locally. In RStudio you can just click the *Render* button
::: {.callout-note}
You might face the issue that the status remains at _Loading..._ because your browser restricts certain features of local files. In this case, you could spin up a simple web server by running one of the following, go to [`http://localhost:8000/`](http://localhost:8000/) and click on `mywebr.html`:
```sh
Rscript -e "servr::httd(port = 8000)"
python -m http.server 8000
```
:::
7. When you are finished with your Quarto document and everything renders correctly, you can commit the file `mywebr.qmd` and the folder `_extensions/coatless` to your git repository and push your changes to your Github project (this step is recommended but optional)
::: {.callout-note}
- You can find a screenshot on how to commit changes in RStudio [here](https://lmu-osc.github.io/Introduction-RStudio-Git-GitHub/commit.html)
- You can find a screenshot on hot to push commits in RStudio [here](https://lmu-osc.github.io/Collaborative-RStudio-GitHub/push.html)
:::
8. Upload the website to Github pages
::: {.callout-note}
You can find the documentation on how to publish Quarto websites on Github pages [here](https://quarto.org/docs/publishing/github-pages.html)
:::
- Publish your website (based on the file `mywebr.qmd`) by running the following command in the terminal within RStudio. This will commit the rendered website to a Github branch named `gh-pages`:
```sh
quarto publish gh-pages mywebr.qmd
```
- Answer *Yes* that you want to upload the website to Github Pages
- When ready, a browser window should open automatically