Introduce xb-ui-dev command React app development (#19)

Author: balintbrews

README.md

@@ -9,8 +9,13 @@ This creates and configures a DDEV project for local Drupal [Experience Builder]
 - [Usage](#usage)
 - [Updating](#updating)
 - [Cypress](#cypress)
-- [Support & community](#support--community)
-- [FAQ & known issues](#faq--known-issues)
+  - [Setup](#setup)
+  - [Usage](#usage-1)
+- [Support \& community](#support--community)
+- [FAQ \& known issues](#faq--known-issues)
+  - [Can I use Cypress on Linux or Windows?](#can-i-use-cypress-on-linux-or-windows)
+  - [What if Cypress fails to start?](#what-if-cypress-fails-to-start)
+  - [What if I get an HTTPS error?](#what-if-i-get-an-https-error)
 
 ## Requirements
 
@@ -49,6 +54,12 @@ Any time you update the Experience Builder module or modify its front-end code,
 ddev ui-build
 ```
 
+When developing the React app, make sure to use the HTTPS URL of your DDEV project, then run:
+
+```shell
+ddev xb-ui-dev
+```
+
 To completely reinstall Drupal and the Experience Builder module, run:
 
 ```shell

commands/web/xb-ui-build

@@ -7,5 +7,6 @@
 
 cd "$DDEV_COMPOSER_ROOT/$DDEV_DOCROOT/modules/contrib/experience_builder/ui" || exit 1
 
+drush pm:uninstall xb_vite -y > /dev/null 2>&1 || :
 npm ci
 npm run build

commands/web/xb-ui-dev

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+## #ddev-generated
+## Description: Install dependencies and run Experience Builder's UI app development server.
+## Example: ddev xb-ui-dev
+## Aliases: ui-dev,dev
+
+cd "$DDEV_COMPOSER_ROOT/$DDEV_DOCROOT/modules/contrib/experience_builder/ui" || exit 1
+
+drush pm:install xb_vite -y > /dev/null 2>&1 || :
+npm install
+npm run drupaldev -- --host

config.drupal-xb-dev.yaml

@@ -5,7 +5,7 @@ web_environment:
   - DB_URL=sqlite://web/sites/default/files/db.sqlite
   - DISPLAY=host.docker.internal:0
   - DRUPAL_TEST_DB_URL=sqlite://web/sites/default/files/db.sqlite
-  - VITE_SERVER_ORIGIN=http://localhost:5173
+  - VITE_SERVER_ORIGIN=https://${DDEV_HOSTNAME}:5174
 webimage_extra_packages:
   - libasound2
   - libgbm-dev
@@ -17,3 +17,8 @@ webimage_extra_packages:
   - libxtst6
   - xauth
   - xvfb
+web_extra_exposed_ports:
+  - name: vite-dev-server
+    container_port: 5173
+    http_port: 5173
+    https_port: 5174

install.yaml

@@ -17,6 +17,7 @@ project_files:
   - commands/web/xb-site-install
   - commands/web/xb-stylelint
   - commands/web/xb-ui-build
+  - commands/web/xb-ui-dev
   - config.drupal-xb-dev.yaml
 
 post_install_actions: