neal-timpe / edge-frontend

Overview

• About
• Tools
• Setup

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.

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

Verify that node version should be 16.13.0 <= 16.13.1

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