https://github.com/oracle-samples/cerner-smart-embeddable-lib
npm project for developers to use in their SMART web app to be embeddable in Cerner’s MPage Workflow
https://github.com/oracle-samples/cerner-smart-embeddable-lib
Last synced: 11 months ago
JSON representation
npm project for developers to use in their SMART web app to be embeddable in Cerner’s MPage Workflow
- Host: GitHub
- URL: https://github.com/oracle-samples/cerner-smart-embeddable-lib
- Owner: oracle-samples
- License: apache-2.0
- Created: 2017-09-13T18:48:41.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-09-26T12:59:27.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T04:51:14.849Z (over 1 year ago)
- Language: JavaScript
- Size: 1.9 MB
- Stars: 22
- Watchers: 44
- Forks: 31
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Cerner SMART Embeddable Library
In order to run any SMART app in Cerner's MPage view (iframe), the following project is needed. This project provides necessary JavaScript and CSS files to include in any SMART app. The app should work regardless of it being embedded or not when this library is used.
This library uses [xfc](https://github.com/cerner/xfc) to solve [Clickjacking](https://www.owasp.org/index.php/Clickjacking) problem for all browsers.
## NPM Module (Recommended)
Install with the following:
```shell
npm install cerner-smart-embeddable-lib
```
Include it to your project with the following:
```js
import 'cerner-smart-embeddable-lib';
```
It is suggested to import the module (as opposed to including the pre-minified file from `dist/`) as it will allow Webpack to define `process.env.NODE_ENV` which will enable or disable XFC logging. Per the [XFC Readme](https://github.com/cerner/xfc#usage), logging is only enabled in non-production environments. The environment can be set in webpack using the DefinePlugin:
```js
// webpack.config.js
const webpack = require('webpack');
module.exports = {
/*...*/
plugins:[
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
};
```
**Warning:** Disable XFC logging if using [F-Twelve](https://github.com/cerner/f-twelve/). F-Twelve writes to the DOM every time `console.log` is called and (when logging is enabled) XFC calls `console.log` every time the DOM is written to. This causes the browser to endlessly loop and freeze. It is safe to use both concurrently if XFC logging is disabled.
## Script Include (NOT recommended)
If the import method described above is not an option, the transpiled bundle files are available in the `dist/` directory and can be used with a `` tag. This is not suggested because the logging cannot be disabled via webpack (see warning above).
## Dependency
This project requires an additional library:
- [babel-polyfill npm](https://www.npmjs.com/package/babel-polyfill) or
- [babel-polyfill end state](https://babeljs.io/docs/usage/polyfill/#usage-in-browser)
NOTE: Your app *must* bundle this polyfill in order for Cerner SMART Embeddable Library project to function. Since there can only be one instance of Babel polyfill, it is best if your application bundles this polyfill instead of having Babel polyfill packaged with this library.
## Setup
- Install build tools via npm.
```
npm install webpack
```
- Install local build dependencies.
```
npm install
```
## Build
```
npm run build
```
## Config
- Include `hidden` attribute to all of HTML documents. This is a security feature that will hide the HTML document.
```
<!DOCTYPE html>
<html hidden>
```
- Include minified css file from `dist` directory in all of HTML documents. This css is supplementing the `hidden` attribute above. This css will hide the HTML documents when the page is rendered with older browsers that do not support `hidden` attribute.
```
<link rel='stylesheet' type='text/css' href='cerner-smart-embeddable-lib-[version].min.css'>
```
- Include babel-polyfill JavaScript file in all of HTML documents.
```
<script src='/path/to/babel-polyfill.js'>
```
- Include minified JavaScript file from `dist` directory in all of HTML documents before the end of `