No installation required

Instant coding demos and workshops using
dev containers and WebR

James Goldie

Data and Digital Storytelling Lead, 360info

I asked AI to brainstorm some talk titles…

(It narrowly avoided plagiarising the R-Ladies Sydney talk, R You With Me)

That sounds like an interesting talk! Here are some possible titles that involve some wordplay:

R You Ready? How to Teach and Share Code with Development Containers and WebR

No Installation Required: How to Run R Code in the Cloud with Development Containers and WebR

Code and Tell: How to Create Interactive and Reproducible R Demos with Development Containers and WebR

R in the Browser: How to Use Development Containers and WebR to Simplify Coding and Teaching

R Made Easy: How to Eliminate Setup Hassles with Development Containers and WebR

Today

Two great tools for workshops and demos

Dev containers + GitHub Codespaces

WebR + quarto-webr + quarto-pyodide

Slides @ ssa2024.talks.jamesgoldie.dev

The bad old days

Long PDF instructions and videos to be done before the workshop

People using old versions of R

Package libraries sitting on network drives

People restricted by corporate firewalls

OS-specific instructions

“I think I broke something…”

Hours of troubleshooting instead of running

Defining the problem

How can we get everybody on a similar environment?

How can we make this environment disposable and re-usable if someone breaks it?

The Cloud

One solution: Posit Cloud

posit.cloud: users can open an R project in the cloud using a link

A screenshot of RStudio running in the browser via Posit Cloud

Posit Cloud

Pros

Familiarity of RStudio

Supports nearly all of RStudio’s native functionality

Can share a project with others
(but not your R session)

Cons

Only file types supported by RStudio

Difficult to move between local and cloud

Tricky to manage several copies of a project

No control over system dependencies
(eg. for spatial libraries)

GitHub Codespaces

Codespaces work like Posit Cloud

They run in the browser

You can start them from a template using a link

GitHub Codespaces

1.  https://codespaces.new                 
2.    /jimjam-slam/quarto-devcontainer-demo
3.    ?quickstart=1

Link to codespaces.new
Add the author and repo
Add this to use default options and make restarting easier

GitHub Codespaces

Edit repo files
(and commit/push if you have rights)

Run terminals

View plots and data structures

Preview Quarto/shiny/etc

Upload/download files

Use VSCode extensions

Codespaces pricing

Every GitHub user gets 120 core-hours free per month
That’s 60 hours/month for the default 2-core machine

So setup for users is just:

Sign up at github.com
Follow the Codespace link
Wait a few minutes for it to set up
This is a good time for some slides

Codespaces can run locally, too

Codespaces run in dev containers. If you have Docker and VSCode installed, you can build and open the container on your computer too

(and use all of your computer’s resources!)

Open the VSCode command palette using and select “Reopen in Container”

Container config: basics

Any GitHub repo can be a Codespace

… but you can configure them by adding a file to your repo:

.devcontainer/devcontainer.json

Building a container config

{
1  "name": "R (rocker/r-ver base)",
2  "image": "ghcr.io/rocker-org/devcontainer/r-ver:4.2"
}

1: Any old name will do
2: The image to build off. Always use a Rocker r-ver, as it works on Apple Silicon + Intel PCs

This is enough to get started! But we can do more…

Container config: features

{
  "name": "R (rocker/r-ver base)",
  "image": "ghcr.io/rocker-org/devcontainer/r-ver:4.2",

3  "features": {

4    "ghcr.io/rocker-org/devcontainer-features/quarto-cli:1": {
            "version": "latest"
        },

5    "ghcr.io/rocker-org/devcontainer-features/apt-packages:1": {
            "packages": "libudunits2-dev,libxtst6,libxt6,libmagick++-dev"
        },

6    "ghcr.io/rocker-org/devcontainer-features/r-packages:1": {
            "packages": "github::rstudio/renv,tidyverse,here,httpgd"
        }

  }
}

3: Features make adding extra tools easy. (Here’s a list.) My favourites include…
4: Adding Quarto. (You can add the "prerelease" version too!)
5: Adding system packages. I’d always add these, but you can add others - for spatial packages, for example.
6: Add R packages using {pak}. You can install from GitHub or a local package too!

Container config: postCreateCommand

{
  "name": "R (rocker/r-ver base)",
  "image": "ghcr.io/rocker-org/devcontainer/r-ver:4.2",

  "features": {

    "ghcr.io/rocker-org/devcontainer-features/quarto-cli:1": {
            "version": "latest"
        },

    "ghcr.io/rocker-org/devcontainer-features/apt-packages:1": {
            "packages": "libudunits2-dev,libxtst6,libxt6,libmagick++-dev"
        },

    "ghcr.io/rocker-org/devcontainer-features/r-packages:1": {
            "packages": "github::rstudio/renv,tidyverse,here,httpgd"
        }

  },

7  "postCreateCommand": "./myscript.sh"
}

7: If you need to do extra things, you can run a postCreateCommand

Container config: customisations

{
  "name": "R (rocker/r-ver base)",
  "image": "ghcr.io/rocker-org/devcontainer/r-ver:4.2",

  "features": {

    "ghcr.io/rocker-org/devcontainer-features/quarto-cli:1": {
            "version": "latest"
        },

    "ghcr.io/rocker-org/devcontainer-features/apt-packages:1": {
            "packages": "libudunits2-dev,libxtst6,libxt6,libmagick++-dev"
        },

    "ghcr.io/rocker-org/devcontainer-features/r-packages:1": {
            "packages": "github::rstudio/renv,tidyverse,here,httpgd"
        }

  },

  "postCreateCommand": "./myscript.sh",

  "customizations": {
8        "vscode": {
            "extensions": ["mechatroner.rainbow-csv"]
        },
9        "codespaces": {
            "openFiles": ["README.md"]
        }
    }
}

8: You can ensure certain VSCode extensions are added
9: You can ensure certain files open when the container does on Codespaces

Remember

The GitHub repo is like a template
Codespaces can hang around for a long time and be restarted
If workshop participants start Codespaces, they’re separate
If you make a new Codespace, it starts fresh — so commit and push files you want to persist across spaces

It’s as private as the repo is

Out of the Cloud

With Codespaces and Posit Cloud
The only thing in your browser is the keystrokes and the output All of the computation happens in the cloud

With Shiny
All of the computation happens in the cloud

With our next option
Everything happens in the browser

WebR

WebR runs a whole copy of R in the browser

It can power lots of experiences

But it’s geared toward web devs

quarto-webr

With quarto-webr, If you can write a Quarto doc, you can run WebR

quarto-webr

If you can write a Quarto doc, you can run WebR

quarto-webr

If you can write a Quarto doc, you can run WebR

Getting started

Next to your Quarto doc, run:

quarto add coatless/quarto-webr

Add to your doc frontmatter:

---
filters:
- webr
---

Change {r} chunks to {webr-r} chunks

```{webr-r}
1:5
```

Adding packages

Two ways:

Add to your frontmatter:

---
webr:
  packages: ["ggplot2"]
---

Or add a chunk with context: setup:

```{webr-r}
#| context: setup
install.packages("ggplot2")

# or from r-universe!
install.packages("collateral",
  repos = c("https://jimjam-slam.r-universe.dev"))
```

(Tip: you can run any code in a setup chunk!)

For Python users, try Pyodide

By the same author, works basically the same as quarto-webr:

quarto add coatless-quarto/pyodide
filters: ["pyodide"]
Use a pyodide-python chunk

Why WebR?

It’s a super focused experience for learners
You can get straight to the new stuff

You get all the tools of a Quarto doc or website
eg. tabsets are great for presenting options

You can make it public or private
Host it like any other Quarto website

Remember

Reader changes don’t persist
Changes reset on page load

It’s just one R session
You don’t get script editing, terminals or other dev environment tools

Next workshop or demo, skip the setup

Dev containers

A disposable, reusable place to run your workshop

Or just for a reproducible analysis

Can configure system dependencies, R version, etc.

Great way to introduce learners to workflow in a modern IDE

We use dev containers for 360info analyses and graphics
Try some out at github.com/360-info

A 360info GitHub repo with the Codespaces menu visible

quarto-webr

A more guided, focused learning experience

Great for totally public demos
Readers can even use it on a phone (You can host it privately if you want though)

Great for coding beginners
Focus on concepts, not an IDE

Thanks! Questions?

@jimjamslam@aus.social

linkedin.com/in/jamesgoldie

james.goldie@360info.org

No installation required

Instant coding demos and workshops usingdev containers and WebR

James Goldie

I asked AI to brainstorm some talk titles…

Today

The bad old days

Defining the problem

The Cloud

One solution: Posit Cloud

Posit Cloud

Pros

Cons

GitHub Codespaces

GitHub Codespaces

GitHub Codespaces

Codespaces pricing

Codespaces can run locally, too

Container config: basics

Building a container config

Container config: features

Container config: postCreateCommand

Container config: customisations

Remember

Out of the Cloud

WebR

quarto-webr

quarto-webr

quarto-webr

Getting started

Adding packages

For Python users, try Pyodide

Why WebR?

Remember

Next workshop or demo, skip the setup

Dev containers

quarto-webr

Thanks! Questions?

Instant coding demos and workshops using
dev containers and WebR