# symphony-bdk-mock-client
> A Symphony mock client
Latest version **1.0.20** (published 2020-03-20) · ISC license · 0 weekly downloads
## Install
```sh
npm install symphony-bdk-mock-client
pnpm add symphony-bdk-mock-client
yarn add symphony-bdk-mock-client
bun add symphony-bdk-mock-client
```
Provides the command `symphony-bdk-mock-client`.
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; large bundle.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.20 |
| Published | 2020-03-20 |
| First published | 2020-03-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 24 |
| Unpacked size | 82 MB |
| Known vulnerabilities | 0 (+26 in 3 direct dependencies) |
| Install scripts | no |
| Author | Symphony |
| Maintainers | symphony-platform-solutions |
## Links
- npm: https://www.npmjs.com/package/symphony-bdk-mock-client
- Repository: https://github.com/SymphonyPlatformSolutions/symphony-bdk-mock-client
- Homepage: https://github.com/SymphonyPlatformSolutions/symphony-bdk-mock-client#readme
- Issues: https://github.com/SymphonyPlatformSolutions/symphony-bdk-mock-client/issues
- npm.io page: https://npm.io/package/symphony-bdk-mock-client
## Dependencies (24)
- [yup](https://npm.io/package/yup.md) ^0.27.0
- [axios](https://npm.io/package/axios.md) ^0.18.0
- [react](https://npm.io/package/react.md) ^16.8.6
- [redux](https://npm.io/package/redux.md) ^4.0.1
- [yargs](https://npm.io/package/yargs.md) ^13.3.0
- [prismjs](https://npm.io/package/prismjs.md) ^1.16.0
- [request](https://npm.io/package/request.md) 2.81.0
- [polished](https://npm.io/package/polished.md) ^3.4.2
- [node-sass](https://npm.io/package/node-sass.md) ^4.12.0
- [react-ace](https://npm.io/package/react-ace.md) ^7.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [url-loader](https://npm.io/package/url-loader.md) ^2.0.1
- [file-loader](https://npm.io/package/file-loader.md) ^4.0.0
- [react-redux](https://npm.io/package/react-redux.md) ^7.0.3
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.3.0
- [react-select](https://npm.io/package/react-select.md) ^3.0.8
- [styled-icons](https://npm.io/package/styled-icons.md) ^8.0.0
- [asciify-image](https://npm.io/package/asciify-image.md) ^0.1.5
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.0.0
- [styled-components](https://npm.io/package/styled-components.md) ^4.2.1
- [axios-mock-adapter](https://npm.io/package/axios-mock-adapter.md) ^1.16.0
- [react-flexbox-grid](https://npm.io/package/react-flexbox-grid.md) ^2.1.2
- [babel-plugin-module-resolver](https://npm.io/package/babel-plugin-module-resolver.md) ^3.2.0
## Recent versions
- 1.0.20 (latest) — 2020-03-20
## README
# Symphony BDK Mock Client
[](https://sonarqube-dev.symphonymarket.solutions/dashboard?id=sms-dev-tool-client-mock) |
**Build status**:
[](https://circleci.com/gh/SymphonyPlatformSolutions/symphony-bdk-mock-client/tree/master)
## What you'll need
* NodeJS
* Yarn
## Prepare environment
- First you need to install the stable version of [NodeJs](https://nodejs.org/en/)
- Then you need to install yarn ```npm install -g yarn```
## Architecture
The BDK mock client application uses the [symphony-api.js](https://www.symphony.com/resources/api/v1.0/symphony-api.js)
provided by symphony
and modify on the fly its inner works so it can be used locally. The resulting object **window.SYMPHONY** available
on any extension app running inside the mock client, is a mocked version of that file.
It also uses the same renderer the real symphony client
uses to present rich data, in the form of messageML or presentationML or extensionML.
As a standalone application, by running ```yarn dev:watch``` the mock client will be launched in the following address https://localhost:5000, its server
set to listen to all network interfaces, meaning that if launched it will be available on your local network.
Once Loaded, it will proxy any calls to actual extension app files to https://localhost:4000, this means that any given
extension app project running ```yarn start:mock``` will automatically be loaded on the mock client (page refresh might
be necessary thought)
> Any calls to a be system wont be proxied, therefore setting CORS on your server is a must.
## Embedded Architecture
You may import the mock client into your application, to do so, install this project and be sure to embed the dist
files into your bundle system. like so:
###webpack example:
```jsx harmony
new CopyWebpackPlugin([
{ from: './node_modules/symphony-bdk-mock-client/dist', to: '' },
]),
```
Your extension app might experience some crashes, if that occours thats probably a racing condition that
presents itself. in order to mitigate that we strongly suggest that you wrap your ```app.js``` logic to check
if the mock client is available, like so:
```jsx harmony
/* global SYMPHONY */
let MOCK_USER_SERVICE = null;
const appWrapper = async () => {
// These next lines will be removed on production
/* develblock:start */
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
MOCK_USER_SERVICE = {
getJwt: () => new Promise(Resolve => Resolve('NO JWT')),
};
for (let i = 0; i < 10; i++) {
console.log('Waiting for Symphony Mock...', i);
if (window.SYMPHONY.remote.isMock) {
console.log('Appjs Found it!');
break;
}
await sleep(15);
}
console.log('APPJS GOT', window.SYMPHONY);
/* develblock:end */
const appService = SYMPHONY.services.register(`${APP_ID}:app`);
SYMPHONY.remote.hello().then((data) => {
const themeSize = data.themeV2.size;
const themeColor = data.themeV2.name;
document.body.className = `symphony-external-app ${themeColor} ${themeSize}`;
const appTheme = themeColor.toUpperCase() === THEME_TYPES.DARK
? THEME_TYPES.DARK
: themeColor.toUpperCase() === THEME_TYPES.LIGHT
? THEME_TYPES.LIGHT
: THEME_TYPES.LIGHT;
window.themeColor = appTheme;
window.themeSize = themeSize;
SYMPHONY.application.connect(
APP_ID,
['modules', 'applications-nav', 'ui', 'extended-user-info', 'extended-user-service', 'dialogs'],
[`${APP_ID}:app`],
).then((response) => {
const userId = response.userReferenceId;
const modulesService = SYMPHONY.services.subscribe('modules');
const extendedUserInfoService = SYMPHONY.services.subscribe('extended-user-info');
modulesService.addMenuItem(APP_ID, `About ${APP_TITLE}`, `${APP_ID}-menu-item`);
modulesService.setHandler(APP_ID, `${APP_ID}:app`);
appService.implement({
menuSelect: (itemId) => {
if (itemId === `${APP_ID}-menu-item`) {
document.getElementById(`about-${APP_ID}-app`).className = '';
}
},
});
const store = configureStore();
ReactDOM.render(
, document.getElementById('root'),
);
}).catch((error) => {
throw new Error('Unable to connect the application on client', error);
});
}).catch((error) => {
throw new Error('Unable to reach the data for Extension App, please verify the Authentication with Server', error);
});
};
appWrapper();
```
## Running as a cli
run:
```jsx harmony
yarn link
```
From the cli you'll be able to point to a particular extension app deployed on any given address and load it on the
mock client. Specially usefull when your app doesnt run on default port **4000**
## Running in development
You'll be able to run the project in development mode
simply run:
```jsx harmony
yarn dev:watch
```
While in this mode, any extension app running on port 4000 will be displayed inside the mock client.
## Build release
Simply run:
```jsx harmony
yarn build:prod
```
That will produce new dist files, that need to be commited, versioned and published.
---
_Source: https://npm.io/package/symphony-bdk-mock-client · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._