クラフトCMSの複数のページのサイトでCreate Reactionアプリを使用する方法

I recommend to have at least basic knowledges about Craft CMS, PHP, CRA, and a good comprehension of Webpack

CRAをテンプレートでインストールする

For what follows our project will be named cracraft, and CRA refer to Create react app

$ npx create-react-app --template cra-template-rb cracraft

A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.

$ readlink which `create-react-app`

CMSのインストール

CRACOを使用したカスタマイズCRA

$ npm install @craco/craco --save

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  ...
},

If you want to know more about the full details of the craco installation, it’s here

WDS_SOCKET_HOST=localhost
WDS_SOCKET_PORT=3000
PUBLIC_PATH="http://localhost:3000/"
MANIFEST_PATH=/asset-manifest.json
FAST_REFRESH=true

FAST_REFRESH enable react-refresh, it’s not mandatory to enable it, but it’s allow to improve components updates

変更とビルドパス

cracraft
├── src
│   ├── styles
│   │   ├── **/*.css
│   ├── app
│   │   ├── **/*.tsx
│   ├── js
│   │   ├── **/*.js
│   └── ...
├── web
│   ├── dist
│   └── ...
├── templates
├── craco.config.js
├── .env
└── ...

const {
  whenDev,
  whenProd,
} = require('@craco/craco');

module.exports = function ({ env }) {
  return {
    webpack: {
      configure: (webpackConfig, { env, paths }) => {
        whenDev(() => {
          webpackConfig.output.publicPath = process.env.PUBLIC_PATH;
        });

        whenProd(() => {
          const buildPath = `${paths.appPath}/web${process.env.PUBLIC_PATH}`;

          paths.appBuild = buildPath;
          webpackConfig.output.path = buildPath;
          webpackConfig.output.publicPath = process.env.PUBLIC_PATH;

          return webpackConfig;
        });
      }
    },
    plugins: [],
    style: {}
  }
}

...
plugins: [
  {
    plugin: {
      overrideDevServerConfig: ({
        devServerConfig,
        cracoConfig,
        pluginOptions,
        context: { env, paths, proxy, allowedHost },
      }) => {
        devServerConfig.headers = {
          'Access-Control-Allow-Origin': '*',
        };
        return devServerConfig;
      },
    }
  },
],
...

複数のエントリポイントのサポートを追加する

...
module.exports = function ({ env }) {
  return {
    webpack: {
      configure: (webpackConfig, { env, paths }) => {
        const entries = {
          index: [...webpackConfig.entry],
          home: [`${paths.appSrc}/js/home.ts`],
          about: [`${paths.appSrc}/js/about/index.js`],
        };
        ...
      }
    }
  }
}

$ npm i ManifestPlugin -D

...
module.exports = function ({ env }) {
  return {
    webpack: {
      configure: (webpackConfig, { env, paths }) => {
        ...
        // Substitute ManifestPlugin:
        const pluginPosition = webpackConfig.plugins.findIndex(
          ({ constructor }) => constructor.name === 'ManifestPlugin',
        );

        const multipleEntriesManifestPlugin = new ManifestPlugin({
          fileName: 'asset-manifest.json',
          publicPath: paths.publicUrlOrPath,
          generate: (seed, files, entrypoints) => {
            const manifestFiles = files.reduce((manifest, file) => {
              manifest[file.name] = file.path;
              return manifest;
            }, seed);

            // Keep the existing entry point
            const indexEntrypointFiles = entrypoints.index.filter(
              fileName => !fileName.endsWith('.map'),
            );

            let { index, ...pagesAllEntryPointFiles } = entrypoints;
            // Create our pages entry points
            const pagesEntryPointFiles = Object.keys(
              pagesAllEntryPointFiles,
            ).reduce((filtered, entryKey) => {
              filtered[entryKey] = pagesAllEntryPointFiles[entryKey].filter(
                fileName => !fileName.endsWith('.map'),
              );
              return filtered;
            }, {});

            return {
              files: manifestFiles,
              entrypoints: indexEntrypointFiles,
              pages: pagesEntryPointFiles,
            };
          },
        });

        webpackConfig.plugins.splice(
          pluginPosition,
          1,
          multipleEntriesManifestPlugin,
        );
        ...
      }
    }
  }
}

...
whenDev(() => {
  webpackConfig.output.publicPath = process.env.PUBLIC_PATH;
  webpackConfig.optimization.runtimeChunk = 'single';

  const webpackHotDevClientPath = require.resolve(
    'react-dev-utils/webpackHotDevClient',
  );
  Object.keys(entries).forEach(entryKey => {
    if (!entries[entryKey].includes(webpackHotDevClientPath)) {
      entries[entryKey].unshift(webpackHotDevClientPath);
    }
  });
});
...

風船と微調整ポストを加える

$ npm i -D postcss-import postcss-preset-env tailwindcss

...
style: {
  postcss: {
    plugins: [
      require('postcss-import')({
        plugins: [require('stylelint')],
        path: ['./node_modules'],
      }),
      require('tailwindcss')('./tailwind.config.js'),
      require('postcss-preset-env')({
        autoprefixer: {},
        features: {
          'nesting-rules': true,
        },
      })
    ],
  },
},
...

"rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "screen",
        "extends",
        "responsive",
        "tailwind"
      ]
    }],
    "block-no-empty": null
  }

別のプラグインを追加

whenProd(() => {
  ...

  webpackConfig.plugins.push(
    new FaviconsWebpackPlugin({
      logo: './src/img/favicon-src.png',
      prefix: 'img/favicons/',
      cache: true,
      inject: 'force',
      favicons: {
        appName: 'Cracraft',
        appDescription: 'Create react app and Craft play well together',
        developerName: 'Dev name',
        developerURL: '[email protected]',
        path: 'web/dist/',
      },
    }),
  );
});

必要に応じて各テンプレートに関連するJSファイルとCSSファイルを注入する

$ composer require galbar/jsonpath

use craft\helpers\Html;
use craft\helpers\Template;
use craft\helpers\Json as JsonHelper;
use JsonPath\JsonObject;

public function getEntryPointChunks(string $path)
{
    $publicPath = getenv('PUBLIC_PATH');
    $manifestPath = getenv('MANIFEST_PATH');
    $manifestContent = file_get_contents($publicPath.$manifestPath);
    $manifest = JsonHelper::decodeIfJson($manifestContent);
    $jsonObject = new JsonObject($manifestContent);

    $moduleList = $jsonObject->get($jsonPath);

    if (!$moduleList) {
        return null;
    }

    // Ensure flat array, ex: if [*] is forgotten in the json path to an array
    if (is_array($moduleList)) {
        $flattened = [];
        array_walk_recursive($moduleList, function ($item) use (&$flattened) {
            $flattened[] = $item;
        });

        $moduleList = $flattened;
    }

    $moduleTags = [];
    foreach ($moduleList as $k => $m) {
        if (strpos($m, '.hot-update.js') === false) {
            $moduleName = preg_replace('/^\//', '', $m);
            if (preg_match('/\.css(\?.*)?$/i', $moduleName)) {
                $moduleTags[] = Html::cssFile("$publicPath/$moduleName");
            } elseif (preg_match('/\.js(\?.*)?$/i', $moduleName)) {
                $moduleTags[] = Html::jsFile("$publicPath/$moduleName");
            } elseif (preg_match('/\.(svg|png|jpe?g|webp|avif|gif)(\?.*)?$/i', $moduleName)) {
                $moduleTags[] = Html::img("$publicPath/$moduleName");
            } else {
                $moduleTags[] = "$publicPath/$moduleName";
            }
        }
    }

    return Template::raw(implode("\r\n", $moduleTags));
}

{# Inject the spa react app #}
{{getEntryPointChunks('$.entrypoints')}}

{# Inject vanilla javascript #}
{{getEntryPointChunks('$.pages.about')}}

NB: don’t forget to start the development server before accessing your Craft site $ npm start