- TypeScript 94.8%
- MDX 2.6%
- JavaScript 2.1%
- CSS 0.5%
| .claude/skills | ||
| .github/workflows | ||
| .husky | ||
| .storybook | ||
| .vscode | ||
| app/api/auth/github | ||
| components | ||
| docs | ||
| locales | ||
| pages | ||
| public | ||
| scripts | ||
| src | ||
| styles | ||
| utils | ||
| .env | ||
| .eslintignore | ||
| .eslintrc.json | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc | ||
| biome.json | ||
| bun.lock | ||
| CLAUDE.md | ||
| cors.json | ||
| LICENSE | ||
| middleware.ts | ||
| next.config.ts | ||
| orval.config.ts | ||
| package.json | ||
| postcss.config.cjs | ||
| README.md | ||
| sflow.d.ts | ||
| tailwind.config.cjs | ||
| tsconfig.json | ||
| vercel.json | ||
| vitest.config.ts | ||
Comfy Registry Frontend
The frontend React App for Comfy Registry.
Registry React Frontend Github
Registry CLI Github
Getting Started
Set up IDE
VSCode
Install Prettier + Eslint extensions.
.vscode/settings.json is set up in the workspace to lint + format code on save.
Local Development
Run the development server
git checkout dev
curl -fsSL https://bun.sh/install | bash
bun install
bun dev
Open http://localhost:3000 with your browser to see the result.
GitHub OAuth App Setup
For features that require GitHub authentication (like node claiming), you'll need to set up a GitHub OAuth App. See docs/github-app.md for detailed setup instructions.
Storybook
We use Storybook for component development and documentation. To run Storybook:
pnpm run storybook
Open http://localhost:6006 to view the component library. Storybook allows you to:
- View and interact with components in isolation
- Test different component states and variations
- See documentation for components
- Develop UI components in isolation without running the full app
Visual Testing with Chromatic
We use Chromatic for visual testing and UI reviews:
# Make sure to set your project token
export CHROMATIC_PROJECT_TOKEN=your_token
pnpm run chromatic
See docs/chromatic-setup.md for more details on our Chromatic CI/CD integration.
Workflows & Automation
Update PR Branches
We provide a GitHub Actions workflow to automatically update open PR branches with the latest changes from main. This is useful for:
- Keeping long-running PRs up-to-date
- Reducing merge conflicts
- Repository maintenance
See docs/update-pr-branches.md for detailed usage instructions.
Generate Code Stub based on OpenAPI Spec
Start the dev server.
Currently, the Orval spec is in orval.config.js. It points to the OpenAPI spec in your localhost server. This can be changed to staging or prod.
npx orval
This generates react queries that you can use in your Components.
Deployments
Production
Make a PR to the main branch. Once merged, Vercel will deploy to https://comfyregistry.org
CORS
To enable CORS on the google cloud storage bucket, reference the cors.json file. More info here.
gcloud storage buckets update gs://comfy-registry --cors-file=cors.json