Prerequisites

Prior to engaging with this documentation, please be advised that the functionality of the API is designed to operate independently of the UI. The API undertakes substantial data processing tasks, including the manipulation and computation of data, as well as the generation of outcomes. Therefore, the purpose of the UI is solely to display the processed data to the user.

Necessary Skills

  • React
    • A JavaScript library for building dynamic user interfaces with reusable components.
    • Learn More: Official documentation (React Official) offers comprehensive guides. 
  • Redux
    • A predictable state container for JavaScript apps, often used with React for managing application state globally.
    • Learn More: Start with the official Redux documentation (Redux Official) for foundational concepts.
  • Hooks
    • Features in React 16.8+ that let you use state and other React features in functional components.
    • Learn More: The React official guide on Hooks (React Hooks) explains their use. 

For more details please check React Redux Store


Developers Recommended Tools

These are recommended tools when working with GAIA UI, they are not required, but we have seen they are the ones that make the work the easiest

  • WebStorm (Paid): WebStorm is a powerful JavaScript/TypeScript and related technologies integrated development environment (IDE) that offers comprehensive features and tools to facilitate efficient and productive JavaScript related technologies development.
    • We prefer WebStorm for the:
      • Intelligent Code Editor: WebStorm offers syntax highlighting, code completion, and analysis for error-free coding.
      • Debugging and Testing: Powerful debugger and support for unit testing frameworks.
      • Code Refactoring: Tools for improving code structure and efficiency.
      • Intelligent Assistance: Code templates, quick fixes, and suggestions for more efficient coding.
    • It also provides a comprehensive Git support, which facilitates comparing and merging code from other projects

  • Visual Studio Code (Free): Visual Studio Code offers a multipurpose integrated development environment (IDE) where you can download multiple extensions and plugins that will help you on your development on a lot of different languages. This IDE is great for web development using JavaScript Related technologies.
    • It is a good free option because it offers:
      • Intelligent Code Editor: with the proper plugins you can have syntax highlighting and code completion in html like closing tags and others.
      • Snippets: you can create snippets that will help you on your coding experience, like creating react functional components templates.
      • Debugging and Testing: the VS Code debugger is not as powerful as the debugger in WebStorm but it is still a good tool for debugging.


  •  GitKraken (Paid): GitKraken is a powerful Git client with a visually appealing interface that simplifies and enhances the Git version control workflow.
    • We prefer GitKraken for the:

      • Visual Commit History: GitKraken provides an intuitive visual representation of commit history, making it easy to navigate and understand project changes.

      • Git Graphs and Branching: GitKraken's interactive graphs provide a clear view of branches and their relationships, simplifying branch management and enabling efficient collaboration.

    • But we only recommend this one if you are working in multiple projects, otherwise is not necessary.

Ask For Access And Branch Folder

Contact Global Support for this!!

Make your request for the permissions group and project folder request with the CAGGlobalSupport Team

or create a ticket here Create Issue - Jira (accenture.com) (Keep in mind you need access to the IIS project in order to create the ticket)

Before start working, ask permission to access and clone the project GAIA API

https://source.digital.accenture.com/projects/ST/repos/gaia-api/browse

And the creation of a permissions group in active directory with the format as required, 

digital.source.st.your-project.admins
digital.source.st.your-project.creators
digital.source.st.your-project.users

 along with branch folder specific for your project, where you and your team will have complete freedom to create more branches, add, update and delete code.

your-project/develop
your-project/main
your-project/features
your-project/release

Why have a branch folder, in the same repository and not have my own repository?


The branch folder is recommended to make synergy between the different project under development at the same time, features created on a project, may as well be used in another, all generic features are merge into the root develop branch, and from there can be distributed to other projects and user in future projects.

You still can have the code in another repository, but in that case we still recommend have the branch folder and synchronize changes, making the support of the project less invasive and the upgrade of the code, more fluid

DO NOT CLONE FROM ANOTHER PROJECT!!!


If you are going to generate your branches on your own, DO NOT CLONE FROM ANOTHER PROJECT!!!, always clone from the develop branch, develop branch is the one supported by the development team. If you clone from another project:

  • You increase the risk of bugs, which the develop team has no idea
  • You may fetch extra code you don't require for your project
  • The development team doesn't know the code implemented in each project, so the help given on custom code can be minimum
  • The other project may not be update with the latest base version, which means you may have bugs already fixed in the develop branch

Compare & Fetch from other project


If you need code implemented in other project, use your preferable tool for managing git, and do a Compare with Branch, this way you can fetch the code you need to the latest code in your project

Install Node

The development of GAIA UI started with node version 18.14.0 and npm version 9.0 hence we recommend to use 18 > version > 20, and npm version > 9

Node Version Manager (NVM)

nvm is a version manager for node.js, designed to be installed per-user, and invoked per-shell. nvm works on any POSIX-compliant shell (sh, dash, ksh, zsh, bash), in particular on these platforms: unix, macOS, and windows WSL.

To install or update nvm, you should run the install script. To download it use any of the following commands replacing {version} with the correct version.

With curl

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/{version}/install.sh | bash

With wget

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/{version}/install.sh | bash

To verify that nvm has been installed, do:

command -v nvm

Usage

To install a node version in this version manager use

nvm install {version}

you could use the alias "node" as the version to install the latest node version

You can list available versions using ls-remote:

nvm ls-remote

To change between node versions installed with nvm:

nvm use {version}

You can migrate packages from one node version to another:

nvm install {version} --reinstall-packages-from={another_version}

To list your installed versions:

nvm ls

All the previous documentation was taken from the nvm repository documentation where you can find troubleshooting articles and further documentation.

Install PNPM

Using a standalone script

You may install pnpm even if you don't have Node.js installed, using the following scripts.

On Windows

Using PowerShell:

iwr https://get.pnpm.io/install.ps1 -useb | iex

On POSIX systems

curl -fsSL https://get.pnpm.io/install.sh | sh -

If you don't have curl installed, you would like to use wget:

wget -qO- https://get.pnpm.io/install.sh | sh -

On Alpine Linux

bash wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.bashrc" SHELL="$(which bash)" bash -

sh wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh -

dash wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.dashrc" SHELL="$(which dash)" dash -

Using npm

npm install -g pnpm

Using Homebrew

If you have the package manager installed, you can install pnpm using the following command:

brew install pnpm

Install Dependencies

Now install the dependencies from package.json by executing the following pnpm

pnpm install

Start Project for development

Once everything is install you just need to run the following command to start the UI

pnpm run dev


You can do the same thing with NPM, but we highly recommend using PNPM, mostly because of the non-flat node_modules directory, which prevents version collision

Changing the Theme Colors

GAIA UI is using the MUI Theme provider to specify the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc. You can learn more in Theming from MUI

Currently, GAIA UI implements a light and dark theme, locates on src/themes


  • No labels