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