Getting Started
Install HPS and create your first project with a minimal-config setup.
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/hpsThe 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 = {
: 'hps.dev',
: `./mocks`,
: 40000,
: 3,
: {
'/static': 'static',
},
: {
'/*': { : 'REST', : ['others'], : {} },
},
};
const = {
: {
: {
: ['./src/home/index.tsx'],
: {},
},
: {
: ['./src/mine/index.tsx'],
: {},
},
},
: {
: 4000,
: '/route',
: async () => {
return {};
},
: ,
},
: {
: {},
: () => {
return {};
},
: {
: 'runtime-chunks',
},
: {
: {
: 'http://hps.dev:4000/public',
},
: {
: false,
},
: {
: false,
},
},
},
};
export default (() => {
return {
'build.evolve': ,
'serve.evolve': ,
};
});