shiny-react-example

Example of a Shiny app with a React front-end

Demo

Overview

This is a Shiny web app built in R that replaces the default UI with a custom UI written in JavaScript using React.

Featuring:

• The Old Faithful Geyser Data demo app recreated in React with React Bootstrap for a familiar Shiny-like UI, and Recharts for interactive charts
• Shiny HTML templates to replace Shiny's default page (Bootstrap, jQuery, etc.) with a custom one
• @posit/shiny-react to simplify communication between the React app and the Shiny server
• Vite for building JavaScript and providing auto-reloading for JavaScript files during development
• Prettier for JavaScript code formatting (recommend installing the Prettier extension in Positron, VS Code, etc.)
• ESLint for JavaScript code linting (recommend installing the ESLint extension in Positron, VS Code, etc.)

Prerequisites

• R with shiny installed
• Node.js

Installation

Clone the repository:

git clone https://github.com/glin/shiny-react-example

Then, install the JavaScript dependencies:

cd shiny-react-example
npm install

Development

1. Build the React app with auto-reloading on UI file changes (refresh your browser to see changes):

   npm run watch

2. Run the Shiny app with auto-reloading on R file changes.

   In your R console:

   source("dev.R")

   Or at a terminal (runs the same dev.R script):

   npm start

3. Open http://localhost:3000 in your browser.

Production

1. Build the React app. Frontend assets will be placed in dist/:

   npm run build

2. Deploy the Shiny app with the dist/ directory included.