Shiny Svelte

A project that integrates R Shiny with a modern UI framework using Svelte and ViteJS.

Table of Contents

• About
• Getting Started
• Scripts
• Dependencies
• Development Workflow
• Building for Production

About

This project combines the power of R Shiny for server-side computations with Svelte for creating modern, interactive front-end user interfaces. The development setup is powered by ViteJS for fast bundling and hot-module reloading.

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (v18 or later recommended)
• Yarn (v1.22.x)
• R (v4.0 or later)

Installation

Clone the repository and install dependencies:

# Clone the repository
git clone https://github.com/StellarFX/shiny-svelte.git

# Navigate into the project directory
cd shiny-svelte

# Install dependencies
yarn install

Scripts

Development

• yarn dev Starts both the UI and Shiny server in development mode. This allows you to develop the front-end and back-end simultaneously with hot reloading.

• yarn dev:ui Starts the Vite development server for the Svelte UI.

• yarn dev:shiny Launches the Shiny server by running the global.R script.

Production

• yarn build:ui Builds the Svelte UI for production.

• yarn preview Previews the production build locally.

Code Checks

• yarn check:ui Runs static type checks for the Svelte components and TypeScript files.

Dependencies

Core

• Svelte (UI framework)
• R Shiny (Server-side framework for R)

DevDependencies

• Vite (Bundler)
• TypeScript (Static type-checking)
• Svelte Check (Svelte diagnostics tool)
• Concurrently (Run multiple commands concurrently)
• Cross-Env (Set environment variables)

Development Workflow

1. Start the development servers:

   yarn dev
   

   This will start the UI and Shiny servers in parallel.

2. Open the application in your browser:

   • Shiny App: http://localhost:7000
   • Frontend: http://localhost:5173.

3. Make changes to the Svelte components or R scripts, and the application will reload automatically.

Building for Production

1. Build the UI for production:

   yarn build:ui
   

   The production-ready files will be in the dist directory.

2. Deploy the dist directory alongside your Shiny server for full integration.