wattshub-base v1.0.1225

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:

  // 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 install --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