App Boilerplate

App Boilerplate

App Boilerplate

The App Boilerplate is a template package designed to accelerate the creation of new FlowState applications. It provides a complete, working application structure with pre-configured routing, layout components, plugin registration, and standalone development support.

Overview

This template serves as the starting point for all new FlowState micro-applications. Rather than starting from scratch, developers copy this package and customize it to create new apps with consistent patterns and architecture.

Key Features

  • Complete App Structure: Pre-configured routing with React Router v6
  • FlowState Framework Integration: Uses FlowstateAppContainer and FlowstateAppLayout
  • Plugin Architecture: Ready-to-use plugin registration for the host container
  • Dual-Mode Support: Works both standalone (for development) and embedded (in host app)
  • Shared Components: Header and Sidebar using framework components
  • Tailwind CSS: Pre-configured styling with utility classes
  • Development Server: Vite-powered dev server with HMR
  • Build System: tsup for efficient bundling with ESM and CJS outputs

Target Users

User TypePrimary Use Cases
FlowState DevelopersCreate new micro-applications from this template
App MaintainersReference structure for updating existing apps
ContributorsUnderstand app architecture patterns

Getting Started

Creating a New App

  1. Use the FlowState CLI to scaffold a new app:
flowstate create-app your-app --verbose

This creates packages/apps/flowstate-app-your-app/ with all the boilerplate structure and configuration.

  1. Rename boilerplate references:
grep -r "Boilerplate\|boilerplate" packages/apps/flowstate-app-your-app/

Update all files with "Boilerplate" to use your app name.

  1. Customize the application:

    • Update src/App.tsx with your routes
    • Modify src/components/Sidebar.tsx with your navigation
    • Replace src/pages/HomePage.tsx with your landing page
    • Choose an appropriate icon from Lucide

  2. Install and run:

yarn install
cd packages/apps/flowstate-app-your-app
yarn dev

See Getting Started for the complete integration guide including Next.js and Electron container setup.

Development Mode

Run the app standalone for development:

yarn dev

This starts a Vite dev server at http://localhost:3210 with hot module replacement.

Building for Production

yarn build

Outputs to dist/ with ESM, CJS, and TypeScript declarations.

App Identity

PropertyValue
Package@epicdm/flowstate-app-boilerplate
Base Path/apps/boilerplate
Dev Port3210
Iconbox
Color#64748B
Previous
Changelog
Next
Getting Started