@talend/scripts-config-react-webpack

Webpack config customisation

Your folder hierarchy should follow

    |_ src
        |_ app
            |_ index.js
        |_ assets
        |_ settings
    |_ cmf.json
    |_ package.json
    |_ talend-scripts.js(on)

Configuration overview

{
	"preset": "@talend/scritps-preset-react",
	"cmf": true,
	"html": {
		"title": "Talend Data Preparation",
		"other-options": "Option value passed to html-webpack-plugin"
	},
	"sass": {
		"data": {
			"$brand-primary": "#4F93A7",
			"$brand-primary-t7": "#00A1B3",
			"$brand-secondary-t7": "#168AA6"
		},
		"theme": "tdp"
	},
	"css": {
		"modules": false,
		"prefix": "resources/"
	},
	"js": {
		"prefix": "resources/"
	},
	"webpack": {
		"debug": true,
		"config": {
			"development": "./webpack.config.dev.js",
			"production": "./webpack.config.prod.js"
		}
	},
	"dynamic-cdn-webpack-plugin": {
		"exclude": ["react-router-dom"]
	},
	"sentry": {
		"org": "talend",
		"project": "tmc",
		"include": ["dist"],
		"ignore": ["dist/cdn"]
	}
}

HTML

{
	"preset": "talend",
	"html": {
		"title": "Talend Data Preparation",
		"other-options": "Option value passed to html-webpack-plugin"
	}
}

by default the configuration will try to find custom html to add to the default

Meta tags

You can use the option meta which exists in the HTML webpack plugin like this:

{
	"html": {
		"meta": { "metaname": "metavalue", "bis": "foo" }
	}
}

This is quite simple to use and understand but not enough flexible to add other attributes to the tag.

For more advanced use case talend-scripts will try to read .talend/head.html and will insert the results in the head tag.

Template

By default you don't need to provide a template. The configuration will try to find the file but if not found it will fallback to our default template.

To customize html output you have the following options:

• add src/app/index.html only if you need to remove things from the current output
• add .talend/head.html so you can add anything in the head.
• add .talend/body.html so you can add anything in the body (useful for react portals).

Note: if you do not use our template you will have to add support for options.

App loader in a custom template

By default, a static app loader is available to be displayed during your webapp download. The loader contains the Talend logo.

If you have a custom template and you want to use it, you must deal with the html-webpack-plugin option named appLoader.

	
		<div id="app">&lt;%= htmlWebpackPlugin.options.appLoader %&gt;</div>
	

To change the logo, you can customise the appLoaderIcon variable in configuration.

{
	"preset": "talend",
	"html": {
		"appLoaderIcon": "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov+"
	}
}

Sass/Css

You can pass all sass variables you need. Those will be loaded before any sass file.

{
	"preset": "talend",
	"sass": {
		"data": {
			"$brand-primary": "red"
		}
	}
}

In case you want to load one of T7+ @talend/bootstrap-theme variation, you can pass the variation name.

{
	"preset": "talend",
	"sass": {
		"theme": "tdp"
	}
}

By default, css modules are activated. To deactivate them,

{
	"preset": "talend",
	"css": {
		"modules": false
	}
}

Webpack

You can add the debug option to true so the webpack configuration will be printed to the output.

{
	"preset": "talend",
	"webpack": {
		"debug": true
	}
}

CMF

Talend preset integrates cmf-webpack-plugin. By default it is deactived, to enable it:

{
	"preset": "talend",
	"cmf": true
}

It has an incompatibility with copy-webpack-plugin. To use it correctly

1. Create your settings.json, be careful not to create it in one of the folders copied by copy-webpack-plugin. Otherwise you'll end up in an infinite loop.
2. Create a cmf.json at your app root folder and configure it. Important : remove the destination property. cmf-webpack-plugin will output the result in a settings.json in the webpack output folder.
3. In your cmf app index file, you can fetch the settings from /settings.json.

Versions

Some variables are injected as global.

To include the git SHA1 of each talend libraries version, you need to provide a sha1.json, mapping the libraries with their SHA1. Note that the librairies from @talend/ui will be gather into 1 library info.

Example

sha1.json

{
	"@talend/dataset": "785a5552a4b",
	"@talend/rating": "156c32bc15",
	"@talend/ui": "8c8cb6544fe"
}

package.json

{
	"version": "3.6.0",
	"dependencies": {
		"@talend/react-components": "^2.6.0",
		"@talend/react-forms": "^2.6.0",
		"@talend/dataset": "1.5.0",
		"@talend/sharing": "1.2.1"
	}
}

Result (TALEND_APP_INFO)

const TALEND_APP_INFO = {
	version: '3.6.0',
	revision: '654fe645b5c84',
	talendLibraries: [
		{
			name: '@talend/ui',
			version: '^2.6.0',
			revision: '8c8cb6544fe',
		},
		{
			name: '@talend/dataset',
			version: '1.5.0',
			revision: '785a5552a4b',
		},
		{
			name: '@talend/sharing',
			version: '1.2.1',
			revision: undefined,
		},
	],
};

whyDidYouRender

This package bundles automatically for dev only whyDidYouRender library to help you investigate React rendering issues.

webpack-bundle-analyzer and inspectpack/plugin

You can add these plugin by passing --env analyze option to your start / build webpack command.

How to use?

// log only if rendering occurs while props values are the same
Component.whyDidYouRender = true;

Component.whyDidYouRender = {
	logOnDifferentValues: true, // log on every change of props
	customName: 'Menu', // change the name of the log for this component
};

If your component is cmf connected you also can do the following

{ "props": { "MyComponent#its-component-id-or-default": { "whyDidYouRender": true } } }

Route basename

If you want to serve the app under a basename, set a BASENAME environment variable before start.

{
	"scripts": {
		"start": "BASENAME=/tdc/ talend-scripts start"
	}
}

Sentry

Sentry config is only used for build script in production mode. If you add this config it will:

1. Create a new release for your project on Sentry. Release version will be taken from package.json's version.
2. Upload sourcemaps to Sentry.

{
	"sentry": {
		"org": "talend-0u",
		"project": "tmc",
		"include": ["dist"],
		"ignore": ["dist/cdn"]
	}
}

Sentry authToken is also required. It's the authentication token to use for all communication with Sentry. Can be obtained from https://sentry.io/settings/account/api/auth-tokens/. Required scopes: project:releases (and org:read if setCommits option is used). There're several ways to configure authToken. You can choose a convient one to configure it for CI. Sentry CLI will pick up these configurations automatically.

1. Environment variables:

> SENTRY_AUTH_TOKEN=[yourToken] talend-scripts build

2. Config file: provide a .sentryclirc in the root of your app, with your token and other info.

[defaults]
org=[yourOrg]
project=[yourProjectId(eg. tmc)]

[auth]
token=[yourToken]

For more information, see Sentry CLI configuration values

dynamic-cdn-webpack-plugin

This entry let you pass options to the plugin @talend/dynamic-cdn-webpack-plugin.

If you want you can also pass false to desactivate the plugin.

{
	"preset": "@talend/scritps-preset-react",
	"dynamic-cdn-webpack-plugin": false
}