swisscom/reactintegration

Last activity on 10 October 2019
  • 5012
composer require swisscom/reactintegration

1.1.2

Version
1.1.2
Type
neos-package
Release Date
15.10.2019 09:56:08
Source
git
Distribution
zip
Requires
Requires (dev)
None
Suggest
None
Provides
None
Conflicts
None
Replaces
None
ebb66d0b452b04e9a44b0dcb953149474493a57c

create-react-app Flow Integration

create-react-app (CRA) 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 is merged in CRA.

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

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 http://localhost:3000); 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

  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'
    }
    
The content of the readme is provided by Github
The same vendor provides 6 package(s).