Exercise: Create a website with Quarto, WebR (or Pyodide), and Github Pages to use R (or Python) on your smartphone or tablet

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:1

Step by step instructions

  1. Log into your Github account and create a new public Github repository

    Note

  2. Create a new project in RStudio

    Note

    You can find a screenshot of how to create a new project here

    • 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)

    Note

    You can find the quarto-webr documentation here

    • Open the terminal in RStudio

    • Install the Quarto extension with the following code:

      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)

    Note

    You can find the quarto-pyodide documentation here

    • Open the terminal in RStudio

    • Install the Quarto extension with the following code:

      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):

      format: html
engine: knitr
filters:
  - webr
  - pyodide

    • Interactive R chunks must be formatted like this:

      ```{webr-r}
```

    • Optional. Interactive Python chunks must be formatted like this:

      ```{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 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

    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/ and click on mywebr.html:

    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)

    Note
    • You can find a screenshot on how to commit changes in RStudio here
    • You can find a screenshot on hot to push commits in RStudio here

  8. Upload the website to Github pages

    Note

    You can find the documentation on how to publish Quarto websites on Github pages here

    • 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:

      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

Footnotes

  1. This example only showcases R in the browser with webR, but the following sections also describe how to run Python with Pyodide.↩︎