You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Prerequisites

Developers Recommended Tools

These are recommended tools when working with Search 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

Before start working, ask permission to access and clone the project Search UI

https://source.digital.accenture.com/projects/ST/repos/search-ui/browse

And the creation of a 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 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

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

Search 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, Search UI implements a light and dark theme, locates on src/themes


  • No labels