Skip to content

wch/create-shiny-react-app

Repository files navigation

create-shiny-react-app

A CLI tool to quickly create new shiny-react applications with pre-configured templates. Build modern, interactive web applications that combine React's component system with Shiny's reactive backend capabilities.

Quick Start

The fastest way to create a new shiny-react application is with npx (no installation required):

# Create a new app in myapp/
npx create-shiny-react-app myapp
# You will be asked which template and which backend (R or Python) to use

cd myapp
npm install
npm run dev  # Builds frontend and starts Shiny app

The npm run dev command will build the frontend and start the Shiny app automatically with hot-reload. By default it will use port 8000.

Open http://localhost:8000 in your browser to see your app.

You can change the port by setting the PORT environment variable:

PORT=8001 npm run dev

Some other ways of building the frontend and running the app:

# Build frontend once (without launching Shiny app)
npm run build

# Build frontend and auto-rebuild on changes (without launching Shiny app)
npm run watch

# Start Shiny app manually (in separate terminal)
# For R backend
R -e "options(shiny.autoreload = TRUE); shiny::runApp('r/app.R', port=8000)"

# For Python backend
shiny run py/app.py --port 8000 --reload

Templates

Click on the template name to view its code and README.md file.

  • 1-basic:

    • This is the most basic template, showing how to use shiny-react with R and Python backends.
  • 2-scaffold:

    • This template shows how to use shiny-react with shadcn/ui and tailwindcss.
    • It can include a CLAUDE.md file for AI coding assistance.
    • It also has editor and linter configuration files for a streamlined development experience.

Installation

Option 1: Use with npx

No installation required. Always uses the latest version:

npx create-shiny-react-app my-app

Option 2: Global Installation

Install globally for repeated use:

npm install -g create-shiny-react-app
create-shiny-react-app my-app

Important: If you have the CLI installed globally, run npm update -g create-shiny-react-app periodically to get the latest templates and features.

Interactive Setup

When you run the command, the CLI will interactively prompt you to:

  1. Choose a template - Select from the available example templates
  2. Select backend - Choose R, Python, or both
  3. Include CLAUDE.md - Optionally add comprehensive documentation for LLM coding assistance

Project Structure

Created applications follow this structure:

my-app/
├── package.json       # Build configuration and dependencies
├── tsconfig.json      # TypeScript configuration
├── srcts/             # React TypeScript source code
│   ├── main.tsx       # React app entry point
│   └── components/    # React components using shiny-react hooks
├── r/                 # R Shiny backend (if selected)
│   ├── app.R          # Main R Shiny application
│   ├── shinyreact.R   # R functions for shiny-react
│   └── www/           # Built JavaScript/CSS output (generated)
└── py/                # Python Shiny backend (if selected)
    ├── app.py         # Main Python Shiny application
    ├── shinyreact.py  # Python functions for shiny-react
    └── www/           # Built JavaScript/CSS output (generated)

Available npm Scripts

Generated applications include the following npm scripts:

  • npm run dev - Start development - Builds frontend and starts Shiny server with hot-reload
  • npm run build - Production build - Build frontend once (includes TypeScript checking)
  • npm run watch - Development build - Watch frontend files for changes and rebuild automatically
  • npm run shinyapp - Start Shiny server - Start only the Shiny backend server
  • npm run build-prod - Optimized build - Production build with optimization (advanced templates)
  • npm run clean - Clean build - Remove all generated files

Port Configuration

You can configure the port for the Shiny server:

# Use custom port (default is 8000)
PORT=3000 npm run dev
PORT=3000 npm run shinyapp

Requirements

  • Node.js 18+
  • For R backend: R with Shiny package (install.packages("shiny"))
  • For Python backend: Python with shiny package (pip install shiny)

Related Projects

License

MIT

About

NPM package for creating shiny-react applications

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors