Boilerplate

Installation and start developing

npm install

Installs all needed npm-packages to /node_modules

npm start

Starting webpack dev server with hot reloading on http://localhost:8080

To develop a host or a swidget, you can use npm run start:host or npm run start:swidget.
For swidget dev mode, the swidget will be hosted as //localhost:7070/swidget.js.

Build Application / Host-Application / Swidget

There are a couple of different build jobs specified:

build

npm run build

NOT suitable if you want to build a swidget or a host-app

Usecase: Application where support for swidgets is not necessary.

build:host

npm run build:host

creates a bundle which exposes other libraries

Mandatory if your app should act as a host app which loads swidgets

Usecase: Application that should be a host-app for swidgets, e.g. a dashboard.

build:swidget

npm run build:swidget

creates a bundle which can be hot-loaded (this is a Swidget)

Mandatory if you want to build a Swidget

Usecase: Application that should integrate into a host-app.

Build script configuration (ENV parameter)

As you can see in the package.json each build:* and start:* script differs by the usage of --env.* parameters. There are a few different env parameters you can use:

• --env.build=*: which type of build. Options are dev or prod
• --env.swidget=*: build as swidget instead of standalone host app. Options are true or false
• --env.exposed=*: swidget hosting capabilities. Options are true, false
• --env.sourceMap=*: JS source map generation. Options are true, false and all valid webpack options
• --emv.verbose=*: verbose logging. Options are true, false

Environment based configuration

You can specify different configuration files for each of your staging environments.
This is particularly handy if you have different API urls for each stage.

In the folder config you can store different configuration files which will be loaded if you define them in the package.json scripts. For matching the filename will be used.

For example you have a stage called integration:

First you create a file named integration.tsx within /config/ which matches the content of your default.tsx.
Then you add (or change) a script job in your package.json like the following:

    "build:custom": "webpack --env.build=prod --env.config=integration",

Important swidget build information

In order to optimize the size of the resulting swidget artefact, certain dependencies (like react for example) are expected to be provided by the host-app. Therefore those packages are marked as exposed in the webpack config of a swidget and have to be exposed by the host-app.

For more information check the .build/README.md and .build/exposed.modules.custom.js.