Template project for React web apps on the Availity Portal using @availity/workflow
- Node.js 22+
- 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 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) |
project/
├── app/
│ ├── index.jsx # App entry point
│ ├── App.jsx # Root component with routing
│ ├── components/ # Shared components
│ ├── context/ # React Context providers
│ └── hooks/ # Custom hooks
└── config/
└── workflow.js # Workflow configuration
| File | Purpose |
|---|---|
project/config/workflow.js |
Dev server, webpack, 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 (webpack + esbuild)
- Components: @availity/element (MUI-based design system)
- Data Fetching: @tanstack/react-query
- Routing: react-router-dom
- Testing: Vitest + @testing-library/react
- Linting: eslint-config-availity (flat config)
This template uses React Context for state and @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>;
};