PHPackages                             julien-lin/react-bundle-symfony - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. julien-lin/react-bundle-symfony

ActiveSymfony-bundle[Templating & Views](/categories/templating)

julien-lin/react-bundle-symfony
===============================

Bundle Symfony pour intégrer React avec Vite, remplaçant Stimulus

2.1.1(4mo ago)217MITPHPPHP >=8.2

Since Dec 22Pushed 3mo agoCompare

[ Source](https://github.com/julien-lin/reactBundleSymfony)[ Packagist](https://packagist.org/packages/julien-lin/react-bundle-symfony)[ GitHub Sponsors](https://github.com/julien-lin)[ RSS](/packages/julien-lin-react-bundle-symfony/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (10)Versions (2)Used By (0)

ReactBundle v2.0 - Production-Ready React Integration for Symfony
=================================================================

[](#reactbundle-v20---production-ready-react-integration-for-symfony)

> **Enterprise-grade Symfony bundle for seamless React + Vite integration**

A lightweight, secure, and high-performance bundle that brings modern React development to Symfony, replacing Stimulus with production-ready components.

[![GitHub](https://camo.githubusercontent.com/dbf78aba4d3f0ce9bd6b0f7e49ce42eb9a119dd709e9af8952d27ffe8f5ab852/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6a756c69656e2d6c696e2f726561637442756e646c6553796d666f6e79)](https://github.com/julien-lin/reactBundleSymfony)[![PHP Version](https://camo.githubusercontent.com/4f0ff8d47b7c73441eb92a1f49af61c2d6521b14113c8fd85fac4416c863e7cc/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253345253344382e322d626c7565)](https://www.php.net/)[![Symfony](https://camo.githubusercontent.com/9bf41e025baca4bca2223a03a1f1e7b56c422dfa8a96241dc1f192f06e1881ae/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f73796d666f6e792d362e30253230253743253230372e302d677265656e)](https://symfony.com/)[![Tests](https://camo.githubusercontent.com/8e281c81d285ce93d807c5980692d2894efb1077dfde4e83e102bbe6dc83560d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f74657374732d3135322532463135322d627269676874677265656e)](COVERAGE_REPORT.md)[![Coverage](https://camo.githubusercontent.com/888b5e2de2cea3fd8f842db1c0a3882c7b53fb63412a5949096436395cd21c39/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f7665726167652d38382532352d627269676874677265656e)](#code-quality)[![Production Ready](https://camo.githubusercontent.com/fa2ec264c00765e379ad257ac9187f18ea07545c8e373fbffb81f1a73a6e6db3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7374617475732d50524f44554354494f4e25323052454144592d627269676874677265656e)](#production-readiness)[![GitHub Sponsors](https://camo.githubusercontent.com/f635dac1e5821b9ef1be40a72a56af8fd67073a1c4e8e77411e850bdbbbe6c57/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73706f6e736f72732f6a756c69656e2d6c696e3f6c6f676f3d67697468756226636f6c6f723d656134616161)](https://github.com/sponsors/julien-lin)

**Languages:** [🇬🇧 English](README.md) | [🇫🇷 Français](README.fr.md)

---

🚀 Why ReactBundle v2.0?
-----------------------

[](#-why-reactbundle-v20)

✅ **Production-Ready** - 152 tests, 88% coverage, 100% security hardening
✅ **Performance Monitored** - Built-in metrics, logging, and observability
✅ **Enterprise Security** - XSS protection, command injection prevention, SSRF validation
✅ **Zero Configuration** - Works out of the box with Symfony Flex
✅ **Modern Tooling** - Vite-powered HMR for blazing-fast development
✅ **Highly Testable** - Comprehensive test suite with edge case coverage

💝 Support the project
---------------------

[](#-support-the-project)

If this bundle saves you time, consider [becoming a sponsor](https://github.com/sponsors/julien-lin) to support ongoing development and maintenance of this open-source project.

---

⚡ Quick Start (5 minutes)
-------------------------

[](#-quick-start-5-minutes)

### 1. Install via Composer

[](#1-install-via-composer)

```
composer require julien-lin/react-bundle-symfony

```

Composer automatically installs npm dependencies via Symfony Flex.

### 2. Create React folder structure

[](#2-create-react-folder-structure)

```
mkdir -p assets/React/Components
touch assets/React/index.js

```

### 3. Configure `assets/React/index.js`

[](#3-configure-assetsreactindexjs)

```
// Export all your React components here
// export { default as MyComponent } from './Components/MyComponent';

```

### 4. Configure `assets/js/app.jsx`

[](#4-configure-assetsjsappjsx)

```
import React from 'react';
import { createRoot } from 'react-dom/client';
import * as ReactComponents from '../React';

// Auto-mount React components by data attribute
document.querySelectorAll('[data-react-component]').forEach(element => {
    const componentName = element.dataset.reactComponent;
    const props = JSON.parse(element.dataset.props || '{}');
    const Component = ReactComponents[componentName];

    if (Component) {
        createRoot(element).render();
    }
});

```

### 5. Use in Twig templates

[](#5-use-in-twig-templates)

```
{% extends 'base.html.twig' %}

{% block content %}
    {{ react_component('YourComponent', {
        title: 'Hello React',
        message: 'Welcome to production-ready React in Symfony'
    }) }}
{% endblock %}

{% block javascripts %}
    {{ vite_entry_script_tags('app') }}
{% endblock %}

```

### 6. Build and run

[](#6-build-and-run)

```
# Development (with HMR)
php bin/console react:build --dev

# Production
php bin/console react:build --prod

```

✅ Done! Your React component is live.

---

📋 Table of Contents
-------------------

[](#-table-of-contents)

1. [Installation](#installation)
2. [Core Features](#core-features)
3. [TypeScript Support](#typescript-support)
4. [Advanced Usage](#advanced-usage)
5. [Production Deployment](#production-deployment)
6. [Configuration](#configuration)
7. [API Reference](#api-reference)
8. [Performance & Monitoring](#performance--monitoring)
9. [Security](#security)
10. [Troubleshooting](#troubleshooting)
11. [Contributing](#contributing)

---

📦 Installation
--------------

[](#-installation)

### Via Composer

[](#via-composer)

```
composer require julien-lin/react-bundle-symfony

```

The Composer installation script will automatically install npm dependencies.

### Configuration

[](#configuration)

1. The bundle registers automatically via Symfony Flex.
2. Configure the bundle in `config/packages/react.yaml`:

```
react:
    build_dir: 'build'
    assets_dir: 'assets'

```

3. If npm dependencies were not automatically installed:

```
cd vendor/julien-lin/react-bundle-symfony
npm install

```

4. Create the file structure in your Symfony project (if it doesn't already exist):

```
# Create the folder for your React components
mkdir -p assets/React/Components

# Create the index.js file to export your components
touch assets/React/index.js

```

5. Configure `assets/React/index.js` (entry point for your components):

```
/**
 * Entry point for all React components in the project
 * Export all your components created in React/Components/ here
 */

// Example:
// export { default as MyComponent } from './Components/MyComponent';

// Add your exports here as you go

```

6. Configure `assets/js/app.jsx` (must import from `../React`):

```
import React from 'react';
import { createRoot } from 'react-dom/client';

// Import all your components from the index
import * as ReactComponents from '../React';

// ... rest of the code (usually already configured)

```

Usage
-----

[](#usage)

### Prerequisites: File Structure

[](#prerequisites-file-structure)

Before using the bundle, make sure you have the following structure in your Symfony project:

```
assets/
├── React/
│   ├── Components/          # Create your components here
│   └── index.js             # Export your components here
└── js/
    └── app.jsx              # Entry point (already configured)

```

### In your Twig templates

[](#in-your-twig-templates)

```
{% extends '@React/react_base.html.twig' %}

{% block body %}
    {# Use react_component with the exact name of your component #}
    {{ react_component('MyComponent', {
        title: 'My title',
        message: 'My message',
        count: 42,
        items: ['item1', 'item2']
    }) }}
{% endblock %}

{% block javascripts %}
    {{ vite_entry_script_tags('app') }}
{% endblock %}

```

**Important**: The component name in `react_component()` must match exactly the name used in the export of `assets/React/index.js`.

TypeScript Support
------------------

[](#typescript-support)

ReactBundleSymfony supports TypeScript out of the box. You can write your React components in TypeScript (`.tsx` files) for full type safety.

### Quick Setup

[](#quick-setup)

1. **Install TypeScript:**

```
npm install --save-dev typescript @types/react @types/react-dom

```

2. **Create `tsconfig.json`:**

```
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "bundler",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./assets/React/*"]
    }
  },
  "include": ["assets"]
}

```

3. **Rename files to `.tsx`:**

- `assets/js/app.jsx` → `assets/js/app.tsx`
- `assets/React/Components/*.jsx` → `assets/React/Components/*.tsx`

4. **Use TypeScript in components:**

```
// assets/React/Components/WeatherCard.tsx
import React from 'react';

interface WeatherCardProps {
  city: string;
  temperature: number;
  description: string;
}

const WeatherCard: React.FC = ({ city, temperature, description }) => {
  return (

      {city}
      {temperature}°C - {description}

  );
};

export default WeatherCard;

```

**See [TYPESCRIPT.md](TYPESCRIPT.md) for complete TypeScript documentation.**

### Docker Quick Start

[](#docker-quick-start)

Get started with Docker in 5 minutes:

```
# 1. Install bundle
composer require julien-lin/react-bundle-symfony

# 2. Create docker-compose.yml (see QUICK_START_DOCKER.md)

# 3. Start services
docker-compose up -d

# 4. Start Vite dev server
docker-compose exec node npm run dev

```

**See [QUICK\_START\_DOCKER.md](QUICK_START_DOCKER.md) for complete Docker guide.**

### Build assets

[](#build-assets)

#### Development with HMR

[](#development-with-hmr)

```
php bin/console react:build --dev

```

#### Production

[](#production)

```
php bin/console react:build

```

Bundle structure
----------------

[](#bundle-structure)

```
ReactBundle/
├── src/
│   ├── ReactBundle.php              # Main class
│   ├── DependencyInjection/         # Configuration
│   ├── Service/                     # Services
│   ├── Twig/                        # Twig extensions
│   ├── Command/                     # Symfony commands
│   └── Composer/                    # Composer scripts
├── Resources/
│   ├── config/
│   │   └── services.yaml
│   └── views/                       # Twig templates
├── composer.json
├── package.json
└── vite.config.js

```

Recommended structure in your Symfony project
---------------------------------------------

[](#recommended-structure-in-your-symfony-project)

Create your React components **in your Symfony project**, not in the bundle:

```
your-symfony-project/
├── assets/
│   ├── React/
│   │   ├── Components/              # Your React components here
│   │   │   ├── MyComponent.jsx
│   │   │   ├── Navbar.jsx
│   │   │   └── ...
│   │   └── index.js                 # Centralized export of all components
│   └── js/
│       └── app.jsx                  # Entry point (imports from React/)
├── public/
│   └── build/                       # Assets compiled by Vite
└── config/
    └── packages/
        └── react.yaml               # Bundle configuration

```

Create a new React component
----------------------------

[](#create-a-new-react-component)

### Quick workflow

[](#quick-workflow)

```
1. Create the file          → assets/React/Components/MyComponent.jsx
2. Export in index.js       → assets/React/index.js
3. Rebuild assets           → php bin/console react:build
4. Use in Twig              → {{ react_component('MyComponent', {...}) }}

```

### Step 1: Create the component file

[](#step-1-create-the-component-file)

Create your component in `assets/React/Components/YourComponent.jsx`:

```
import React from 'react';

const YourComponent = ({ title, message, onAction }) => {
    return (

            {title}
            {message}
            {onAction && (
                Action
            )}

    );
};

export default YourComponent;

```

### Step 2: Export the component in `index.js`

[](#step-2-export-the-component-in-indexjs)

Add the export in `assets/React/index.js`:

```
// ... other existing exports

// Your new component
export { default as YourComponent } from './Components/YourComponent';

```

**Important**: The name used in the export (`YourComponent`) must match exactly the name you will use in Twig.

### Step 3: Use the component in a Twig template

[](#step-3-use-the-component-in-a-twig-template)

In your Twig template:

```
{% extends '@React/react_base.html.twig' %}

{% block body %}
    {# Use the exact export name #}
    {{ react_component('YourComponent', {
        title: 'My title',
        message: 'My personalized message'
    }) }}
{% endblock %}

{% block javascripts %}
    {{ vite_entry_script_tags('app') }}
{% endblock %}

```

### Step 4: Rebuild assets

[](#step-4-rebuild-assets)

After creating or modifying a component:

```
# In development (with HMR)
php bin/console react:build --dev

# In production
php bin/console react:build

```

Complete example
----------------

[](#complete-example)

### 1. Create `assets/React/Components/ProductCard.jsx`

[](#1-create-assetsreactcomponentsproductcardjsx)

```
import React from 'react';

const ProductCard = ({ name, price, image, onAddToCart }) => {
    return (

            {name}

                ${price}

                Add to cart

    );
};

export default ProductCard;

```

### 2. Export in `assets/React/index.js`

[](#2-export-in-assetsreactindexjs)

```
// ... other exports

export { default as ProductCard } from './Components/ProductCard';

```

### 3. Use in Twig

[](#3-use-in-twig)

```
{% extends '@React/react_base.html.twig' %}

{% block body %}

        {% for product in products %}
            {{ react_component('ProductCard', {
                name: product.name,
                price: product.price,
                image: product.image,
                onAddToCart: '() => alert("Added to cart!")'
            }) }}
        {% endfor %}

{% endblock %}

{% block javascripts %}
    {{ vite_entry_script_tags('app') }}
{% endblock %}

```

### Important notes

[](#important-notes)

- ✅ **Create your components in `assets/React/Components/`** (in your project, not in the bundle)
- ✅ **Export them in `assets/React/index.js`** with the exact name you will use in Twig
- ✅ **Name is case-sensitive**: `ProductCard` ≠ `productcard` ≠ `Productcard`
- ✅ **Props are passed as JSON**: use simple types (string, number, boolean, array, object)
- ✅ **JavaScript functions** can be passed as strings (e.g., `'() => alert("test")'`)
- ✅ **Rebuild after each modification**: `php bin/console react:build` (or `--dev` for HMR)

Migration from Stimulus
-----------------------

[](#migration-from-stimulus)

ReactBundleSymfony is designed as a modern replacement for Stimulus in Symfony applications.

**Quick migration:**

1. Install ReactBundle: `composer require julien-lin/react-bundle-symfony`
2. Convert Stimulus controllers to React components
3. Replace `data-controller="..."` with `{{ react_component(...) }}`

**See [MIGRATION\_STIMULUS.md](MIGRATION_STIMULUS.md) for complete migration guide with examples.**

Advanced configuration
----------------------

[](#advanced-configuration)

### Customize Vite server

[](#customize-vite-server)

In `config/packages/react.yaml`:

```
react:
    build_dir: 'build'
    assets_dir: 'assets'

```

### Environment variables

[](#environment-variables)

You can define `VITE_SERVER_URL` in your `.env` to customize the Vite server URL in development:

```
VITE_SERVER_URL=http://localhost:5173

```

Or in `config/packages/react.yaml`:

```
react:
    vite_server: 'http://localhost:5173'

```

### Troubleshooting

[](#troubleshooting)

#### Components are not displaying

[](#components-are-not-displaying)

- Check that `{{ vite_entry_script_tags('app') }}` is present in your template
- Check the browser console for JavaScript errors
- Make sure assets are compiled: `php bin/console react:build`
- Check that manifest.json exists in `public/build/.vite/`

#### "Component not found" error

[](#component-not-found-error)

- Check that the component is exported in `assets/React/index.js` of your Symfony project
- Check that the name in the export matches exactly the name used in Twig (case-sensitive)
- Check that the component file exists in `assets/React/Components/`
- Check that you have rebuilt the assets: `php bin/console react:build`
- Check the browser console to see the list of available components

#### HMR is not working

[](#hmr-is-not-working)

- Check that the Vite server is started: `php bin/console react:build --dev`
- Check that port 3000 (or the configured one) is not in use
- Check the configuration in `vite.config.js`
- Check that `VITE_SERVER_URL` is correctly configured

#### npm/Node.js errors

[](#npmnodejs-errors)

- Check that Node.js >= 18.0.0 is installed: `node --version`
- Check that npm is installed: `npm --version`
- If you use nvm, make sure the environment is correctly loaded

#### Path errors (Windows)

[](#path-errors-windows)

- The bundle now supports Windows with `DIRECTORY_SEPARATOR`
- If you encounter problems, check folder permissions
- Make sure paths in `vite.config.js` are correct

Adding npm Packages
-------------------

[](#adding-npm-packages)

To add npm packages (like `react-icons`, `axios`, etc.) to your project:

1. Install the package in your **Symfony project root** (not in the bundle):

    ```
    npm install react-icons

    ```
2. Import and use it in your components:

    ```
    import { FaGithub } from 'react-icons/fa';

    ```
3. Rebuild assets:

    ```
    php bin/console react:build

    ```

📖 **Full guide**: See [ADDING\_NPM\_PACKAGES.md](ADDING_NPM_PACKAGES.md) for detailed instructions and examples.

Support
-------

[](#support)

- Complete documentation: see `QUICKSTART.md`
- Installation guide: see `INSTALLATION.md`
- Adding npm packages: see `ADDING_NPM_PACKAGES.md`
- Report a bug: [GitHub Issues](https://github.com/julien-lin/reactBundleSymfony/issues)
- Become a sponsor: [GitHub Sponsors](https://github.com/sponsors/julien-lin)

License
-------

[](#license)

MIT

###  Health Score

37

—

LowBetter than 83% of packages

Maintenance78

Regular maintenance activity

Popularity9

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity47

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

147d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/e92f8ec82d7c7caf71b6b8a80d24654e66115d80b736bc481952e92eddd61f16?d=identicon)[Julien Linard](/maintainers/Julien%20Linard)

---

Top Contributors

[![julien-lin](https://avatars.githubusercontent.com/u/58387563?v=4)](https://github.com/julien-lin "julien-lin (47 commits)")

---

Tags

symfonybundletwigvitereact

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan

Code StylePHP\_CodeSniffer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/julien-lin-react-bundle-symfony/health.svg)

```
[![Health](https://phpackages.com/badges/julien-lin-react-bundle-symfony/health.svg)](https://phpackages.com/packages/julien-lin-react-bundle-symfony)
```

###  Alternatives

[twig/extra-bundle

A Symfony bundle for extra Twig extensions

91292.0M315](/packages/twig-extra-bundle)[sylius/sylius

E-Commerce platform for PHP, based on Symfony framework.

8.4k5.6M651](/packages/sylius-sylius)[sulu/sulu

Core framework that implements the functionality of the Sulu content management system

1.3k1.3M152](/packages/sulu-sulu)[shopware/platform

The Shopware e-commerce core

3.3k1.5M3](/packages/shopware-platform)[prestashop/prestashop

PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers.

9.0k15.4k](/packages/prestashop-prestashop)[contao/core-bundle

Contao Open Source CMS

1231.6M2.4k](/packages/contao-core-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)