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

Usage

TL;DR You can use one of our boilerplates as a starting point for your project instead.

1. Simulate the output of your server in development

Create <project root>/public/YourAppName/index.ejs:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

For details on how to write a template, see html-webpack-plugin.

2. Add some scripts to your package.json

{
	"scripts": {
		"start": "react-union-scripts start --app YourAppName",
		"build": "react-union-scripts build"
	}
}

3. Create your application entry point

Source code of your <project root>/src/apps/YourAppName/index.js file may look like this:

import React from 'react';
import { render } from 'react-dom';

render('Hello World', document.getElementById('root'));

4. Run the application

Start a development server

yarn start --app YourAppName

Start a proxy server

yarn start --app YourAppName --proxy

Production build

Build all available apps

yarn build --release

or just a single one

yarn build --app YourAppName --release

Running Jest tests

Run in watch mode

yarn test

or run just once

yarn test --release

Analyze build

Runs webpack-bundle-analyzer.

yarn start --app YourAppName --analyze