Vite + React Single Directory Component (SDC) Generator

This module provides a simple way to generate Vite + React Single Directory Components.

1. Execute drush generate sdc-vite-react.
2. From the module or theme, execute npm install.
3. Execute npm run build.

You're all set!

Requirements

Drupal 10.3+

Installation

Install it as you would normally install a contributed Drupal module.

drush pm:install vite_react_generator

Usage

drush generate single-directory-component-vite-react
# or
drush generate sdc-vite-react

Follow the prompts, and you are all set.

DIY Demo

You can try this out with Drupal 10.3+ or Drupal 11. This will create a clean Drupal running in Docker via ddev with Drush, vite_react_generator, and a demo module called my_react_app and a Single Directory Component called my_react_sdc.

ddev config --project-type drupal --create-docroot --docroot web
ddev start
ddev composer create drupal/recommended-project -y

ddev composer require --dev drush/drush
ddev drush site:install --account-name=admin --account-pass=admin -y

ddev composer require 'drupal/vite_react_generator:^1.0'
ddev drush pm:install vite_react_generator

# Create a module with the machine name `my_react_app`
mkdir -p web/modules/custom
ddev drush generate module 
ddev drush pm:install my_react_app

# Use the `my_react_app` module and create a component with the machine name `my_react_sdc`.
ddev drush generate sdc-vite-react

cd web/modules/custom/my_react_app

# Notice that interface translations have been configured.
cat my_react_app.info.yml

npm install

# Type "o + <ENTER>" after it opens the demo in your browser.
npm run dev

npm run build

# Notice your React Single Directory Component.
ls -lR components

# Notice that a translation template has been generated.
ls -l translations
cat translations/my_react_app.pot