add react extension as template

[jtydhr88]

add react extension (original is from https://github.com/Comfy-Org/ComfyUI-React-Extension-Template) as template, key changes are:

1. move the common files (LICENSE, pyproject.toml, etc) into common folder
2. create a folder named custom-nodes-template to place the original template files
3. create a folder named react-extension-template to place the react template files and adapt with cookiecutter varibles
4. add frontend_type = [no, react, js] for each frontend type
5. need "_copy_without_render": [".tsx", ".ts", "*.yml"] to ignore frontend files during parsing pharse

[christian-byrne]

Copying files directly creates a maintenance burden when the source template changes.

Possible better approaches:

Option 1: Git Submodule (Recommended)

git submodule add https://github.com/Comfy-Org/ComfyUI-React-Extension-Template react-template-source

Then copy/transform files at generation time in hooks/post_gen_project.py

Option 2: Runtime Git Clone
Clone the latest template during cookiecutter execution in pre-generation hooks

Option 3: Template Registry
Reference templates by URL/commit in cookiecutter.json and fetch dynamically

The submodule approach keeps templates synchronized automatically while allowing version pinning and maintaining git attribution.

[christian-byrne]

To clarify - the suggested approaches would still support the processing steps listedn in PR description:

With Git Submodule approach:

• Keep your common/ folder structure for shared files
• Use submodule as source, then in hooks/post_gen_project.py:
  • Copy files from submodule to target locations
  • Apply cookiecutter variable substitutions programmatically
  • Handle the _copy_without_render logic for .tsx/.ts files

Key advantage: When the source React template updates, you just git submodule update and the processing logic handles the new files automatically, rather than manually syncing copied files.

The folder structure and frontend_type logic you've designed is solid - it's just about changing the source of the react template files from static copies to a dynamic reference.

[jtydhr88]

@christian-byrne I tried your option1 - git submodule, but there is one issue, it is unable to use the way
cookiecutter gh:jtydhr88/cookiecutter-comfy-extension --checkout add_react_template
we need to ask developers git clone --recurse-submodules as local template first.
Any ideas?

[christian-byrne]

Thanks for implementing the submodule approach! I see the `--recurse-submodules` requirement is limiting the GitHub usage.

Here are the main options with detailed implementation steps:

Option 1: Download during generation (recommended)

No releases/tags needed - downloads directly from main branch

Implementation:

1. Create hooks/post_gen_project.py:

import os
import shutil
import urllib.request
import zipfile
import tempfile

if "{{ cookiecutter.frontend_type }}" == "react":
    # Download from main branch
    url = "https://github.com/Comfy-Org/ComfyUI-React-Extension-Template/archive/refs/heads/main.zip"
    
    with tempfile.TemporaryDirectory() as temp_dir:
        # Download and extract
        zip_path = os.path.join(temp_dir, "template.zip")
        urllib.request.urlretrieve(url, zip_path)
        
        with zipfile.ZipFile(zip_path, 'r') as zip_ref:
            zip_ref.extractall(temp_dir)
        
        # Copy files to project, replacing cookiecutter variables
        template_dir = os.path.join(temp_dir, "ComfyUI-React-Extension-Template-main")
        # Process and copy files...

2. Remove git submodules from the cookiecutter repo
3. Works immediately with cookiecutter gh:Comfy-Org/cookiecutter-comfy-extension

Benefits:

• Simple implementation
• No submodule complexity
• Always gets latest (or can pin to commit SHA)
• Template repos remain independent

Option 2: Use releases/tags (if version control needed)

Requires setting up releases in template repos first

Implementation:

1. Template repos create releases (e.g., v1.0.0)
2. Modify download URL to use tags:

url = "https://github.com/Comfy-Org/ComfyUI-React-Extension-Template/archive/refs/tags/v1.0.0.zip"

3. Can add version selection to cookiecutter.json

Option 3: Keep submodules but document usage

1. Add clear documentation about local cloning requirement
2. Create a wrapper script for easier usage
3. Less ideal for direct GitHub usage

Option 4: Copy files and make GH workflow to update from template repos:

Template repos can add .github/workflows/update-cookiecutter.yml:

on:
  push:
    branches: [main]
jobs:
  update:
    runs-on: ubuntu-latest
    steps:
      - name: Trigger cookiecutter update
        run:  < /dev/null | 
          # Create PR to cookiecutter repo notifying of changes

Recommendation:

I recommend Option 1 - it's the simplest to implement and maintain while preserving the GitHub usage pattern users expect. No need to set up releases immediately, and template repos stay independent.

Feel free to implement whichever approach works best for your workflow! Happy to help with the implementation details if needed.

[jtydhr88]

@christian-byrne I am still figuring out submodule way, it may work, (using my own repo as testing) I will ping you soon about the results

[christian-byrne]

Nice, sounds good. Just go with what you think is best, I trust!

[jtydhr88]

@christian-byrne I implemented react by git submodule.
here are some key changes I need to mention:

1. added your repo as submodule for this repo

Pre-gen-project:

1. for remote running, for example, cookiecutter gh:comfy-org/cookiecutter-comfy-extension

if not react, just go ahead without git submodule
if react, cookiecutter will cache git repo under userhome/.cookiecutter/cookiecutter-comfy-extension, we need to execute git submodule update --init --recursive on this folder to fetch your repo

2. for local running, I mentioned on readme.

Post-gen-project:

1. Since your repo has some "hardcode", such project name, we need to modify them manually, so you will see a list, files_to_replace = [
   "README.md",
   "ui/package.json",
   ]
   and replacement map replacements = {
   "ComfyUI React Extension Template": "{{cookiecutter.project_name}}",
   "ComfyUI-React-Extension-Template": "{{cookiecutter.project_slug}}",
   "comfyui-example-react-extension": "{{cookiecutter.project_slug}}",
   "Comfy-Org": "{{cookiecutter.github_username}}",
   "MIT": "{{cookiecutter.open_source_license}}",
   '"version": "0.1.0"': '"version": "{{cookiecutter.version}}"',
   }
   I tested on my branch, you could do the same via
   cookiecutter gh:jtydhr88/cookiecutter-comfy-extension --checkout add_react_template
   let me know anything I need to change

[christian-byrne]

I'll test it quickly then merge

[christian-byrne]

Nice, I tested it and it works. Thank you!

Testing steps:

• Merged this PR

• Follow instruction in README of https://github.com/Comfy-Org/cookiecutter-comfy-extension

• Chose the React option

• Saw that the README was setup properly in my custom extension folder

• Followed steps in that README to install/build my extension

• Started ComfyUI and saw the REACT example code was rendered properly: