Forgerock UI
Monorepo containing various Forgerock UIs.
Explore ForgeRock docs »
The purpose of this readme is to help users explore the ForgeRock UI monorepo. Which contains a variety of UI parts such as views, styles and components utilized for different ForgeRock UIs.
node -v in your terminal. Your Node.js version should be >=14..yarn/releases. It's not required to install Yarn globally for this project, but if you are interested in how Yarn works or if you plan to use your own Yarn version, you can learn more about installing Yarn here. You can verify the yarn version running yarn -v in your terminal.platform-ui directory, and install dependencies with yarn command: yarn install. Since this project uses Yarn workspaces, this will install package requirements in all project folders under packagesplatform-ui/packages directory, and enter the command: yarn devTesting is achieved with the Jest Testing Framework and configured globally inside: jest.config.base.js and locally to each project inside: jest.config.js
platform-ui directory, run the command: yarn unit or yarn unit:watchcd to the specific directory, and run command yarn unitCypress is leveraged for all End to End tests
cd to the specific directory where you want to run the tests, and run e2e, or e2e:opene2e:remote or e2e:remote:open.The following testing tools are installed when you install the project dependencies:
The following application tools are installed when you install the project dependencies:
Application translation uses Vue i18n and the openidm/info/uiconfig endpoint to get the current user's browser language.
The project only contains en based translations and falls back to en if an unsupported language is detected. To change the default language fallback adjust VueI18n /src/main.js.
Adding and changing an existing message for the en base language involves either adding a key or editing an existing key.
Keys follow JSON structure; for example, if you wanted to edit the navigation bar Profile to User Profile you would need to locate the appropriate key en.pages.app.profile and change the text.
Inside of your Vue application you would then make use of that key with the built in translation function {{$t('pages.app.profile')}} or this.$t('pages.app.profile').
Adding a new translation language means creating a new translation file inside of locales folder with a key matching the translation language code.
For example:
en.json
fr.json
gr.jsonThen creating a JSON key structure that should be mirrored across all of the language files.
For example:
{
dashboard: {
welcomeMessage: 'Welcome!'
}
}Running yarn build creates a distribution file in the dist folder of that specific project. Each deployment use case is different.
The following theming tools are installed when you install the project dependencies:
Theming makes use of two concepts:
yarn dev --theme=red or yarn build --theme=red.When you include the theme flag, the node build scripts attempt to locate a corresponding file in src/scss. The file must also contain a -theme.scss moniker, for example, red-theme.scss.
The default project includes three themes:
yarn dev --theme=darkyarn dev --theme=rock. This theme demonstrates how to use a full background image, with fallback to the default theme.Inside of the packages folder of the monorepo you will find each stand alone project. These stand alone projects all rely on similar commands, on occation there are minor differences (for example theming doesn't apply to admin). Please check and package.json to see the specific commands. Here is a list of the universal commands.
# install dependencies
yarn
# serve with hot reload at localhost:8080 (increments by 1 automatically if port is in use).
yarn dev
# server with theme loaded (not admin)
yarn dev --theme=red
# build for production with minification
yarn build
# build with theme loaded (not admin)
yarn build --theme=red
# run all tests
yarn unit