Welcome to ReactEdge

1. Clone the repository

git clone https://github.com/digitalrisedorset/ready ReactEdge
cd ReactEdge

---

2. Install mise

curl https://mise.run | sh

Activate it (Bash):

echo 'eval "$(~/.local/bin/mise activate bash)"' >> ~/.bashrc
source ~/.bashrc

Verify:

mise --version

---

3. Install the ReactEdge toolchain

mise install

This installs the required Node.js and Python versions.

---

4. Install ReactEdge dependencies

Make the helper scripts executable:

chmod u+x ./launcher/scripts/*.sh

Install all project dependencies:

mise run platform-install

---

5. Configure ReactEdge

cp .env.sample .env
mkdir -p workspace
cp -R workspace.sample/* workspace/

Generate the local configuration:

mise run configure

The configuration wizard will create:

• .env
• deployment-orchestrator/.env.dev
• widgets/*/public/reactedge-runtime.json

---

6. Launch a widget locally

For example:

mise run widget-dev -- usp

or:

mise run widget-dev -- banner

---

Magento Integration

Change to your Magento or Mage-OS installation directory:

cd /path/to/magento

Update composer.json:

"minimum-stability": "dev"

Install the ReactEdge bridge:

composer require reactedge/widgetbridgelight

Enable the module:

bin/magento module:enable ReactEdge_WidgetBridge

bin/magento setup:upgrade

bin/magento cache:flush

---

Verify the installation

Check that the module is installed:

bin/magento module:status ReactEdge_WidgetBridge

Inspect widget configuration:

bin/magento config:show reactedge/usp/enabled
bin/magento config:show reactedge/banner/enabled
bin/magento config:show reactedge/productgallery/enabled
bin/magento config:show reactedge/storefinder/enabled
bin/magento config:show reactedge/megamenu/enabled
bin/magento config:show reactedge/googlereviews/enabled

---

Configure integrations

Configure Google integrations if required:

bin/magento config:set reactedge/google_maps/api_key YOUR_API_KEY

bin/magento config:set reactedge/google_maps/place_id YOUR_PLACE_ID

Enable server-side rendering:

bin/magento config:set reactedge/widgets_ssr/enabled 1

---

Enable widgets

Enable the widgets you want to use:

bin/magento config:set reactedge/usp/enabled 1

bin/magento config:set reactedge/banner/enabled 1

bin/magento config:set reactedge/productgallery/enabled 1

Flush the cache:

bin/magento cache:flush

---

Customise widget placement

Copy the starter layout XML files into the active Magento theme and adjust widget placement as required.

---

Deploy widgets

Build and publish the widgets:

mise run widgets-deploy

Automatic Magento configuration (Docker only)

When DOCKER_USED=1 in .env, widgets-deploy automatically configures Magento after deployment.

The deployment script will:

• configure the Google Maps API key
• configure the Google Place ID
• enable server-side rendering
• enable the selected widgets
• flush the Magento cache

The default implementation assumes a Docker development environment using the mageos_php container.

To disable automatic Magento configuration, set:

DOCKER_USED=0

Creating a widget with ChatGPT

To scaffold a new widget with ChatGPT, start a fresh conversation and attach:

• widget-spec.md
• the shared packages/widget-build/shared-resources/vite_project folder as a zip archive

Then use the following prompt:

Create a widget called widget01.

Follow widget-spec.md exactly.