WattsHub-Base Overview

WattsHub-Base is a robust and versatile framework distributed as an npm package, developed using React, TypeScript, and Rsuite. It simplifies the development of front-end applications by offering a unified structure and reusable components, ensuring efficiency and consistency across projects.

This base package integrates seamlessly with WattsHub-Back, enabling cohesive orchestration and communication between hosted projects within the WattsHub ecosystem.

Key Features

• Centralized Access and Authorization:
  Manage user access and authorization effectively with built-in support for authentication (e.g., Okta integration).

• Dynamic Administration Mode:
  Configure menus, sections, and submenus effortlessly for enhanced user management capabilities.

• Global Components:
  Components available across all applications like ViewControls (check src/components/view-controls/README.md).

• Flexible Deployment Options:
  Supports both infrastructure-independent and user-managed infrastructure setups.

Installation and Configuration

Option 1: Self-Managed Infrastructure

1. Install the WattsHub-Base package:

   npm i wattshub-base

2. Configure your application in the entry file (e.g., index.ts):

   import { WattsHubBase, InternalPage, WHRoute } from 'wattshub-base';
   
   const oktaAuth = new OktaAuth({
       issuer: process.env.REACT_APP_OKTA_URL,
       clientId: process.env.REACT_APP_OKTA_CLIENT_ID,
       redirectUri: `${window.location.origin}/callback`,
       scopes: ['openid', 'profile', 'email', 'api.wattshub', 'api.wnb', 'api.wnb'],
       pkce: true,
   });
   
   const localProjectsNames = ['yourproject'];
   const internalProjectPages: InternalPage[] = [
      { 
        project: 'yourproject', 
        label: "Dashboard", 
        url: "/yourproject/dashboard", 
        render: () => <h1>Dashboard Test Page</h1> 
      },
   ];
   
   const localRoutes: WHRoute[] = [
      { 
        path: "/yourproject/dashboard/view-contracts/contract/:id", 
        label: "Contract", 
        render: () => <Contract />, 
        groups: ["Everyone"] 
      },
   ];
   
   function App() {
       return (
           <Router>
               <Security oktaAuth={oktaAuth}>
                   <Switch>
                       <Route path="/callback" component={LoginCallback} />
                       <SecureRoute path="/" render={() => (
                           <WattsHubBase
                               processEnv={process.env}
                               localProjectsNames={localProjectsNames}
                               issuer={oktaAuth.issuer}
                               clientId={oktaAuth.clientId}
                               redirectUri={oktaAuth.redirectUri}
                               scopes={oktaAuth.scopes}
                               projectPages={internalProjectPages}
                               routes={localRoutes}
                           />
                       )} />
                   </Switch>
               </Security>
           </Router>
       );
   }

3. Run your project, leveraging the api's from WattsHub-Base.

Option 2: Use Pre-Configured WattsHub Infrastructure

If managing infrastructure isn't a priority, clone the WattsHub-Front repository to focus solely on feature development:
WattsHub-Front Repository

• Add your pages under /components/yourproject.
• Define routes and pages in internalProjectPages and localRoutes as needed.

This setup includes preconfigured pipelines, CI/CD, and other operational requirements.

Development and Local Setup

Building the Package

1. Update the version in package.json.
2. Run the following commands:

   Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
   tsc
   npm i wattshub-base

Using Locally in Development

1. Fetch the WattsHub-Base repository and execute:

   npm ci
   npm run build:esm

2. Copy assets to the distribution folder:

   • /images → /dist/esm/
   • CSS files (e.g., CustomLoader.module.css, styles.css) → /dist/esm/components

3. Link the package:

   npm link

4. In the consuming project:

   • Remove wattshub-base from package.json.

   • Install the local package:

     npm link wattshub-base

   • If errors occur, try:

     npm link wattshub-base --legacy-peer-deps

   • Verify that the package is present in node_modules but not in package.json.

   • Navigate to the base build inside the consuming project (e.g., node_modules/wattshub-base/node_modules) and delete the react folder.

   • Start the application:

     npm start

   • If you have error : Go to the build of wattshub-base inside the front app, example: "node_modules/wattshub-base/node_modules" and delete the folder react.

5. To apply changes to the base:

   • Rebuild the package:

     npm run build:esm

   • Restart the consuming application if necessary.

CSS Usage in Components

If custom styles are needed:

1. Copy the CSS file into the /dist folder.
2. Import it where required:

   import styles from '../../CustomLoader.module.css';

Support

For any assistance, please reach out to:

• Edson Lopes
• Pierre Savary

This README ensures clarity and sets the stage for developers to efficiently understand and utilize your base project. Let me know if you'd like to expand or refine any section further!