1. Union Component
  2. Installation
  3. Introduction
  4. Union
  5. Widget Descriptors
  6. Common Data Descriptors
  7. withWidgetContext()
  8. Utilities
  9. FAQ
  1. Scripts
  2. Installation
  3. Introduction
  4. Usage
  5. Monorepo
  6. CLI
  7. Configuration
  8. Testing
  9. Recipes
  10. Polyfilling
  1. Boilerplates
  2. Basic
  3. Monorepo
  4. Liferay
  5. SSR

Recipes

Table of Contents

Extending webpack.config

If you need to customize the webpack config generated by react-union-scripts, specify the mergeWebpackConfig function in union.config.js.

module.exports = {
	mergeWebpackConfig: config => {
		console.log(config);
		// 		Outputs:
		// 		{
		// 			"context": "...",
		// 			"entry": {
		// 			"vendor": [...],
		// 			"SampleApp": [...]
		// 			},
		// 			"output": {...},
		// 			"plugins": [...],
		// 			"resolve": {...},
		// 			"module": {...}
		// 		}

		return config;
	},
};

Merging webpack configs can be tedious task. To make it a little bit simpler, we recommend to use the webpack-merge library.

Install it by running:

yarn add -D webpack-merge

in the root of your project, then use it in union.config.js, e.g.:

const merge = require('webpack-merge');

module.exports = ({ debug }) => ({
	mergeWebpackConfig: unionWebpackConfig =>
		merge(unionWebpackConfig, {
			devtool: debug ? 'eval' : false,
		}),
});

.ejs templates for mocking server output

Create your .ejs template in /public/<YourAppName>/index.ejs. YourAppName refers to application registered within union.config.js.

Testing with Enzyme

Add enzyme to your project:

yarn add -D enzyme enzyme-adapter-react-16

Create file testsSetup.js in root your project and paste following code:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

Adding Sass support

Add webpack-merge, sass-loader and node-sass to your dependencies:

yarn add -D webpack-merge sass-loader node-sass

Then add union.config.js inside your root folder with the following content:

const merge = require('webpack-merge');
const path = require('path');

module.exports = ({ debug }) => ({
	mergeWebpackConfig: unionWebpackConfig =>
		merge(unionWebpackConfig, {
			module: {
				rules: [
					{
						test: /\.scss$/,
						include: path.resolve(__dirname, './src'),
						use: [
							'style-loader',
							{
								loader: 'css-loader',
								options: {
									importLoaders: 1,
									minimize: true,
									sourceMap: debug,
								},
							},
							{
								loader: 'resolve-url-loader',
								options: {
									sourceMap: true,
								},
							},
							{
								loader: 'sass-loader',
								options: {
									sourceMap: debug,
								},
							},
						],
					},
				],
			},
		}),
});