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…