https://github.com/adamj/prototype-template-react
A prototype template using the PatternFly-React-Seed project template.
https://github.com/adamj/prototype-template-react
gulp prototype react template
Last synced: 6 months ago
JSON representation
A prototype template using the PatternFly-React-Seed project template.
- Host: GitHub
- URL: https://github.com/adamj/prototype-template-react
- Owner: AdamJ
- License: mit
- Created: 2019-06-12T14:22:42.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T18:54:17.000Z (over 3 years ago)
- Last Synced: 2025-04-08T03:40:03.852Z (over 1 year ago)
- Topics: gulp, prototype, react, template
- Language: JavaScript
- Size: 5.2 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/mindreeper2420/prototype-template-react)
# Intro
This project uses the PatternFly-React-Seed template.
---
## 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.
## 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 full build
`yarn build`
Run the test suite
`yarn test`
Run the linter
`yarn lint`
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)
## Image Support
To use an image asset that's shipped with patternfly core, you'll prefix the paths with `@pfassets`. `@pfassets` is an alias for the patternfly assets directory in node_modules.
`import imgSrc from '@pfassets/images/g_sizing.png';`
Then you can use it like:
`
`
You can use a similar technique to import assets from your local app, just prefix the paths with. `@app`.
`import loader from '@app/assets/images/loader.gif';`
`
<br />* To keep our bundle size in check, we use [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
<br />* To keep our code formatting in check, we use [prettier](https://github.com/prettier/prettier)
<br />* To keep our code logic and test coverage in check, we use [jest](https://github.com/facebook/jest)
<br />]({loader})