1.0.1225 • Published 10 months ago

wattshub-base v1.0.1225

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

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

  1. 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

1.0.1225

10 months ago

1.0.1128

1 year ago

1.0.1224

11 months ago

1.0.1223

11 months ago

1.0.1222

11 months ago

1.0.1221

11 months ago

1.0.1220

11 months ago

1.0.1219

11 months ago

1.0.1218

11 months ago

1.0.1217

12 months ago

1.0.1216

12 months ago

1.0.1215

12 months ago

1.0.1213

12 months ago

1.0.1211

12 months ago

1.0.1210

12 months ago

1.0.1209

12 months ago

1.0.1208

12 months ago

1.0.1207

12 months ago

1.0.1206

12 months ago

1.0.1205

12 months ago

1.0.1204

12 months ago

1.0.1203

12 months ago

1.0.1202

1 year ago

1.0.1201

1 year ago

1.0.1200

1 year ago

1.0.1130

1 year ago

1.0.1127

1 year ago

1.0.1126

1 year ago

1.0.1125

1 year ago

1.0.1124

1 year ago

1.0.1123

1 year ago

1.0.1122

1 year ago

1.0.1121

1 year ago

1.0.1120

1 year ago

1.0.1119

1 year ago

1.0.1117

2 years ago

0.0.1080

2 years ago

0.0.1082

2 years ago

0.0.1081

2 years ago

0.0.1084

2 years ago

0.0.1083

2 years ago

0.0.1086

2 years ago

0.0.1085

2 years ago

0.0.1088

2 years ago

0.0.1087

2 years ago

0.0.1089

2 years ago

0.0.1073

2 years ago

0.0.1072

2 years ago

0.0.1075

2 years ago

0.0.1074

2 years ago

0.0.1077

2 years ago

0.0.1076

2 years ago

0.0.1079

2 years ago

0.0.1078

2 years ago

1.0.1116

2 years ago

1.0.1115

2 years ago

1.0.1114

2 years ago

1.0.1112

2 years ago

1.0.1111

2 years ago

1.0.1110

2 years ago

1.0.1109

2 years ago

1.0.1108

2 years ago

1.0.1107

2 years ago

1.0.1106

2 years ago

1.0.1105

2 years ago

1.0.1104

2 years ago

1.0.1103

2 years ago

1.0.1102

2 years ago

1.0.1101

2 years ago

1.0.1100

2 years ago

1.0.1099

2 years ago

1.0.1098

2 years ago

1.0.1097

2 years ago

1.0.1096

2 years ago

1.0.1095

2 years ago

1.0.1094

2 years ago

1.0.1093

2 years ago

1.0.1092

2 years ago

1.0.1091

2 years ago

1.0.1090

2 years ago

0.0.1071

2 years ago

0.0.1070

2 years ago

0.0.1069

2 years ago

0.0.1068

2 years ago

0.0.1067

2 years ago

0.0.1066

2 years ago

0.0.1065

2 years ago

0.0.1064

2 years ago

0.0.1063

2 years ago

0.0.1062

2 years ago

0.0.1061

2 years ago

0.0.1060

2 years ago

0.0.1059

2 years ago

0.0.1058

2 years ago

0.0.1057

2 years ago

0.0.1056

2 years ago

0.0.1055

2 years ago

0.0.1054

2 years ago

0.0.1053

2 years ago

0.0.1052

2 years ago

0.0.1051

2 years ago

0.0.1050

2 years ago

0.0.1049

2 years ago

0.0.1048

2 years ago

0.0.1047

2 years ago

0.0.1046

2 years ago

0.0.1044

2 years ago

0.0.1043

2 years ago

0.0.1042

2 years ago

0.0.1041

2 years ago

0.0.1040

2 years ago

0.0.1039

2 years ago

0.0.1038

2 years ago

0.0.1037

2 years ago

0.0.1036

2 years ago

0.0.1035

2 years ago

0.0.1034

2 years ago

0.0.1033

2 years ago

0.0.1032

2 years ago

0.0.1031

2 years ago

0.0.1030

2 years ago

0.0.1029

2 years ago

0.0.1028

2 years ago

0.0.1027

2 years ago

0.0.1026

2 years ago

0.0.1025

2 years ago

0.0.1024

2 years ago

0.0.1023

2 years ago

0.0.1022

2 years ago

0.0.1021

2 years ago

0.0.1020

2 years ago

0.0.1019

2 years ago

0.0.1018

2 years ago

0.0.1017

2 years ago

0.0.1016

2 years ago

0.0.1015

2 years ago

0.0.1014

2 years ago

0.0.1013

2 years ago

0.0.1012

2 years ago

0.0.1011

2 years ago

0.0.1010

2 years ago

0.0.1009

2 years ago

0.0.1008

2 years ago

0.0.1007

2 years ago

0.0.1006

2 years ago

0.0.1005

2 years ago

0.0.1004

2 years ago

0.0.1003

2 years ago

0.0.1002

2 years ago

0.0.1001

2 years ago

0.0.1000

2 years ago

0.0.999

2 years ago

0.0.998

2 years ago

0.0.997

2 years ago

0.0.996

2 years ago

0.0.995

2 years ago

0.0.994

2 years ago

0.0.993

2 years ago

0.0.992

2 years ago

0.0.991

2 years ago

0.0.990

2 years ago

0.0.989

2 years ago

0.0.988

2 years ago

0.0.987

2 years ago

0.0.986

2 years ago

0.0.985

2 years ago

0.0.984

2 years ago

0.0.983

2 years ago

0.0.982

2 years ago

0.0.981

2 years ago

0.0.980

2 years ago

0.0.979

2 years ago

0.0.978

2 years ago

0.0.977

2 years ago

0.0.976

2 years ago

0.0.975

2 years ago

0.0.974

2 years ago

0.0.973

2 years ago

0.0.972

2 years ago

0.0.971

2 years ago

0.0.970

2 years ago

0.0.969

2 years ago

0.0.968

2 years ago

0.0.967

2 years ago

0.0.966

2 years ago

0.0.965

2 years ago

0.0.963

2 years ago

0.0.962

2 years ago

0.0.961

2 years ago

0.0.960

2 years ago

0.0.959

2 years ago

0.0.958

2 years ago

0.0.957

2 years ago

0.0.956

2 years ago

0.0.955

2 years ago

0.0.954

2 years ago

0.0.953

2 years ago

0.0.951

2 years ago

0.0.950

2 years ago

0.0.948

2 years ago

0.0.947

2 years ago

0.0.946

2 years ago

0.0.945

2 years ago

0.0.944

2 years ago

0.0.943

2 years ago

0.0.942

2 years ago

0.0.941

2 years ago

0.0.939

2 years ago

0.0.938

2 years ago

0.0.937

2 years ago

0.0.936

2 years ago

0.0.935

2 years ago

0.0.934

2 years ago

0.0.933

2 years ago

0.0.932

2 years ago

0.0.931

2 years ago

0.0.930

2 years ago

0.0.929

2 years ago

0.0.928

2 years ago

0.0.927

2 years ago

0.0.925

2 years ago

0.0.923

2 years ago

0.0.922

2 years ago

0.0.921

2 years ago

0.0.92

2 years ago

0.0.91

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago