Overview
About
The edge-frontend repo is the front-end for RHEL for Edge/Fleet managment , which is part of console.redhat.com.
Tools
- Cloud-Services-Config
- Insights-Proxy
- Spandx
- Patternfly
- Frontend-Components
- Module Federation
- Data-Driven-Forms
Cloud-Services-Config
Cloud-service-config is used to run Red Hat Hybrid Cloud Console locally. RHEL for Edge/Fleet Management is part of Red Hat Hybrid Cloud Console.
Insights-Proxy
Insights-proxy is the proxy this repo uses to combine together local code and remote code. In this repo we use insights to combine our local edge-frontend code to the remote code that runs console.redhat.com.
Spandx
spandx is an HTTP switchboard. With it, you can weave together pieces of a large, complex website by choosing which resources should come from your local system and which should come from a remote environment.
For example, you could point spandx at your production site, but route /static/js
to a local directory, which allows you to test your local JS against the production environment. Code in production, it's fun.
More technically, spandx is a flexible, configuration-based reverse proxy for local development.
Patternfly
PatternFly is an open source design system created to enable consistency and usability across a wide range of applications and use cases. PatternFly provides clear standards, guidance, and tools that help designers and developers work together more efficiently and build better user experiences.
Frontend-Components
Frontend-components is a monorepo of Red Hat Cloud services Components for applications in a React.js environment. This repo uses a lot of components imported from the frontend-components repo using module federation.
Module Federation
Module Federation is a feature in Webpack that allows for sharing components outside a repo. When importing a component with module federation, the component is bundled with it's dependencies.
Data Driven Forms
Data Driven Forms converts JSON form definitions (schemas) into fully functional React forms with the provided set of features.
Setup
Install all dependencies
npm install
NOTE: You will need to run cloud-services-config until edge-frontend is on a stable branch
Setting up cloud-services-config
Clone cloud-services-config to your local machine and navigate into the cloned directory.
Copy main.yml
to its own config directory.
mkdir config
cp main.yml config
Start http-server
npx http-server -p 8889
webpack-proxy or with insights-proxy.
You can choose to either run the application withIf you need to run edge-api locally you will need to use insights-proxy.
Running locally with webpack-proxy
Add prod.foo.redhat.com
, stage.foo.redhat.com
, qa.foo.redhat.com
and ci.foo.redhat.com
to your /etc/hosts
file (one time action). Follow this guide on how to edit your /etc/hosts file
Your /etc/hosts
file can look like:
127.0.0.1 prod.foo.redhat.com
127.0.0.1 stage.foo.redhat.com
127.0.0.1 qa.foo.redhat.com
127.0.0.1 ci.foo.redhat.com
127.0.0.1 qaprodauth.foo.redhat.com
For frontend only
Run the application in beta environment - beta only supported
BETA=true npm run start:proxy
For frontend and backend
Run the application in beta environment - beta only supported
API_PORT=3000 BETA=true npm run start:proxy
Edge application will be available on https://stage.foo.redhat.com:1337/beta/edge/fleet-management
To switch environment (for instance if you want to run your app with prod DB)
ENVIRONMENT=prod BETA=true npm run start:proxy
Edge application will be available on https://prod.foo.redhat.com:1337/beta/edge/fleet-management
Running locally with insights-proxy
Follow the guide on insights-proxy on how to install proxy.
Once insights-proxy is setup, run Spandx with the following commands:
For frontend only
In one terminal run
USE_CLOUD=true SPANDX_CONFIG=./profiles/local-frontend.js ../insights-proxy/scripts/run.sh
For frontend and backend
In one terminal setup and run Edge-api
In another terminal run
USE_CLOUD=true SPANDX_CONFIG=./profiles/local-frontend-and-api.js ../insights-proxy/scripts/run.sh
After running SPANDX open another terminal and run
npm start
Edge application will be available on https://ci.foo.redhat.com:1337/beta/edge/fleet-management