Onyxia
HomeGitHub
v9
  • Documentation
  • Release Notes & Upgrade Instructions
  • Vulnerability Disclosure
v9
  • Admin doc
    • 🏁Install
      • đŸ›ŗī¸Kubernetes
      • 🐙GitOps
      • 🔑User authentication
      • đŸ—ƒī¸Data (S3)
      • 🔓Vault
    • 🎨Theme and branding
    • đŸ”ŦCatalog of services
    • đŸ‘ĨSetting up group projects
    • 🔓Security consideration
    • âŦ†ī¸Migration guides
      • âŦ†ī¸v8 -> v9
      • âŦ†ī¸v7 -> v8
      • âŦ†ī¸v6 -> v7
      • âŦ†ī¸v5 -> v6
      • âŦ†ī¸v4 -> v5
      • âŦ†ī¸Migrating to the new helm repo
  • Contributors doc
    • đŸ–Ĩī¸The Web Application
      • âš™ī¸Technical stack
      • 📐Architecture
    • 🔌The REST API
    • đŸ›Ŗī¸Roadmap
  • user doc
    • đŸ•šī¸Getting started with Onyxia
    • 🎓Datascience Trainings and Tutorials
    • đŸ’ģSetting up your dev environment in Onyxia
    • 🤝Community resources
Powered by GitBook
On this page
  • tsafe 🐔
  • For working on what the end user 👁
  • Onyxia-UI 🐔
  • tss-react 🐔
  • screen-scaler 🐔
  • Storybook
  • vite-envs 🐔
  • powerhooks 🐔
  • Keycloakify 🐔
  • type-routes
  • i18nifty 🐔
  • Vite
  • For working on 🧠 of the App
  • clean-architecture 🐔
  • oidc-spa 🐔
  • EVT 🐔

Was this helpful?

Edit on GitHub
Export as PDF
  1. Contributors doc
  2. The Web Application

Technical stack

Technologies at play in Onyxia-web

Last updated 7 months ago

Was this helpful?

To find your way in Onyxia, the best approach is to start by getting a surface-level understanding of the libraries that are leveraged in the project.

Modules marked by 🐔 are our own.

tsafe 🐔

For working on what the end user 👁

Onyxia-UI 🐔

🔡 Linking onyxia-ui in onyxia-web

If you want to test some changes made to onyxia-ui in onyxia-web before releasing a new version of onyxia-ui to NPM you can link locally onyxia-ui in onyxia-web.

cd ~/github
git clone https//github.com/InseeFrLab/onyxia
cd onyxia/web
yarn install

cd ~/github/onyxia #This is just a suggestion, clone wherever you see fit.
git clone https://github.com/InseeFrLab/onyxia-ui ui
cd ui
yarn install
yarn build
yarn link-in-web
npx tsc -w

# Open a new terminal
cd ~/github/onyxia/web
yarn start

Now you can make changes in ~/github/onyxia/ui/and see the live updates.

If you want to install/update some dependencies, you must remove the node_modules, do you updates, then link again.

tss-react 🐔

The library we use for styling.

Rules of thumbs when it comes to styling:

screen-scaler 🐔

Onyxia is mostly used on desktop computer screens. It's not worth the effort to create a fully flege responsive design for the UI. screen-scaler enables us to design for a sigle canonical screen size. The library take charge of scaling/shrinking the image. depending on the real size of the screen. It also asks to rotate the screen when the app is rendered in protrait mode.

Storybook

To launch Storybook locally run the following command:

yarn storybook

vite-envs 🐔

We need to be able to do:

docker run --env OIDC_URL="https://url-of-our-keycloak.fr/auth" InseeFrLab/onyxia-web

Then, somehow, access OIDC_URL in the code like process.env["OIDC_URL"].

It enables to run onyxia-web again a specific infrastructure while keeping the app docker image generic.

  web:
    replicaCount: 2
    env:
      MINIO_URL: https://minio.lab.sspcloud.fr
      VAULT_URL: https://vault.lab.sspcloud.fr
      OIDC_URL: https://auth.lab.sspcloud.fr/auth
      OIDC_REALM: sspcloud
      TITLE: SSP Cloud

powerhooks 🐔

It's a collection general purpose react hooks. Let's document the few use cases you absolutely need to understand:

Avoiding useless re-render of Components

Measuring Components

Keycloakify 🐔

It's a build tool that enables to implement the login and register pages that users see when they are redirected to Keycloak for authentication.

type-routes

i18nifty 🐔

For internalization and translation.

Vite

For working on 🧠 of the App

clean-architecture 🐔

The framework used to implement strict separation of concern betwen the UI and the Core and high modularity of the code.

oidc-spa 🐔

For everything related to user authentication.

EVT 🐔

A lot of the things we do is powered under the hood by EVT. You don't need to know EVT to work on onyxia-web however, in order to demystify the parts of the codes that involve it, here are the key ideas to take away:

We also heavily rely on . It's a collection of utilities that help write cleaner TypeScript code. It is crutial to understand at least , , and to be able to contribute on the codebase.

Anything contained in the directory.

The UI toolkit used in the project, you can find the setup of in onyxia-web here: .

integration

is fully compatible with .

Onyxia-UI offers but you can also use components in the project, their aspect will automatically be adapted to blend in with the theme.

To release a new version of . You just need to bump the and push. will automate publish .

Every component should acceptprop it should always .

A component should not size or position itself. It should always be the responsibility of the parent component to do it. In other words, you should never have height, width, top, left, right, bottom or margin in of your components.

You should never have a color or a dimension hardcoded elsewhere than in . Use theme.spacing() (, , ) and .

It enables us to test the graphical components in isolation. .

In theory it shouldn't be possible, onyxia-web is an SPA, it is just static JS/CSS/HTML. If we want to bundle values in the code, we should have to recompile. But this is where comes into play.

Checkout :

All the accepted environment variables are defined here: . They are all prefixed with REACT_APP_ to be compatible . Default values are defined in this file.

Only in development (yarn start) is also loaded and have priority over .env

Then, in the code the variable can be accessed .

Please try not to access the environment variable to liberally through out the code. In principle they should only be accessed . We try to keep things as much as possible.

For the sake of performance we enforce that every component be wrapped into . It makes that a component only re-render if one of their prop has changed.

However if you use inline functions or as callbacks props your components will re-render every time anyway:

We always use for callback props. And for callback prop in lists.

It is very handy to be able to get the height and the width of components dynamically. It prevents from having to hardcode dimension when we don’t need to. For that we use ``

If the app is being run on Keycloak the isn't undefined and it means shat we should render the login/register pages.

If you want to test, uncomment and run yarn start. You can also test the login pages in a local keycloak container by running yarn keycloak. All the instructions will be printed on the console.

The keycloak-theme.jar file is automatically and by the CI.

The library we use for routing. It's like but type safe.

Anything contained in the directory.

There is for helping you understand the clean architecture framework.

EVT is an event management library (like is).

If we need to perform particular actions when a value gets changed, we use.

We use Ctxto detaches event handlers when we no longer need them. (See line 108 on )

In React, we use the hook to work with DOM events.

đŸ–Ĩī¸
âš™ī¸
tsafe
assert
id
Equals
symToStr
src/ui
onyxia-UI
src/ui/theme.tsx
MUI
Onyxia-UI
MUI
a library of reusable components
MUI
an optional className
overwrite the internal styles
the root styles
the theme configuration
ex1
ex2
ex3
theme.colors.useCases.xxx
See sources
cra-envs
the helm chart
.env
with create-react-app
.env.local
like this
here
pure
React.memo()
useCallback
useConstCallback
useCallbackFactory
useDomRect
kcContext
this line
build
uploaded as a GitHub release asset
react-router
src/core
a snake game (the classic nokia game) example
RxJS
StatefullEvt
this playground
useEvt
package.json's version
The CI
Onyxia-UI
a new version on NPM
Logotsafe — Leverage the more advanced TypeScript features
LogoGitHub - InseeFrLab/onyxia-ui: 🌓 A modern UI toolkit with excellent typing.GitHub
LogoGitHub - garronej/tss-react: ✨ makeStyles is dead, long live makeStyles!GitHub
LogoGitHub - garronej/screen-scaler: đŸ–Ĩī¸ One-size-fit-all web design: Screen-size agnostic development environment.GitHub
LogoStorybook: UI component explorer for frontend developersstorybookjs
Setting up a new story
Playground to explain the usefulness of useConstCallback
LogoGitHub - garronej/vite-envs: âš™ī¸ Env var in Vite at container startupGitHub
LogoGitHub - garronej/powerhooks: A collection of powerfull react hooksGitHub
LogoGitHub - InseeFrLab/keycloakify: 🔏 Create Keycloak themes using ReactGitHub
LogoGitHub - typehero/type-route: A flexible, type safe routing library.GitHub
Logoi18nifty
LogoVitevite_js
LogoGitHub - garronej/clean-architecture: 📐 A clean architecture frameworkGitHub
LogoGitHub - garronej/oidc-spa: Openidconnect client for Single Page ApplicationsGitHub
LogoEVT - EventEmitter's typesafe replacement
Snake game for understanding the clean-architecture framwork