WattsHub-Base Overview

WattsHub-base is a distinguished tool distributed as an npm package, built utilizing React, TypeScript, and Rsuite. It aims to streamline the creation of front-end projects, ensuring efficiency and high standards. In resume, it is a framework for front-end applications easyly grouping multiple projects.

Alongside, WattsHub-back offers orchestration between all hosted projects, providing a cohesive environment for various project integrations.

Key Features:

• Ease of Access and Authorization: Facilitates convenient access and authorization configurations for web pages through 'Intact'.

• Administration Mode: Allows seamless configuration of menus with items, sections, and submenus, enhancing user administrative capabilities.

• Consistent Look and Feel: Offers a uniform appearance across all projects, simplifying user interactions for the user.

Utilization Methodologies:

WattsHub can be utilized in two ways:

1. You provide infra:

   • Start by create a new project (or copy an existing one 'eazy mode') and install the package with npm i wattshub-base, enabling the use of your infrastructure (git, pipeline, k8s, etc.) while being part of WattsHub.

   npm i wattshub-base

   
   ### Configuration Procedure:
   In your application's entry file (usually index.ts), add the following configurations:
   
   ```ts
   // Set Okta configuration variables. Stay updated as Okta will be included in WattsHub-base shortly.
   const issuer: string = process.env.REACT_APP_OKTA_URL;
   const clientId: string = process.env.REACT_APP_OKTA_CLIENT_ID;
   const redirectUri: string = window.location.origin + "/callback";
   const scopes: string[] = ["openid", "profile", "email", "api.fstudio", "api.wattshub", "api.wnb", "api.wattson.woot-feeder.read"];
   
   // Set local projects. Contact the development team to request the creation of your project in WattsHub-Back.
   const localProjectsNames: string[] = ['yourproject'];
   
   // Create your pages within /components
   const internalProjectPages: InternalPage[] = [
   {
       project: 'yourproject',
       label: "Dashboard",
       url: "/yourproject/dashboard",
       render: () => <h1> Dashboard Test page</h1>,
   }
   ];
   
   // Add your routes. For example:
   const localRoutes: Array<WHRoute> = [{
           external: false,
           groups: ["Everyone"], //intact groups
           path: "/yourproject/dashboard/view-contracts/contract/:id",
           label: "Contract",
           render: () => <Contract />,
   }];
   
   //Creating OktaAuth
   const oktaAuth = new OktaAuth({
   issuer: issuer,
   clientId: clientId,
   redirectUri: redirectUri,
   scopes: scopes,
   pkce: true,
   });
   
   //App entry point example
   function App() {
   return (
       <div className="App">
       <Router>
           <Security oktaAuth={oktaAuth}>
           <Switch>
               <Route path="/callback" component={LoginCallback} />
               <SecureRoute path="/" render={() => 
               <WattsHubBase
               processEnv={process.env}
               localProjectsNames={localProjectsNames}
               issuer={issuer}
               clientId={clientId}
               redirectUri={redirectUri}
               scopes={scopes}
               projectPages={internalProjectPages}
               routes={localRoutes} /> } />
           </Switch>
           </Security>
       </Router>
       </div>
   );
   }

2. No infra:

   In case you don't want to manage infrastructre using the WattsHub-front is the way to go.

   Clone WattsHub-front Repository: https://github.tools.digital.engie.com/GEMCEMWattsOn/WattsHub-front

   • Add your pages in /components/yourproject
   • Add your pages to the 'const internalProjectPages:' array
   • Define your routes in 'const localRoutes: Array = [{...'

   WattsHub-front, a repository where you can create your application without concerning about infrastructure like pipelines, K8s, etc., as it's configured for all, including CI/CD.

3. Build WattsHub Base Increasse the version run command: Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass run command: tsc run command on the project: npm i wattshub-base

If you need support don't be shy to contact:

@LOPES Edson @SAVARY Pierre

Execute in local

IN BASE : Fetch the base project from git. Then execute in the console: npm ci npm run build:esm copy paste /images in /dist/esm/ copy paste css files (CustomLoader.module.css and styles.css) in /dist/esm/components npm link

Then go in the project that you want to use the package. remove wattshub-base from package.json npm install npm link wattshub-base if error add "--legacy-peer-deps" ex: npm link wattshub-base --legacy-peer-deps you should see the package in the node_modules but not in the package.json Go to the build of wattshub-base inside the front app. Example: "node_modules/wattshub-base/node_modules" and delete the folder react. then npm start your application.

to apply change, you need to run npm run build:esm in BASE the front should reload automatically

if you need css file in wattshub base, copy the css file into /dist folder and link in the file you want, example : import styles from '../../CustomLoader.module.css'; this is for CustomLoader.tsx in /components