Getting Started

Building a Component from scratch

Follow the steps in this page to get started with developing the Sample Component On this page, you will learn how to build simple Component and integrate with MyHub. In the newdirectory use the following command to generate a package.json file

npm init

The Next Step is to add the Component in the src folder

import * as React from "react";

export default function SampleDiv(): React.ReactElement {
    return <div>Hello, world!</div>;
}

Add config.js in the src folder and copy the following lines of code to convert the SampleDiv.tsx into dashboard-card.js bundle.This config file is used in the webpack.config.js for bundling

module.exports = {
    "dashboard-card": "./src/SampleDiv.tsx"
};

Open package.json in your code editor, and add a webpack script (right after the babel script). Also include the related dependencies. The scripts section should now look like this:

{
    "name": "samplepartnerapi",
    "version": "1.0.12",
    "description": "",
    "main": "src/SampleDiv.tsx",
    "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},
    "keywords": [],
    "author": "",
    "license": "ISC",
    "types": "lib/SampleDiv.d.ts",
    "dependencies": {
    /*Add all the required dependencies*/
        "@uifabric/charting": "^0.138.0",
        "axios": "^0.19.0",
        "office-ui-fabric-react": "^7.61.1",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-redux": "^7.1.3",
        "react-router-dom": "^5.1.2",
        "redux": "^4.0.4",
        "redux-logger": "^3.0.6",
        "redux-persist": "^6.0.0",
        "redux-saga": "^1.1.3",
        "styled-components": "^4.4.1"
},
    "devDependencies": {
        "eslint": "^6.6.0",
        "eslint-config-prettier": "^6.7.0",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-react": "^7.16.0",
        "eslint-plugin-react-hooks": "^2.3.0",
        "@babel/plugin-transform-modules-commonjs": "^7.7.0",
        "ts-loader": "^6.2.1",
        "typescript": "^3.7.2",
        "webpack": "^4.41.2",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.9.0"
}

}

Create a new file named webpack.config.js defined as follows:

    var path = require("path");
    var webpack = require("webpack");
    const dashboardDynamicCompnoents = require("./src/config");
    
    const dynamicComponents = {
      /* =========================
       * Add micro-frontend app entry points here
       * ====================== */
      ...dashboardDynamicCompnoents
    };
    
    const globals = {
      /* =========================
       * Add build time variables here
       * These variables also need to added in ./global.d.ts file to be available in Typescript
       * ====================== */
    
      __APP_NAME__: "partnerapi",
      __CLIENT_ID__: process.env.clientId || "dd722e00-f76f-4f10-89cb-f9f8ae3f9b7a",
      __BASE_URL__: process.env.baseUrl || "http://localhost:9003",
      __INSTRUMENTATION_KEY__:
        process.env.instrumentationKey || "958d6073-76a5-443a-9901-9ec4c35c030e"
    };
    
    module.exports = {
      entry: dynamicComponents,
      output: {
        path: path.join(__dirname, "public", "bundles"),
        library: ["__WIDGETS__", "[name]"],
        libraryTarget: "umd"
      },
      externals: {
        react: "React",
        "react-dom": "ReactDOM",
        "react-router-dom": "ReactRouterDOM",
        "styled-components": "styled"
      },
      module: {
        rules: [
          {
            test: /\.ts|\.tsx$/,
            loader: "ts-loader",
            options: {
              transpileOnly: true
            }
          }
        ]
      },
      resolve: {
        extensions: [".ts", ".tsx", ".js"],
        modules: [path.resolve(__dirname, "node_modules"), "node_modules"]
      },
      plugins: [new webpack.DefinePlugin(stringifyConfigValues(globals))],
      devServer: {
        contentBase: path.join(__dirname, "public"),
        compress: true,
        port: 9001,
        historyApiFallback: true,
        writeToDisk: true,
        https: true
      }
    };
    
    function stringifyConfigValues(config) {
      const result = {};
      Object.keys(config).forEach(key => {
        result[key] = JSON.stringify(config[key]);
      });
    
      return result;
    }

Please note that the react dependencies should be added to externals.This allows us to load the dependencies dynamically and reduces the size our code. Also it helps to avoid the version conflicts. Add the global.d.ts file

import * as styledUMD from 'styled-components';

declare global {
    const styled: typeof styledUMD.default;
    const __APP_NAME__: string;
    const __CLIENT_ID__: string;
    const __BASE_URL__: string;
    const __INSTRUMENTATION_KEY__: string;
}

Create a new file named tsconfig.js defined as follows

    {
      "compilerOptions": {
        "jsx": "react",
        "moduleResolution": "node",
        "sourceMap": true,
        "lib": ["dom", "es6"],
        "target": "es5",
        "module": "commonjs",
        "declaration": true,
        "outDir": "./lib",
        "strict": true,
        "esModuleInterop": true
      },
      "include": ["./src/**/*.tsx", "./src/**/*.ts", "./src/ts/**/*"],
      "exclude": ["node_modules"]
    }

Finally, the setup is ready. On the command line, make sure you are in the es6-tutorial directory and type the following command to build the application:

yarn
yarn start

Bundle file is generated using the webpack in the public folder. Please upload the respective bundlefile in Azure CDN.

Integration with MyHub

We have leveraged the Dynamic Component of EE framework to add the component to the MyHub dynamically. Firstly , In the Card.tsx(src/Pages/Dashboard/Card) , import the DynamicComponent dependency by the adding the following code.

import { ComponentProvider } from '@employee-experience/common/lib/ComponentProvider';

Next , Add the following lines of code to integrate the component with myhub.Please make sure the name in the componentConfig is same as the name of the component.

const componentConfig: IComponentConfig = {
    id: 'HELLOCARD_UNIQUE_ID',
    name: 'HelloCard',
    script: 'https://myhubstorageaccount.blob.core.windows.net/myhubcontainer/dashboard-card.js'
};

In <Styled.Body> tag, replace the code as given below

<ComponentProvider
    renderPlaceholder={(): React.ReactElement => <ErrorCard />}
    renderError={(): React.ReactElement => <ErrorCard />}
    config={componentConfig}
/>

Finally , Please build the solution using the following code. The Sample Component is integrated with MyHub and ready for Testing.

yarn
yarn start