PHPackages                             swisscom/reactintegration - 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. [Utility & Helpers](/categories/utility)
4. /
5. swisscom/reactintegration

ActiveNeos-package[Utility & Helpers](/categories/utility)

swisscom/reactintegration
=========================

2.1.1(1y ago)212.2kPHP

Since Sep 25Pushed 1y ago5 watchersCompare

[ Source](https://github.com/onivaevents/Swisscom.ReactIntegration)[ Packagist](https://packagist.org/packages/swisscom/reactintegration)[ RSS](/packages/swisscom-reactintegration/feed)WikiDiscussions master Synced 3w ago

READMEChangelog (7)Dependencies (1)Versions (10)Used By (0)

create-react-app Flow Integration
=================================

[](#create-react-app-flow-integration)

[create-react-app (CRA)](https://github.com/facebook/create-react-app) is specifically optimized for single-page apps; but through some workarounds it can be used for developing JS for multi-page apps as well. This package bundles these workarounds.

The main problem of CRA is that there is no default way of running the dev-server watch-mode, and have it emit static JS files which we can simply include. This might be solved as soon as [this PR](https://github.com/facebook/create-react-app/pull/6144)is merged in CRA.

Furthermore, CRA employs code splitting; so during development the URLs of the dev server change very often.

Features
--------

[](#features)

This package provides a `Swisscom.ReactIntegration:ReactScripts` Fusion prototype, which renders the necessary `script` tags. In development mode, it extracts the script tag URLs from the CRA dev-server (by CURL'ing to ); and in production mode it simply emits the built files.

Example:

```
page.body.javascripts.reactScripts = Swisscom.ReactIntegration:ReactScripts {
    # path to the JavaScript *folder* of the built react app. Required.
    path = 'resource://Your.Package/Public/BuiltReactApp/js'

    # optional: path to the dev server
    developmentServerUrl = 'http://other-ip-here:3000'
}

```

If the setting `Swisscom.ReactIntegration.productionMode` is true (default in `Production` context), we load the built JS. Otherwise, we load the scripts from the CRA dev server URL.

Installation
------------

[](#installation)

1. Install this package as usual.
2. kickstart your react app in `[YourPackage]/Resources/Private/react-app` using create-react-app.
3. Add a symlink from `[YourPackage]/Resources/Public/BuiltReactApp` to `[YourPackage]/Private/JavaScript/build/static`; e.g. by typing `ln -s ../Private/JavaScript/build/static BuiltReactApp`.
4. Add the following Fusion to your Page:

    ```
    page.body.javascripts.reactScripts = Swisscom.ReactIntegration:ReactScripts {
        # path to the JavaScript *folder* of the built react app. Required.
        path = 'resource://YourPackage/Public/BuiltReactApp/js'
    }

    ```

###  Health Score

39

—

LowBetter than 85% of packages

Maintenance46

Moderate activity, may be stable

Popularity22

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity64

Established project with proven stability

 Bus Factor1

Top contributor holds 71.4% 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

Every ~295 days

Recently: every ~516 days

Total

8

Last Release

401d ago

Major Versions

1.1.2 → 2.0.02022-01-24

### Community

Maintainers

![](https://www.gravatar.com/avatar/046c3b571b3c6a71006fd4801b46a8f827719302072db50114959ccd8f71821d?d=identicon)[oniva](/maintainers/oniva)

---

Top Contributors

[![simstern](https://avatars.githubusercontent.com/u/2580285?v=4)](https://github.com/simstern "simstern (10 commits)")[![skurfuerst](https://avatars.githubusercontent.com/u/190777?v=4)](https://github.com/skurfuerst "skurfuerst (4 commits)")

### Embed Badge

![Health badge](/badges/swisscom-reactintegration/health.svg)

```
[![Health](https://phpackages.com/badges/swisscom-reactintegration/health.svg)](https://phpackages.com/packages/swisscom-reactintegration)
```

###  Alternatives

[neos/neos

An open source Content Application Platform based on Flow. A set of core Content Management features is resting within a larger context that allows you to build a perfectly customized experience for your users.

1151.0M761](/packages/neos-neos)[neos/eel

The Embedded Expression Language (Eel) is a building block for creating Domain Specific Languages

122.2M35](/packages/neos-eel)[neos/fusion-form

Fusion Form

19776.4k46](/packages/neos-fusion-form)[neos/form

Extensible and flexible API for building web forms

18892.2k55](/packages/neos-form)[neos/media

The Media package

101.2M53](/packages/neos-media)[avency/neos-vardump

Neos VarDump Package

147.1k](/packages/avency-neos-vardump)

PHPackages © 2026

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