I have recently started developing a React app for Nextcloud. After creating the React boilerplate inside my Nextcloud app (in the /src directory) and developing some basic features outside of Nextcloud (just "npm start"), I wanted to get the React part called and included into the Nextcloud app.
As Webpack uses chunk splitting which generates more than one JavaScript file and also adds a hash to the file name for cache resetting, I had problems including it as it is described in the Nextcloud docs. For now my app is not that big so I used this hack to disable chunk splitting in CRA without ejecting.
In the template/index.php i used this PHP code to get the hashed file into app:
/*
* Uses the manifest file to get the filenames with hash
* @param string $filename
* @return string
*/
function asset_path($filename) {
$manifest_path = './apps/portknox_admin/build/asset-manifest.json';
$ext = pathinfo($filename, PATHINFO_EXTENSION);
$strip = ($ext == "css") ? -4 : -3;
if (file_exists($manifest_path)) {
$manifest = json_decode(file_get_contents($manifest_path), TRUE);
} else {
$manifest = [];
}
if (array_key_exists($filename, $manifest)) {
return '../build'. substr($manifest[$filename], 0, $strip);
}
return '../build' . substr($filename, 0, $strip);
}
style('portknox_admin', asset_path('main.css'));
script('portknox_admin', asset_path('main.js')); Maybe this helps someone, leave a comment if you have improvements or a better way.