Skip to content

Latest commit

 

History

History
121 lines (93 loc) · 4.98 KB

README.md

File metadata and controls

121 lines (93 loc) · 4.98 KB
Raw

StackRox Web UI

Repo Structure and Principles

Root

The root directory and its package.json file serves as an entry point for any interactions with the applications and packages.

Development

If you are developing only StackRox UI, then you don't have to install all the build tooling described in the parent README.md. Instead, follow the instructions below.

Build Tooling

  • Docker
  • Node.js version compatible with the "engine" requirements in the package.json file (It's highly recommended to use the latest LTS version. If you're managing multiple versions of Node.js on your machine, consider using nvm)
  • npm v9.x

Dev Env Setup

Before starting, make sure you have the above tools installed on your machine and you've run npm ci in the apps/platform directory to download dependencies.

The front end development environment consists of a CRA-provided dev server to serve static UI assets and deployed StackRox Docker containers that provide backend API.

Set up your environment as follows:

Using Local StackRox Deployment and Docker for Mac

Note: Similar instructions apply when using Minikube.

  1. Docker for Mac - Make sure you have Kubernetes enabled in your Docker for Mac and kubectl is pointing to docker-desktop (see docker docs). Note that Docker for Mac is no longer the most recommended k8s environment for development. Some recommended alternatives are podman-desktop or colima.

  2. Deploy - Run npm run deploy-local (wraps ../deploy/k8s/deploy-local.sh) to deploy the StackRox k8s app. Make sure that your git working directory is clean and that the branch that you're on has a corresponding tag from CI (see Roxbot comment for a PR branch). Alternatively, you can specify the image tag you want to deploy by setting the MAIN_IMAGE_TAG env var. If npm run deploy-local fails, see this Knowledge Base article for debugging instructions.

  3. Start - Start your local dev server by running npm run start. This will build the application in watch mode. To see available options to npm run start, first ensure that npm run build has been run from the top level and then refer to the README.md in the apps/platform directory.

Note: to redeploy a newer version of StackRox, delete existing app using teardown script from the workflow repo, and repeat the steps above.

Using a Remote StackRox Deployment

To develop the front-end platform locally, but use a remote Central, please refer to the detailed instructions in the how-to article Use remote Central for local front-end dev

IDEs

This project is IDE agnostic. For the best dev experience, it's recommended to add / configure support for ESLint and Prettier in the IDE of your choice.

Examples of configuration for some IDEs:

"eslint.alwaysShowStatus": true,
"eslint.codeAction.showDocumentation": {
    "enable": true
},
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Browsers

For better development experience it's recommended to use Google Chrome Browser with the following extensions installed: