frontend-starter-app

React.js starter app for Red Hat Hybrid cloud console UI modules that includes Patternfly and shared Red Hat cloud service frontend components.

Initial etc/hosts setup

In order to access the https://[env].foo.redhat.com in your browser, you have to add entries to your /etc/hosts file. This is a one-time setup that has to be done only once (unless you modify hosts) on each devel machine.

Best way is to edit manually /etc/hosts on your localhost line:

127.0.0.1 <your-fqdn> localhost prod.foo.redhat.com stage.foo.redhat.com

Alternatively you can do this by running following command:

npm run patch:hosts

If this command throws an error run it as a sudo:

sudo npm run patch:hosts

Getting started

1. npm install

2. npm run start

   1. If you are running the chrome-service-backend locally, set the environment variable CHROME_SERVICE to the port that it is listening on (by default 8000). For example, CHROME_SERVICE=8000 npm run start.

3. Open browser in URL listed in the terminal output

Update appUrl string inside fec.config.js according to your application URL. Read more.

Frontend operator

HCC uses OpenShift frontend operator to collect metadata about individual UI modules and creates environment based UI configuration that is used by the Chrome UI shell application to construct the frontend.

To learn about the operator and its configuration follow this link

Testing

npm run verify will run npm run lint (eslint) and npm test (Jest)

Cypress Component Testing

This project includes component tests using Cypress for testing React components in isolation:

• npm run test:cypress - Run all component tests headlessly
• npm run test:cypress:open - Open Cypress UI for interactive component testing
• npm run test:cypress:component - Run component tests (same as test:cypress)

Component tests are fast, reliable, and don't require a running server. They're perfect for testing individual UI components with different props and states.