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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | { "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/
1 2 3 4 5 6 7 8 | {"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