https://github.com/adamj/rhd-frontend-react

A React version of the rhd-frontend repo using PatternFly-React (v4)
https://github.com/adamj/rhd-frontend-react

Last synced: 3 months ago
JSON representation

A React version of the rhd-frontend repo using PatternFly-React (v4)

• Host: GitHub
• URL: https://github.com/adamj/rhd-frontend-react
• Owner: AdamJ
• License: mit
• Created: 2019-11-11T18:35:18.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-08-31T12:31:34.000Z (almost 2 years ago)
• Last Synced: 2026-01-03T17:24:06.311Z (6 months ago)
• Language: TypeScript
• Size: 1.04 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# RHD Frontend w/React

This is a demo repo of the RHD Frontend running on React. For demonstration purposes only.

Based off of the [PatternFly Seed](https://github.com/patternfly/patternfly-react-seed) repository.

----

## Patternfly Seed

Patternfly Seed is an open source build scaffolding utility for web apps. The primary purpose of this project is to give developers a jump start when creating new projects that will use patternfly. A secondary purpose of this project is to serve as a reference for how to configure various aspects of an application that uses patternfly, webpack, react, typescript, etc.

Out of the box you'll get an app layout with chrome (header/sidebar), routing, build pipeline, test suite, and some code quality tools. Basically, all the essentials.



### Quick-start

```bash

npm install yarn -g # ensure you have yarn on your machine globally

git clone https://github.com/patternfly/patternfly-react-seed # clone the project

cd patternfly-react-seed # navigate into the project directory

yarn # install patternfly-react-seed dependencies

yarn build # build the project

yarn start # start the development server

```

### Development Scripts

Install development/build dependencies

`yarn`

Start the development server

`yarn start`

Run a production build

`yarn build`

Run the test suite

`yarn test`

Run the linter

`yarn lint`

Run the code formatter

`yarn format`

Launch a tool to inspect the bundle size

`yarn bundle-profile:analyze`

### Configurations

* [TypeScript Config](./tsconfig.json)

* [Webpack Config](./webpack.common.js)

* [Jest Config](./jest.config.js)

* [Editor Config](./.editorconfig)

### Raster Image Support

To use an image asset that's shipped with patternfly core, you'll prefix the paths with "@assets". `@assets` is an alias for the patternfly assets directory in node_modules.

For example:

```js

import imgSrc from '@assets/images/g_sizing.png';



```

You can use a similar technique to import assets from your local app, just prefix the paths with "@app". `@app` is an alias for the main src/app directory.

```js

import loader from '@app/assets/images/loader.gif';