Template project for React web apps on the Availity Portal using @availity/workflow-vite and TypeScript
This template uses @availity/workflow-vite, which is powered by Vite and Vitest under the hood. Unlike the webpack-based @availity/workflow, this provides:
- ⚡ Instant dev server startup via Vite's native ESM support
- 🔥 Lightning-fast HMR (Hot Module Replacement)
- 📦 Optimized production builds using Rollup
- 🧪 Vitest for unit testing (Vite-native, Jest-compatible API)
The av CLI wraps Vite's dev server, build, and test tooling with Availity-specific defaults (proxying, mock data, deployment configuration).
- Node.js 22+ or 24+
- Yarn 4+
yarn
yarn start| Script | Description |
|---|---|
yarn start |
Start the development server |
yarn build |
Build for development |
yarn build:production |
Build for production |
yarn build:staging |
Build for staging |
yarn test |
Run tests (Vitest) |
yarn test:watch |
Run tests in watch mode |
yarn test:coverage |
Run tests with coverage |
yarn lint |
Lint source files (ESLint) |
yarn format |
Format files (Prettier) |
yarn format:check |
Check formatting |
project/
├── app/
│ ├── index.tsx # App entry point
│ ├── index.html # HTML template
│ ├── App.tsx # Root component with routing
│ ├── components/ # Shared components
│ ├── Request/ # Request page feature
│ └── Response/ # Response page feature
├── config/
│ └── workflow.js # Workflow configuration
└── data/ # Mock API data for local development
| File | Purpose |
|---|---|
project/config/workflow.js |
Dev server, Vite, and build configuration |
eslint.config.js |
ESLint flat config |
tsconfig.json |
TypeScript configuration (type-checking only) |
This project uses ESM ("type": "module" in package.json). All config files use import/export syntax.
- Build/Dev: @availity/workflow-vite (Vite + Vitest)
- Components: @availity/element (MUI-based design system)
- Data Fetching: @tanstack/react-query
- Forms: react-hook-form + @availity/yup
- Routing: react-router-dom
- Testing: Vitest + @testing-library/react
- Linting: eslint-config-availity (flat config)
This template uses @tanstack/react-query for server state and data fetching.
import { useQuery } from '@tanstack/react-query';
import AvUsersApi from '@availity/api-axios';
const useCurrentUser = () =>
useQuery({
queryKey: ['user'],
queryFn: () => AvUsersApi.me(),
});
const Component = () => {
const { data: user, isLoading } = useCurrentUser();
if (isLoading) return null;
return <p>{user ? user.name : 'A user has no name'}</p>;
};The
useCurrentUserhook is available in @availity/hooks
import { useMutation } from '@tanstack/react-query';
const Component = () => {
const { mutate, isPending, error } = useMutation({
mutationFn: (variables) => updateUserInfo(variables),
});
return <button onClick={() => mutate({ active: false })}>Disable User</button>;
};