Wattshub-base-16 NPM

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>
);
}

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.