diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml deleted file mode 100644 index b3fca45..0000000 --- a/.github/workflows/publish.yml +++ /dev/null @@ -1,19 +0,0 @@ -name: Publish to ComfyUI Registry - -on: - push: - paths: - - 'pyproject.toml' - branches: - - main - -jobs: - publish: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: '18' - - run: npm install -g @comfy-org/cli - - run: comfy node publish --token ${{ secrets.REGISTRY_ACCESS_TOKEN }} \ No newline at end of file diff --git a/.github/workflows/react-build.yml b/.github/workflows/react-build.yml new file mode 100644 index 0000000..0ba5ecf --- /dev/null +++ b/.github/workflows/react-build.yml @@ -0,0 +1,40 @@ +name: React Extension Build + Publish to Comfy Registry + +on: + push: + branches: [ "main" ] + paths: + - 'pyproject.toml' + +jobs: + build: + runs-on: ubuntu-latest + if: ${{ github.repository_owner == 'Comfy-Org' }} + + strategy: + matrix: + node-version: [18.x] + + steps: + - uses: actions/checkout@v4 + + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + + - name: Install dependencies + run: | + cd ui + npm install + + - name: Build React extension + run: | + cd ui + npm run build + + - name: Publish Custom Node + uses: Comfy-Org/publish-node-action@main + with: + personal_access_token: ${{ secrets.REGISTRY_ACCESS_TOKEN }} + skip_checkout: 'true' \ No newline at end of file diff --git a/.gitignore b/.gitignore index c5555c9..64a7b4e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ node_modules/ __pycache__/ -# don't ignore dist otherwise the transpiled JS won't be shipped to people who download -# dist/ +dist/ .DS_Store .env .env.local diff --git a/README.md b/README.md index 3e734fc..d8b0be0 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,18 @@ A minimal template for creating React/TypeScript frontend extensions for ComfyUI ## Installation +### From ComfyUI Registry (Recommended) + +The easiest way to install this extension is through the ComfyUI Manager: + +1. Open ComfyUI and go to the Manager +2. Search for "React Extension Template" +3. Click Install + +### Manual Installation + +If you want to install directly from GitHub for development purposes: + ```bash # Go to your ComfyUI custom_nodes directory cd ComfyUI/custom_nodes @@ -33,6 +45,8 @@ npm run build # Restart ComfyUI ``` +⚠️ **Important**: When installing manually from GitHub, you **must** run `npm run build` in the `ui/` directory before the extension will work. The extension requires the compiled React code in the `dist/` folder to function properly in ComfyUI. + ## Usage This template includes a simple example extension that displays workflow node statistics. After installation: @@ -84,7 +98,7 @@ For comprehensive documentation on all available APIs, see the [ComfyUI JavaScri ComfyUI-React-Extension-Template/ ├── .github/ # GitHub configurations │ └── workflows/ -│ └── publish.yml # Automatic publishing workflow +│ └── react-build.yml # Automatic build and publishing workflow ├── __init__.py # Python entry point for ComfyUI integration ├── pyproject.toml # Project metadata for ComfyUI Registry ├── dist/ # Built extension files (generated) @@ -148,6 +162,7 @@ npm install -D @comfyorg/comfyui-frontend-types [tool.comfy] PublisherId = "your_publisher_id" # Your Registry publisher ID DisplayName = "Your Extension Display Name" + includes = ["dist/"] # Include built React code (normally ignored by .gitignore) ``` 3. Publish your extension: @@ -166,9 +181,14 @@ This template includes a GitHub Actions workflow that automatically publishes to 3. Commit and push an update to pyproject.toml (e.g., increment the version number) 4. The GitHub Action will automatically run and publish your extension -The workflow configuration is already set up in `.github/workflows/publish.yml` and will trigger when: -- The `pyproject.toml` file is modified -- The changes are pushed to the `main` branch +The workflow configuration is set up in `.github/workflows/react-build.yml` and will trigger when: +- The `pyproject.toml` file is modified and pushed to the `main` branch + +The workflow automatically: +1. Sets up Node.js environment +2. Installs dependencies (`npm install`) +3. Builds the React extension (`npm run build`) +4. Publishes the extension to the ComfyUI Registry ## Unit Testing diff --git a/pyproject.toml b/pyproject.toml index 24874e0..98d6db9 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -12,4 +12,5 @@ Repository = "https://github.com/Comfy-Org/ComfyUI-React-Extension-Template" [tool.comfy] PublisherId = "your_publisher_id" # Change this to your actual publisher ID DisplayName = "ComfyUI React Extension Template" -Icon = "" \ No newline at end of file +Icon = "" +includes = ["dist/"] \ No newline at end of file