Multisite theming approach using bbd_starter theme

1.0
multi-theming
bbd_starter

On the Church of England multisite, we have implemented the build for multiple sites (Cofe, pension_board, etc.).

bbd_starter is the core code.

pension_board specified for Pension Board subproject.

 

The vite module has been updated to the latest version and the patch added (which might be changed/removed if the vite code module is updated).

Add support for using vite outside of the theme/module directory

 

General files required for FE build has been migratet to root folder, the list of files is next:
- .eslintrc.cjs
- .stylelintrc
- babel.config.js

- postcss.config.cjs
- package.json
- vite.config.js

 

Local Set up
add the following lines into settings.php (for each site).
Copy
$settings['vite']['viteRoot'] = '/..'; $settings['vite']['distDir'] = 'web/libraries/dist'; $settings['vite']['useDevServer'] = TRUE; // change to FALSE to use dist build files.
 

​

Run following commands from root of the project.
Copy
pnpm install // Once. pnpm dev pnpm build # or pnpm watch

 

The project files would be build to web/libraries/dist folder. 

You will find there css and js files, which set in the vite.config files.

 

There is also an alias setting, which describe variables which you may use for css/js/src/img path of you theme files.

{
  find: '@src',
  replacement: path.resolve(__dirname, 'web/themes/custom/bbd_starter/src'),
},
{
  find: '@styles',
  replacement: path.resolve(__dirname, 'web/themes/custom/bbd_starter/src/styles'),
},
{
  find: '@js',
  replacement: path.resolve(__dirname, 'web/themes/custom/bbd_starter/src/js'),
},
{
  find: '@img',
  replacement: path.resolve(__dirname, 'web/themes/custom/bbd_starter/src/img'),
},
{
  find: '@src_pension_board',
  replacement: path.resolve(__dirname, 'web/themes/custom/pension_board/src'),
},
{
  find: '@styles_pension_board',
  replacement: path.resolve(__dirname, 'web/themes/custom/pension_board/src/styles'),
},
{
  find: '@js_pension_board',
  replacement: path.resolve(__dirname, 'web/themes/custom/pension_board/src/js'),
},
{
  find: '@img_pension_board',
  replacement: path.resolve(__dirname, 'web/themes/custom/pension_board/src/img'),
},


Additional data include imgPath and imgPathPension variables for images:

preprocessorOptions: {
  scss: {
    api: 'modern-compiler',
    silenceDeprecations: ['import'],
    additionalData: `$imgPath: '${process.env.NODE_ENV === 'PROD' ? '/src/img/' : '/themes/custom/bbd_starter/src/img/' }';
                     $imgPathPension: '${process.env.NODE_ENV === 'PROD' ? '/src/img/' : '/themes/custom/pension_board/src/img/' }';`
  }
}

 

From the point of view theme installation, you need to add bbd_starter theme and sub-theme (default) in our case Pension board.

References