-
Create apps using create-react-app or place in /apps.
-
Merge the package.json files to ./package.json and delete them from the individual apps.
-
Run: 'npm install'
-
Create a block for your app in: web/modules/custom/YOURMODULE/src/Plugin/Block/.
-
Run: 'npm run build'
-
Add app to YOURMODULE.libraries.yml.
your-app:
version: 1.x
css:
theme:
tools/build/static/css/your-app.min.css: {}
js:
tools/build/static/js/your-app.min.js: {}
- Create a Block for your app.
?php
namespace Drupal\YOURMODULE\Plugin\Block;
use Drupal\Core\Block\BlockBase;
/**
* Provides a 'YourAppBlock' block.
*
* @Block(
* id = "your_app_block",
* admin_label = @Translation("Your app block"),
* )
*/
class YourAppBlock extends BlockBase {
/**
* {@inheritdoc}
*/
public function build() {
$build = [];
$build['your_app_block']['#attached']['library'][] = 'YOURMODULE/your-app';
$build['your_app_block']['#markup'] = '<div id="your-app"></div>';
$build['#cache'] = ['max-age' => 0];
return $build;
}
}
- Make sure the div id matches the id defined in your-app/src/index.js
ReactDOM.render(<App />, document.getElementById('your-app'));