Dev Console Common Elements POC

Dev Console Common Elements contains common elements (Header, Footer etc) that all tenants of Dev Console will be required to import and use in order to achieve a common user interface.

How it works

This project is a react app that will look to mount itself onto two elements. Elements with specific ids will need to be set on the tenanat's web pages:
1. dev-console-header
2. dev-console-footer

``html









`

Once these Ids are set in your html page, load in the Dev Console Common Element's JS bundle from the JSDelivr CDN https://cdn.jsdelivr.net/npm/@tankunsheng/dev-console-common-elements@0.2.0/build/devconsole.bundle.js (Change version as needed) and the bundle will run a script that will mount React apps onto the DOM at these two mount points.

$3


`html

`

Note!

Sass-loader and style-loader has been replaced with styled-components as we do not want to interfere or collide with tenant's style sheets.

Style-loader was initially chosen because we want to serve out just one bundled.js file, no additional chunks, or any .css files at all, just one file for easy loading and consumption.

Scripts bundled with style-loader will inject css style tags in head, however, these css styles are unscoped (global to the entire document) and is highly likely to clash with tenant's styles.

Therefore, style-components is selected to replace style-loader as it achieves the objectives of
* Only a single bundled JS to be served
* Does not interfere with tenant's styles as it generates dynamically scoped css class names

Example of styles injected by styled-components with scoped class names:
`css


`

Development

This project is scaffolded with React, Webpack, Babel. Necessary webpack loaders added as required to preprocess non .js files and babel to transpile react and typescript to .js files.


To develop locally (served through webpack-serve)

`bash
npm start
`

Build and Publish

1. Builds out a single js bundle (devconsole.bundle.js)
2. Publish onto NPM
3. Serve through jsDelivr or other CDN

`bash
npm publish
``

Alternatively, build and serve devconsole.bundle.js from anywhere you prefer. Be mindful that the tenant's apps will be required to configure CSP headers for these sources.