@wearejh/m2-pwa-engine

The core Progressive Web Application (PWA) engine for Magento 2, providing the foundational infrastructure and services needed to build modern, performant e-commerce experiences.

Overview

The m2-pwa-engine package serves as the backbone of the Magento 2 PWA ecosystem, offering essential utilities, state management, routing, and integration capabilities that power e-commerce applications. It provides a standardized foundation that other PWA packages can build upon.

Key Features

• Redux Store Management: Lazy access to the Redux store with proper typing
• Apollo GraphQL Integration: Client configuration and provider setup for Magento GraphQL API
• Routing Infrastructure: Core routing utilities and components
• Environment Configuration: Multi-environment support (development, staging, production)
• Service Worker Support: PWA capabilities and offline functionality
• TypeScript Support: Full TypeScript definitions and type safety

Architecture

graph TD
    A[m2-pwa-engine] --> B[Redux Store]
    A --> C[Apollo Client]
    A --> D[Router]
    A --> E[Environment Config]
    
    B --> F[State Management]
    C --> G[GraphQL API]
    D --> H[Navigation]
    E --> I[Multi-env Support]
    
    F --> J[Cart Module]
    F --> K[User Module]
    F --> L[Checkout Module]
    
    G --> M[Magento GraphQL]
    H --> N[Page Components]
    I --> O[staging/staging3/production]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#e8f5e8
    style D fill:#fff3e0
    style E fill:#fce4ec

Core Concepts

State Management

The engine provides a centralized Redux store with lazy initialization, allowing modules to register their reducers and access shared application state efficiently.

GraphQL Integration

Built-in Apollo Client configuration enables seamless communication with Magento's GraphQL API, handling authentication, caching, and error management.

Environment Support

The package includes configuration for multiple deployment environments:

• Development
• Staging (staging3 support added in v0.31.2)
• Production

Modular Architecture

Designed to work with companion packages:

• m2-pwa-cart - Shopping cart functionality
• m2-pwa-user - User authentication and management
• m2-pwa-checkout - Checkout process
• m2-pwa-adyen - Adyen payment integration
• m2-pwa-tools - Development and build tools
• m2-pwa-webpack - Webpack configuration

Installation

npm install @wearejh/m2-pwa-engine

Usage

The engine is typically initialized early in your application lifecycle:

import { initializeEngine } from '@wearejh/m2-pwa-engine';

// Initialize the PWA engine with your configuration
const engine = initializeEngine({
  apiUrl: 'https://your-magento-instance.com/graphql',
  environment: 'production'
});

Dependencies

This package works in conjunction with the broader Magento 2 PWA ecosystem and requires:

• React for UI components
• Redux for state management
• Apollo Client for GraphQL communication
• Compatible Magento 2 backend with GraphQL support

Contributing

This package is part of the larger mage-mono repository. Changes should be made following the established patterns and with consideration for backward compatibility across the PWA