# genaker/react-luma

`composer require genaker/react-luma`

Canonical URL: https://packagento.com/genaker/react-luma

## At a glance

- **Vendor**: genaker (https://packagento.com/genaker.md)
- **Latest version**: 17.151 — released 2026-01-06
- **Pricing**: Free
- **Package type**: Magento 2 module
- **Status**: active, accepting new buyers

## Installation

Packagento is licence-gated, so even free packages need a licence on a project before Composer can resolve them.

1. **Sign in or create an account** at https://packagento.com/customer/account/.

2. **Add the package to your account.** Open https://packagento.com/genaker/react-luma and complete the free checkout. A licence is minted automatically.

3. **Create or pick a project, then activate the licence on it.**
   - Projects represent the Magento installs you deploy to. Manage them at https://packagento.com/projects/.
   - Activate the new licence on the project you'll deploy this package to. Activation is what generates the Composer credentials scoped to that project.

4. **Add the project credentials to your Magento codebase.**

   Grab the project's public + private key from https://packagento.com/projects/ (open the project, then its Credentials tab), and add them to `auth.json`:

   ```json
   {
     "http-basic": {
       "packagento.com": {
         "username": "ppk_live_...",
         "password": "psk_live_..."
       }
     }
   }
   ```

   Add the Packagento Composer repository to `composer.json`:

   ```json
   {
     "repositories": [
       { "type": "composer", "url": "https://packagento.com" }
     ]
   }
   ```

5. **Install and apply.**

   ```bash
   composer require genaker/react-luma:*
   bin/magento setup:upgrade
   bin/magento setup:di:compile
   bin/magento cache:flush
   ```

## README

The React-Luma Module is a Faster and Free Open-Source Magento 2 Luma or another Theme Optimiser and Hyva Theme Alternative. Actually, you don’t even need to change the Theme. It works as a composer module to improve your existing theme without re-platforming to Hyva, or it can be used to improve Hyva.

React-Luma is 20% faster than any M2 front-end, including Hyva, today!

100% Vanilla.JS(no framework was used to improve performance) and default magento CSS without LESS compilation. However, it can be easily extended by any JS (ReactJS, VueJS) or CSS(Tilewind) library of your choice.

<img width="781" alt="image" src="https://github.com/user-attachments/assets/adad25f3-d394-4b00-8661-52e3165f6af7" />

### CSS Deployment Guide

**Known issue**: The CSS files are not loading correctly on the frontend. The layout is broken due to missing or non-deployed static CSS assets.
It is because not deployed React-Luma optimised CSS. 
If specific CSS files from the extension are missing, manually copy them:
‘’’
cp -R {path to extension}/pub/static/* pub/static/
‘’’

### SCSS to CSS Compilation Manual
To compile SCSS files in React-Luma, navigate to the module directory (vendor/genaker/magento-reactjs) and run node css-compile.js. This script automatically finds all .scss files in pub/static/, compiles them to minified CSS using Sass and PostCSS with autoprefixer and cssnano, and outputs detailed statistics including file sizes and selector counts. The compiled .min.css files are saved in the same directory, ready for production use. Ensure Node.js is installed and run npm install first to install dependencies (sass, postcss, autoprefixer, cssnano, glob).

### CSS Purge Tool
The project includes a powerful CSS purging tool that removes unused CSS selectors to optimize file sizes and improve performance. The tool uses PurgeCSS with support for URL fetching, local content scanning, and advanced configuration options including ignore patterns and blocklists. To use the CSS purge tool, navigate to `vendor/genaker/magento-reactjs/` and run `node css-purge.js --css path/to/your/file.css`. The tool supports file-specific configurations via `purge.json`, can fetch content from URLs using `--url` parameters, scan local files with `--path` parameters, and apply custom configurations with `--config`. It automatically removes development classes (`.debug-*`, `.test-*`) and deprecated code (`.deprecated-*`, `.old-*`) while preserving critical selectors through safelists. For detailed usage instructions and examples, see the comprehensive documentation in `vendor/genaker/magento-reactjs/PURGE_README.md`.

## Video overview of the React-Luma

Video is here -> https://www.youtube.com/watch?v=TJPNAgDCkWk

## Have you questions about integrating ReactJS or VueJS with Magento 2 frontend? This Magento module will help you
React Magento 2 implementation. This module explains how to add and use ReactJS or any other framework micro-frontend UI Components with Magento 2 and forget about Knockout/JQuery Magento 2 UI without migration to a new theme(Works with existing theme and designs). Checkout, admin, customer account, and any other part of your store can work using legacy Magento 2 JS implementation

## No Magento CSS and Magento JS
Enable only CSS Junk settings and 
```
php bin/magento config:set dev/js/move_script_to_bottom 1
```

![React + Magento 2](https://github.com/Genaker/reactmagento2/blob/master/KnockoutMagento2React.png)

### JavaScript Optimization Configuration

To optimize JavaScript performance with existing Magento JS no JS changes needed!!, configure the following settings:

**Important:** This module uses native Magento JavaScript methods and APIs. No custom JavaScript modifications are required - all optimizations work with Magento's existing JavaScript implementation out of the box. The module leverages Magento's built-in JavaScript functionality (`requirejs`, `mage/requirejs/mixins.js`, `requirejs-config.js`, etc.) without replacing or modifying core Magento JS files. The module leverages Magento's built-in JavaScript functionality (`requirejs`, `mage/requirejs/mixins.js`, `requirejs-config.js`, etc.) without replacing or modifying core Magento JS files.

#### 1. Move JS to Bottom (Defer JS)
Enable the module's "Defer JS" feature to move JavaScript files to the bottom of the page for better performance. Scripts with `no-defer` attribute are preserved in their original position.

**Via Admin Panel:**
- Go to: Stores > Configuration > React-Luma integration > Configuration > Magento JS configuration
- Set "Defer JS (Move Scripts to Bottom)" to "Yes"
- Save config and clear cache

**Via CLI:**
```bash
php bin/magento config:set react_vue_config/junk/defer_js 1
php bin/magento cache:clean
```

**Via GET Parameter (for testing):**
- Add `?defer-js=true` to any URL to enable temporarily
- Add `?defer-js=false` to disable temporarily

#### 2. Disable JavaScript Bundling (!Important)
**Important:** Disable Magento's JavaScript bundling to prevent conflicts and ensure proper script loading order.

**Why disable bundling?**
Magento's JavaScript bundling or any other MAgento bundlings creates large combined JavaScript files that block page rendering and increase blocking time. When bundling is enabled:
- Multiple JavaScript files are combined into large bundles that must be downloaded and parsed before the page can become interactive
- This increases **Total Blocking Time (TBT)** and delays **Time to Interactive (TTI)**
- Large bundles prevent parallel script loading and caching optimization
- Scripts that could load asynchronously are forced to load synchronously in the bundle
- Individual script updates require re-downloading the entire bundle

_(README truncated for .md surface. Full README on https://packagento.com/genaker/react-luma.)_

## Recent Versions

| Version | Released |
|---|---|
| 17.151 | 2026-01-06 |
| 17.150 | 2026-01-04 |
| 17.149 | 2025-12-11 |
| 17.148 | 2025-12-11 |
| 17.147 | 2025-12-11 |
| 17.146 | 2025-12-11 |
| 17.145 | 2025-12-10 |
| 17.144 | 2025-12-10 |
| 17.143 | 2025-12-10 |
| 17.142 | 2025-08-08 |

Showing 10 of 51 versions. Full release history on https://packagento.com/genaker/react-luma.

## Quality

Latest release (17.151) fails the Packagento QA pipeline. Verdicts below are per-cell (Magento line × PHP version) for the matrixed tools, and run-once for the static / security tiers.


### Compatibility

Each Magento line is installed on its supported PHP versions, then the module is built (DI compile + static-content deploy). Cells show passed / failed / untested; staircase gaps render as `–`.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | Pass | Pass | – | – |
| 2.4.8 | – | Pass | 1 | – |
| 2.4.9 | – | – | 1 | 1 |


### Code Quality

Advisory checks against the module's source. Never affect the Compatibility verdict — a phpcs finding can't make a module incompatible.

#### Static Analysis

Coding standards (phpcs), mess detection (phpmd), copy-pasted code (cpd), PHP cross-version compatibility, composer.json validity. Each runs once for the whole module.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| PHPCS | Fail | 1099 | 127 errors, 972 warnings (ruleset: Magento2) — 721 auto-fixable with phpcbf |
| PHPMD | Warning | 103 | 103 rule violations (UnusedFormalParameter:63, MissingImport:24, ErrorControlOperator:7, CyclomaticComplexity:4, NPathComplexity:2) |
| Cpd | Warning | 6 | 6 duplicated chunks spanning 134 total lines (min-lines=5, min-tokens=70) |
| Composer validate | Pass | 0 |  |

#### PHPStan

Type-checks the module against a real Magento install. Re-runs per Magento + PHP version because resolvable symbols differ between releases.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | 11 | 11 | – | – |
| 2.4.8 | – | 11 | 13 | – |
| 2.4.9 | – | – | 13 | 13 |


### Tests

Unit and integration suites run per Magento + PHP cell. Test failures speak to the module's behaviour, not its compatibility with a line, so they're reported here separately.

#### Unit Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |

#### Integration Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |


### Security

Dependency-advisory audit (composer audit) plus a source malware scan. A malware detection fails the version outright.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| Composer audit | Pass | 0 |  |
| Malware scan | Pass | 0 |  |

## Licence and pricing

Free. A licence is still minted on checkout and bound to your project for Composer access — no payment step.

Refundable within 14 days of first purchase via https://packagento.com/account/refunds/.

## Install via Claude Code or any MCP client

The Packagento MCP server can run the licence + project + Composer steps above in one tool call:

```
purchase_and_install_packages(
  composer_names=["genaker/react-luma"],
  project_id="proj_xxx"
)
```

This handles cart, checkout, licence minting, project activation, and writes auth.json credentials. Connect a client with `claude mcp add packagento https://mcp.packagento.com`. Full setup at https://packagento.com/docs/mcp-setup.

## Vendor

genaker is a Magento 2 vendor on Packagento. See https://packagento.com/genaker.md for their full catalogue.