Assets/js is processed in React4XP?

Help
1

Enonic version: 7.10.3
OS: Ubuntu

Hi,

I’d like to know if there’s a step in React4XP (based on the starter repo) that builds/compiles the files in assets/js. I have a preact code in there which appears processed in the build/ dir after the gradlew build. It’s odd that, while testing an example page locally, the original file is the one referenced after portalLib.assetUrl, while in the server (running the same XP version) we get the processed file (which throws a breaking error).

Regards,
Marco

2

We don’t have code in React4XP starter that processes client-side JS assets, but this is a matter of correctly setting up your Webpack build. Just keep in mind that Webpack won’t understand references to portalLib.assetUrl, you will have to use include/require inside JS files to build a chain of dependencies that Webpack will understand.

Here’s config we are using in another project based on React4XP:

import ESLintPlugin from 'eslint-webpack-plugin';

const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');

const isProd = true;
const devtool = isProd ? false : 'source-map';

const SRC_DIR = 'src/main/resources';
const DST_DIR = 'build/resources/main';

module.exports = {
  context: path.resolve(__dirname, SRC_DIR, 'assets'),
  entry: {
    filename: './js/main.js',
  },
  devtool,
  mode: isProd ? 'production' : 'development',
  optimization: {
    minimize: isProd,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: {
            drop_console: false,
          },
          output: {
            comments: false,
          },
          keep_classnames: true,
          keep_fnames: true,
        },
      }),
    ],
  },
  output: {
    path: path.join(__dirname, DST_DIR, 'assets'),
    filename: './js/main.min.js',
  },
  performance: {
    hints: false,
  },
  plugins: [
    new ESLintPlugin({})
  ],
  stats: {
    colors: true,
    hash: false,
    modules: false,
    moduleTrace: false,
    timings: false,
    version: false,
  },
}
1 Like
3

We’ve now added more samples to the starter.

1 Like