Page | Hyperse Hps

Overview

HPS is a CLI-based development toolchain built on the Wizard framework that provides:

Development Server with hot module replacement (HMR) and React Fast Refresh
Production Builds with Rspack bundler
GraphQL/HTTP Mocking for API development
TypeScript Type Checking during development
Multi-Entry Applications with shared configuration

The system operates through a plugin architecture where the @hyperse/hps CLI orchestrates specialized plugins (hps-plugin-serve, hps-plugin-build, etc.) that delegate to service implementations (hps-srv-rspack, hps-srv-mock).

Prerequisites

Before installing HPS, ensure your environment meets these requirements:

Node.js ≥20.0.0

Installation


npm install --save-dev @hyperse/hps


pnpm add --save-dev @hyperse/hps


yarn add --dev @hyperse/hps


bun add --dev @hyperse/hps

The package includes the hps binary at packages/hps/bin/hps.mjs which enables compile caching and bootstraps the CLI.

Project Setup

Creating the Configuration File

Create a configuration file named hps-evolve.config.ts in your project root. This file defines entry points, development server options, and bundler configuration.

Minimal Configuration Example


// @filename: @hyperse/hps/dist/index.d.ts
import {  } from '@hyperse/hps';
 
const  = {
  : 'dev.hps.com',
  : `./mocks`,
  : 40000,
  : 3,
  : {
    '/static': 'static',
  },
  : {
    '/*': { : 'REST', : ['others'], : {} },
  },
};
 
const  = {
  : {
    : {
      : ['./src/home/index.tsx'],
      : {},
    },
    : {
      : ['./src/mine/index.tsx'],
      : {},
    },
  },
  : {
    : 4000,
    : '/route',
    : async () => {
      return {};
    },
    : ,
  },
  : {
    : {},
    : () => {
      return {};
    },
    : {
      : 'runtime-chunks',
    },
    : {
      : {
        : 'http://dev.hps.com:4000/public',
      },
      : {
        : false,
      },
      : {
        : false,
      },
    },
  },
};
 
export default (() => {
  return {
    'build.evolve': ,
    'serve.evolve': ,
  };
});