Skip to content

quick-start.md

Latest commit

 

History

History
129 lines (91 loc) · 4.07 KB

quick-start.md

File metadata and controls

129 lines (91 loc) · 4.07 KB

Quick Start Guide

This guide provides step-by-step instructions to get a PatternFly React application running quickly using the PatternFly React Seed.

Introduction

The Quick Start process uses the official PatternFly React Seed repository to scaffold a complete application with pre-configured components, routing, and build tools. This is the fastest way to begin PatternFly development.

Related Files

Step-by-Step Instructions

Step 1: Clone the Repository

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

AI Note: This command can be executed by AI assistants to initialize the project.

Step 2: Navigate to Project Directory

cd patternfly-react-seed

Important: All subsequent npm commands must be run from this directory.

Step 3: Install Dependencies

npm install

AI Note:

  • AI can run this command after verifying Node.js and npm are properly installed
  • This step downloads all required PatternFly and React dependencies
  • May take several minutes depending on network speed

Step 4: Start Development Server

npm run start:dev

Important Considerations:

  • User Recommendation: Run this command in a separate terminal to keep it active
  • Default URL: Development server typically runs at http://localhost:9000
  • Additional Information: Check the project's README.md for server configuration details

Verification Steps

After completing the setup:

  1. Check Server Status: Ensure the development server starts without errors
  2. Access Application: Open http://localhost:9000 in a web browser
  3. Verify Components: Confirm PatternFly components are rendering correctly
  4. Test Hot Reload: Make a small change to verify live reloading works

What You Get

The PatternFly React Seed includes:

Pre-configured Components

  • Page layout structure
  • Navigation components
  • Basic routing setup
  • Example PatternFly components

Development Tools

  • Webpack configuration
  • Hot module replacement
  • Development server
  • Build scripts

Testing Setup

  • Jest configuration
  • Testing utilities
  • Example test files

Next Steps

  1. Explore the Codebase: Review the generated file structure
  2. Read Documentation: Check PatternFly Guidelines
  3. Start Development: Begin building your application components
  4. Configure Environment: Set up Development Environment tools

Common Post-Setup Tasks

Customizing the Application

  • Update application name and metadata
  • Configure routing for your specific needs
  • Add custom components and pages

Development Workflow

  • Set up version control (if not already done)
  • Configure IDE/editor for PatternFly development
  • Install additional development tools

Team Setup

  • Share environment configuration
  • Document custom setup steps
  • Establish coding standards and practices

Troubleshooting Quick Start

If you encounter issues during setup:

  1. Verify Prerequisites: Ensure Node.js and npm are properly installed
  2. Check Network: Confirm internet connectivity for package downloads
  3. Clear Cache: Try npm cache clean --force if installation fails
  4. Port Conflicts: If port 9000 is in use, check for alternative ports
  5. Permission Issues: On Unix systems, avoid using sudo with npm

For detailed troubleshooting, see Common Issues.

Success Indicators

You've successfully completed the Quick Start when:

  • ✅ Repository is cloned without errors
  • ✅ Dependencies install successfully
  • ✅ Development server starts and runs
  • ✅ Application loads in browser at http://localhost:9000
  • ✅ PatternFly components are visible and styled correctly