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.

 #React #Webpack #Nextcloud