11.1.1 • Published 3 months ago

@talend/scripts-config-react-webpack v11.1.1

Weekly downloads
1,393
License
Apache-2.0
Repository
github
Last release
3 months ago

Webpack config customisation

Your folder hierarchy should follow

<root>
    |_ src
        |_ app
            |_ index.js
            |_ index.html
        |_ assets
        |_ settings
    |_ cmf.json
    |_ package.json
    |_ talend-scripts.js(on)
Folder/FileDescription
src/appYour application code
src/app/index.jsYour entry point
src/app/index.htmlYour html template
assetsThe assets such as images. This folder content is copied via copy-webpack-plugin.
settingsYour settings. This can be changed, depending or your cmf.json configuration, but DO NOT put the settings in assets.

Configuration overview

{
  "preset": "talend",
  "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"
    }
  }
}
Preset variableDescription
cmfcmf-webpack-plugin flag.
htmlhtml-webpack-plugin template and options customisation.
sasssass-loader customisation.
csscss-loader customisation.
jsjs customisation.
webpackwebpack and devServer customisation.

HTML

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

All those options are passed as html-webpack-plugin options. It goes in pair with your index.html template. By default, your html template is located in src/app/index.html, which can be overridden with the preset html configuration.

{
  "preset": "talend",
  "html": {
    "template": "my-template-path"
  }
}

App loader

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

To use it, you have 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+"
  }
}

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.

VariableDescription
BUILD_TIMESTAMPThe built timestamp.
TALEND_APP_INFOVersioning 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.versionCurrent app version (from package.json).
TALEND_APP_INFO.revisionCurrent 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
        },
    ]
}

whyDidYouRender

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

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"
  }
}
11.1.1

3 months ago

11.1.0

3 months ago

11.0.3

4 months ago

11.0.2

4 months ago

11.0.0

4 months ago

11.0.1

4 months ago

9.10.6

4 months ago

9.10.7

4 months ago

9.10.5

5 months ago

9.10.4

5 months ago

9.10.2

7 months ago

9.10.3

7 months ago

9.10.1

8 months ago

9.10.0

8 months ago

9.9.7

8 months ago

9.9.6

8 months ago

9.9.5

8 months ago

9.9.4

9 months ago

9.9.3

9 months ago

9.9.2

10 months ago

9.9.1

10 months ago

9.8.0

10 months ago

9.8.0-jso.0

10 months ago

9.8.0-jso.1

10 months ago

9.7.0-alpha.0

10 months ago

9.7.0-alpha.1

10 months ago

9.7.0

10 months ago

9.6.2

10 months ago

9.6.1

10 months ago

9.6.0

10 months ago

9.5.1

11 months ago

9.5.0

11 months ago

9.4.1

11 months ago

9.4.0

11 months ago

9.3.2

11 months ago

10.1.0

11 months ago

10.0.1

11 months ago

10.0.2

11 months ago

9.3.1

11 months ago

9.3.0

11 months ago

10.0.0-alpha.1

11 months ago

9.2.2-alpha.0

11 months ago

9.2.2

11 months ago

9.2.1-alpha.6

11 months ago

9.2.1-alpha.5

11 months ago

9.2.1

11 months ago

9.2.1-alpha.2

11 months ago

9.2.1-alpha.1

11 months ago

9.2.1-alpha.4

11 months ago

9.2.1-alpha.3

11 months ago

9.2.1-alpha.0

11 months ago

9.2.0

11 months ago

9.2.0-alpha.1

12 months ago

9.2.0-alpha.0

12 months ago

9.1.0

12 months ago

9.0.1

12 months ago

9.1.0-ng.0

12 months ago

7.5.1

12 months ago

9.0.0

12 months ago

9.1.0-alpha.0

12 months ago

9.0.0-jest.0

12 months ago

8.0.2

12 months ago

8.0.1-jest.0

12 months ago

8.0.1

12 months ago

8.0.0

12 months ago

7.5.1-alpha.0

12 months ago

7.5.0

12 months ago

8.0.0-jest.26

12 months ago

7.4.3

1 year ago

7.4.2

1 year ago

7.4.1

1 year ago

7.4.0

1 year ago

7.3.1

1 year ago

8.0.0-alpha.2

1 year ago

8.0.0-alpha.1

1 year ago

7.3.0

1 year ago

7.2.1

1 year ago

7.1.3

1 year ago

7.2.0

1 year ago

7.1.2

1 year ago

7.1.1

1 year ago

7.1.0

1 year ago

6.10.1

1 year ago

7.0.5

1 year ago

7.0.4

1 year ago

7.0.3

1 year ago

7.0.2

1 year ago

7.0.1

1 year ago

7.0.2-alpha.0

1 year ago

7.0.2-alpha.1

1 year ago

7.0.1-alpha.1

1 year ago

7.0.1-alpha.0

1 year ago

7.0.0

1 year ago

6.10.0

1 year ago

7.0.0-alpha.48

1 year ago

7.0.0-alpha.47

1 year ago

6.9.1

1 year ago

6.9.0

1 year ago

7.0.0-alpha.46

1 year ago

7.0.0-alpha.45

1 year ago

6.8.2

1 year ago

6.8.1

1 year ago

6.8.0

1 year ago

7.0.0-alpha.44

1 year ago

7.0.0-alpha.43

1 year ago

7.0.0-alpha.42

1 year ago

7.0.0-alpha.41

1 year ago

7.0.0-alpha.39

1 year ago

7.0.0-alpha.40

1 year ago

7.0.0-alpha.38

1 year ago

7.0.0-alpha.37

1 year ago

6.7.0

1 year ago

7.0.0-alpha.36

1 year ago

7.0.0-alpha.34

1 year ago

7.0.0-alpha.33

1 year ago

7.0.0-alpha.32

1 year ago

7.0.0-alpha.31

1 year ago

7.0.0-alpha.30

1 year ago

7.0.0-alpha.29

1 year ago

6.6.1

1 year ago

7.0.0-alpha.27

1 year ago

7.0.0-alpha.28

1 year ago

7.0.0-alpha.26

1 year ago

7.0.0-alpha.25

1 year ago

7.0.0-alpha.24

1 year ago

6.6.0

1 year ago

7.0.0-alpha.23

1 year ago

7.0.0-alpha.22

1 year ago

7.0.0-alpha.21

1 year ago

7.0.0-alpha.20

1 year ago

7.0.0-alpha.19

1 year ago

7.0.0-alpha.15

1 year ago

7.0.0-alpha.16

1 year ago

7.0.0-alpha.13

1 year ago

7.0.0-alpha.17

1 year ago

7.0.0-alpha.18

1 year ago

7.0.0-alpha.11

1 year ago

7.0.0-alpha.12

1 year ago

7.0.0-alpha.10

1 year ago

6.5.0

1 year ago

7.0.0-alpha.7

1 year ago

7.0.0-alpha.9

1 year ago

7.0.0-alpha.8

1 year ago

7.0.0-alpha.6

1 year ago

7.0.0-alpha.5

1 year ago

6.4.2

1 year ago

6.4.1

1 year ago

6.4.0

1 year ago

6.4.0-alpha.3

1 year ago

6.4.0-alpha.0

1 year ago

6.4.0-alpha.2

1 year ago

6.4.0-alpha.1

1 year ago

6.3.2

2 years ago

7.0.0-alpha.4

2 years ago

7.0.0-alpha.3

2 years ago

6.3.1

2 years ago

7.0.0-alpha.2

2 years ago

7.0.0-alpha.1

2 years ago

6.3.0

2 years ago

7.0.0-alpha.0

2 years ago

6.2.5

2 years ago

6.2.4

2 years ago

6.2.3

2 years ago

6.2.2

2 years ago

6.2.1

2 years ago

6.2.0

2 years ago

6.1.0

2 years ago

6.0.0

2 years ago

5.3.0

2 years ago

5.2.1

2 years ago

5.2.0

2 years ago

5.1.2

2 years ago

5.1.1

2 years ago

5.1.0

2 years ago

5.0.0

2 years ago

5.0.0-alpha.2

2 years ago

5.0.0-alpha.1

2 years ago

5.0.0-alpha.0

2 years ago

4.0.0

2 years ago

3.3.3

2 years ago

3.3.2

2 years ago

3.3.1

2 years ago

3.3.0

2 years ago

3.2.0

2 years ago

3.2.0-alpha.0

2 years ago

3.1.1

2 years ago

4.0.0-alpha.0

2 years ago

3.1.0

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

2.6.1

2 years ago

2.6.0

2 years ago

2.5.0

2 years ago

2.4.0

2 years ago

2.3.0

2 years ago

2.2.2

2 years ago

2.2.1

2 years ago

2.1.0

2 years ago

2.0.0

2 years ago

1.0.0

3 years ago

1.0.0-alpha.1

3 years ago

1.0.0-alpha.0

3 years ago