Your folder hierarchy should follow
<root>
|_ src
|_ app
|_ index.js
|_ assets
|_ settings
|_ cmf.json
|_ package.json
|_ talend-scripts.js(on)
Folder/File | Description |
---|---|
src/app | Your application code |
src/app/index.js | Your entry point |
assets | The assets such as images. This folder content is copied via copy-webpack-plugin . |
settings | Your settings. This can be changed, depending or your cmf.json configuration, but DO NOT put the settings in assets. |
{
"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"]
}
}
Preset variable | Description |
---|---|
cmf |
cmf-webpack-plugin flag. |
html |
html-webpack-plugin template and options customisation. |
sass |
sass-loader customisation. |
css |
css-loader customisation. |
js |
js customisation. |
webpack |
webpack and devServer customisation. |
sentry |
sentry release config. |
{
"preset": "talend",
"html": {
"title": "Talend Data Preparation",
"other-options": "Option value passed to html-webpack-plugin"
}
}
html options | type | description |
---|---|---|
title | string | fill the title tag in head |
meta | object | add <meta name="objectkey" content="object value" />
|
template | string | default to src/app/index.html
|
appId | string | id of your app will be used in many places |
appLoaderIcon | string | base64 encoded version of icon to use as AppLoader |
...rest | rest will be passed to HTML webpack plugins |
by default the configuration will try to find custom html to add to the default
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.
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.
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
.
<html>
<body>
<div id="app"><%= htmlWebpackPlugin.options.appLoader %></div>
</body>
</html>
To change the logo, you can customise the appLoaderIcon
variable in configuration.
{
"preset": "talend",
"html": {
"appLoaderIcon": "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov+"
}
}
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
}
}
You can add the debug option to true so the webpack configuration will be printed to the output.
{
"preset": "talend",
"webpack": {
"debug": true
}
}
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
- Create your
settings.json
, be careful not to create it in one of the folders copied bycopy-webpack-plugin
. Otherwise you'll end up in an infinite loop. - 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 asettings.json
in the webpack output folder. - In your cmf app index file, you can fetch the settings from
/settings.json
.
Some variables are injected as global.
Variable | Description |
---|---|
BUILD_TIMESTAMP | The built timestamp. |
TALEND_APP_INFO | Versioning of current app and @talend libs. To get the libs git SHA1, you need to provide sha1.json containing the sha of the packages (example below). |
TALEND_APP_INFO.version | Current app version (from package.json ). |
TALEND_APP_INFO.revision | Current app version last commit SHA1 (determined with git rev-parse HEAD ). |
TALEND_APP_INFO.talendLibraries | @talend libs infos (name, SHA1 if provided in sha1.json , version from package.json ). |
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,
},
],
};
This package bundles automatically for dev only whyDidYouRender library to help you investigate React rendering issues.
You can add these plugin by passing --env analyze
option to your start / build webpack command.
// 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 } } }
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 config is only used for build script in production mode. If you add this config it will:
- Create a new release for your project on Sentry. Release version will be taken from
package.json
's version. - Upload sourcemaps to Sentry.
{
"sentry": {
"org": "talend-0u",
"project": "tmc",
"include": ["dist"],
"ignore": ["dist/cdn"]
}
}
sentry options | type | description |
---|---|---|
org | string | Optional. The slug of the organization to use for a command. Defaults to 'talend-0u'. It also can be configured by environment variable SENTRY_ORG . |
project | string | Required. The slug of the Sentry project associated with the app. It also can be configured by environment variable SENTRY_PROJECT . |
include | string/array/object | Optional. One or more paths that Sentry CLI should scan recursively for sources. It will upload all .map files and match associated .js files. Defaults to ["dist"] . More info here. |
ignore | string/array | Optional. One or more paths to ignore during upload, defaults to ["cdn"] , so sourcemaps inside dist/cdn won't be uploaded as default. |
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.
- Environment variables:
> SENTRY_AUTH_TOKEN=[yourToken] talend-scripts build
- 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
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
}