Embed Create React App SPA into CakePHP 3.8.x view

Written by James McDonald

November 14, 2019

Some small changes from the old CRA version 2.x the asset-manifest.json now has an entrypoints key

// view code src/Template/Assigned/schedule_edit.ctp

<?php foreach ($css as $style) : ?>

    <?= $this->Html->css('/react' . $style, [
            'block' => true
        ]); ?>
<?php endforeach; ?>

<script>
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {}
</script>

<div baseurl="<?= $this->Url->build('/', true); ?>" id="root"></div>

<?php foreach ($js as $script) : ?>

    <?= $this->Html->script('/react/' . $script); ?>

<?php endforeach; ?>

// controller action code src/Controller/AssignedController.php

    public function scheduleEdit()
    {
        $file = new File(WWW_ROOT . '/react/asset-manifest.json');
        $manifest = json_decode($file->read());
        $file->close();
        //$this->log($manifest);
        $js = [];
        $css = [];

        foreach ($manifest->entrypoints as $key => $value) {
            if (preg_match('/\.js$/', $value) === 1) {
                $js[] = $value;
            }
            if (preg_match('/\.css$/', $value) === 1) {
                $css[] = $value;
            }
        }

        $this->set(compact('js', 'css'));
    }

// example asset-manifest.json

{
  "files": {
    "main.css": "/static/css/main.fa8287a1.chunk.css",
    "main.js": "/static/js/main.77a7a89c.chunk.js",
    "main.js.map": "/static/js/main.77a7a89c.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.d2a3027a.js",
    "runtime-main.js.map": "/static/js/runtime-main.d2a3027a.js.map",
    "static/css/2.948a3612.chunk.css": "/static/css/2.948a3612.chunk.css",
    "static/js/2.736214c0.chunk.js": "/static/js/2.736214c0.chunk.js",
    "static/js/2.736214c0.chunk.js.map": "/static/js/2.736214c0.chunk.js.map",
    "index.html": "/index.html",
    "precache-manifest.5b047da485b47d9b621fb3c8cf7cd2ff.js": "/precache-manifest.5b047da485b47d9b621fb3c8cf7cd2ff.js",
    "service-worker.js": "/service-worker.js",
    "static/css/2.948a3612.chunk.css.map": "/static/css/2.948a3612.chunk.css.map",
    "static/css/main.fa8287a1.chunk.css.map": "/static/css/main.fa8287a1.chunk.css.map"
  },
  "entrypoints": [
    "static/js/runtime-main.d2a3027a.js",
    "static/css/2.948a3612.chunk.css",
    "static/js/2.736214c0.chunk.js",
    "static/css/main.fa8287a1.chunk.css",
    "static/js/main.77a7a89c.chunk.js"
  ]
}

// package.json scripts section build react example. This assumes your CRA project directory is on the same level as your webroot e.g.

src/
webroot/
react-spa-project/
{
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && rm -rf ../webroot/react && cp -rv build ../webroot/react",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

You May Also Like…

Squarespace Image Export

To gain continued access to your Squarespace website images after cancelling your subscription you have several...

MySQL 8.x GRANT ALL STATEMENT

-- CREATE CREATE USER 'tgnrestoreuser'@'localhost' IDENTIFIED BY 'AppleSauceLoveBird2024'; GRANT ALL PRIVILEGES ON...

Exetel Opt-Out of CGNAT

If your port forwards and inbound and/or outbound site-to-site VPN's have failed when switching to Exetel due to their...