Vite

Previous

Scaffold a Dashfy dashboard with Vite, or add Dashfy to an existing Vite app.

Dashfy runs as two processes: the Vite app that renders the dashboard UI, and a separate Dashfy Node server that streams data over Socket.IO.

Use the CLI

Scaffold a ready-to-run Vite project from the terminal.

Existing project

Add Dashfy manually to an app you already created.

Use the CLI

Create a new app

Scaffold the minimal Vite starter. You will be prompted to choose extensions, which Dashfy sets up for you:

pnpm dlx dashfy@latest init -t vite-starter

Prefer the full, pre-configured demo? Use the vite-app template instead:

pnpm dlx dashfy@latest init -t vite-app

Install dependencies

If you scaffolded with --no-install, install dependencies inside the new project directory (cd my-dashfy-app):

pnpm install

Start developing

Run the Vite app and the Dashfy server together:

pnpm run dev:all

Open http://localhost:3000 to see your dashboard. The Dashfy server runs on http://localhost:5001.

Existing project

Install Dashfy

Add the Dashfy runtime packages:

pnpm add @dashfy/server @dashfy/ui

And the dev tooling used to run the server:

pnpm add -D tsx dotenv-cli concurrently

Create the Dashfy server

Add a dashfy.server.ts file at the project root. It loads your dashboard configuration and starts the Dashfy backend:

import { Dashfy } from '@dashfy/server'

const dashfy = new Dashfy()

await dashfy.configureFromFile('./dashfy.config.yml')

await dashfy.start()

Create the dashboard config

Add a dashfy.config.yml file at the project root. This is where you arrange dashboards and widgets:

port: 5001
apis:
  pollInterval: 300000
dashboards:
  - title: Dashfy Dashboard
    columns: 1
    rows: 1
    widgets:
      - extension: dashfy
        widget: Inspector
        x: 0
        y: 0
        columns: 1
        rows: 1

Render the dashboard

Render <Dashfy /> in your app. In src/App.tsx:

import { Dashfy } from '@dashfy/ui'

export const App = () => {
  return <Dashfy />
}

Import the styles and load the themes in src/main.tsx:

import '@dashfy/ui/styles.css'

import { ThemeRegistry } from '@dashfy/ui'
import * as React from 'react'
import { createRoot } from 'react-dom/client'

import { App } from './App'

ThemeRegistry.loadAllThemes()

createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Proxy the config endpoint

The UI reads its configuration from /config. Proxy it to the Dashfy server in vite.config.ts:

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/config': 'http://localhost:5001',
    },
  },
})

Add scripts and environment

Add the dev scripts to package.json so the app and server run together, and create a .env file for extension secrets:

{
  "scripts": {
    "dev": "vite",
    "dev:server": "dotenv -e .env -- tsx watch dashfy.server.ts",
    "dev:all": "concurrently \"pnpm dev:server\" \"pnpm dev\""
  }
}

Add dashfy.json

Add a dashfy.json at the project root so the CLI knows where to apply changes when you run dashfy add:

{
  "$schema": "https://dashfy.dev/schema.json",
  "registries": {},
  "paths": {
    "app": "src/App.tsx",
    "server": "dashfy.server.ts",
    "config": "dashfy.config.yml",
    "env": ".env"
  }
}

Start developing

Run everything together and open http://localhost:3000:

pnpm run dev:all

Add extensions

With dashfy.json in place, add extensions (widgets + data sources) from the registry. The CLI installs the package and sets it up in src/App.tsx, dashfy.server.ts, dashfy.config.yml, and .env:

pnpm dlx dashfy@latest add @dashfy/github

See Extensions and the CLI reference for details.

PreviousTanStack Start
ExtensionsDocsRoadmapSponsorBrandllms.txt
Loading Dashfy...