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> ); }
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.
- 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
10 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago