patternfly-webcomponents / react-static-pf-webcomponents

This project demonstrates how to use Patternfly web components in the React Static Boilerplate.

Patternfly React Starter

A Patternfly + React starter kit based on React Static Boilerplate.

Demo: https://react-static-pf-webcompo-8dd7f.firebaseapp.com/  |  View docs  |  Follow us on Gitter, Twitter, and Slack  | 

Features

    ✓ Includes Patternfly CSS & some React implementations of Patternfly components
    ✓ Modern JavaScript syntax (ES2015+) via Babel, modern CSS syntax via PostCSS
    ✓ Component-based UI architecture via React, Webpack and CSS Modules
    ✓ Application state management /w time-travel debugging via Redux (see main.js, core/store.js)
    ✓ Routing and navigation via path-to-regexp and history (see main.js, core/router.js, utils/routes-loader.js)
    ✓ Code-splitting and async chunk loading via Webpack and ES6 System.import()
    ✓ Hot Module Replacement (HMR) /w React Hot Loader
    ✓ Cross-device testing with Browsersync (see run.js#start)
    ✓ 24/7 community support on Gitter; customization requests on Codementor

Learn to React.js and ES6

Directory Layout

.
├── /components/                # Shared or generic UI components
│   ├── /CardView/              # CardView component
│   ├── /Layout/                # Website layout component
│   ├── /Link  /                # Link component to be used insted of <a>
│   └── /...                    # etc.
├── /core/                      # Core framework
│   ├── /history.js             # Handles client-side navigation
│   ├── /router.js              # Handles routing and data fetching
│   └── /store.js               # Application state manager (Redux)
├── /node_modules/              # 3rd-party libraries and utilities
├── /pages/                     # React components for web pages
│   ├── /app/                   # App page
│   ├── /error/                 # Error page
│   ├── /home/                  # Home page
│   └── /...                    # etc.
├── /public/                    # Static files such as favicon.ico etc.
│   ├── /dist/                  # The folder for compiled output
│   ├── favicon.ico             # Application icon to be displayed in bookmarks
│   ├── robots.txt              # Instructions for search engine crawlers
│   └── /...                    # etc.
├── /test/                      # Unit and integration tests
├── /utils/                     # Utility and helper classes
│── main.js                     # React application entry point
│── package.json                # The list of project dependencies and NPM scripts
│── routes.json                 # This list of application routes
│── run.js                      # Build automation script, e.g. `node run build`
└── webpack.config.js           # Bundling and optimization settings for Webpack

Getting Started

Step 1. Make sure that you have Node.js v6 or newer installed on your machine.

Step 2. Clone this repository or use Yeoman generator to bootstrap your project:

$ git clone -o upstream -b master --single-branch \
      https://github.com/priley86/patternfly-react-starter.git MyApp
$ cd MyApp
$ npm install                   # Install project dependencies listed in package.json

——— or ———

$ npm install -g yo
$ npm install -g generator-react-static
$ mkdir MyApp
$ cd MyApp
$ yo react-static

Step 3. Compile and launch your app by running:

$ node run                      # Same as `npm start` or `node run start`

You can also test your app in release (production) mode by running node run start --release or with HMR and React Hot Loader disabled by running node run start --no-hmr. The app should become available at http://localhost:3000/.

How to Test

The unit tests are powered by jest.

$ npm run lint                  # Check JavaScript and CSS code for potential issues
$ npm run test                  # Run unit tests. Or, `npm run test:watch` or `npm run test:cov`

How to Deploy

Update publish script in the run.js file with your full Firebase project name as found in your Firebase console. Note that this may have an additional identifier suffix than the shorter name you've provided. Then run:

$ node run publish              # Build and publish the website to Firebase, same as `npm run publish`

The first time you publish, you will be prompted to authenticate with Google and generate an authentication token in order for the publish script to continue.

If you need just to build the project without publishing it, run:

$ node run build                # Or, `node run build --release` for production build

Learn React.js and ES6

🎓   React.js Training Program by Tyler McGinnis
🎓   React for Beginners and ES6 Training Course by Wes Bos
📗   React: Up & Running: Building Web Applications by Stoyan Stefanov (Aug, 2016)
📗   Getting Started with React by Doel Sengupta and Manu Singhal (Apr, 2016)
📗   You Don't Know JS: ES6 & Beyond by Kyle Simpson (Dec, 2015)

Related Projects

• React App SDK — Create React apps with just a single dev dependency and zero configuration
• React Starter Kit — Isomorphic web app boilerplate (Node.js, React, GraphQL, Webpack, CSS Modules)
• ASP.NET Core Starter Kit — Cross-platform single-page application boilerplate (ASP.NET Core, React, Redux)
• Babel Starter Kit — JavaScript library boilerplate (ES2015, Babel, Rollup, Mocha, Chai, Sinon, Rewire)
• Universal Router — Isomorphic router for web and single-page applications (SPA)
• History — HTML5 History API wrapper library that handle navigation in single-page apps

License

This source code is licensed under the MIT license found in the LICENSE.txt file.

---

Made with ♥ by the Patternfly team