https://github.com/bixal/bixal-webpack

Webpack to bundle react apps together on progressively decoupled projects
https://github.com/bixal/bixal-webpack

Last synced: 1 day ago
JSON representation

Webpack to bundle react apps together on progressively decoupled projects

• Host: GitHub
• URL: https://github.com/bixal/bixal-webpack
• Owner: Bixal
• Created: 2018-09-07T20:35:33.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-04-05T20:03:05.000Z (over 3 years ago)
• Last Synced: 2023-08-02T21:32:58.607Z (over 1 year ago)
• Language: JavaScript
• Size: 105 KB
• Stars: 0
• Watchers: 13
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Set up your decoupled environment:

1. Create apps using create-react-app or place in /apps.

2. Merge the package.json files to ./package.json and delete them from the individual apps.

3. Run: 'npm install'

4. Create a block for your app in: web/modules/custom/YOURMODULE/src/Plugin/Block/.

5. Run: 'npm run build'

6. Add app to YOURMODULE.libraries.yml.

```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: {}

```

7. Create a Block for your app.

```php

?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'] = '
';

    $build['#cache'] = ['max-age' => 0];


    return $build;

  }

}

```

8. Make sure the div id matches the id defined in your-app/src/index.js

```javascript

ReactDOM.render(, document.getElementById('your-app'));

```