precio-build

Precio Rsbuild wrapper CLI - Simple CLI to wrap Rsbuild with Module Federation support.

Installation

# Install as dev dependency
npm install -D precio-build

# Or install globally
npm install -g precio-build

Usage

# Start development server
npx precio-build dev

# Build for production
npx precio-build build

# Preview production build locally
npx precio-build preview

Configuration

Create a precio.config.ts file in your project root:

import type { PrecioConfig } from 'precio-build/types';

const config: PrecioConfig = {
  appName: 'Precio Library',
  cdn: process.env.CDN_URL || 'https://your-cdn.com/',
  html: {
    title: 'Precio Library',
    description: 'Precio App'
  },
  mf: {
    name: 'preciolibrary',
    filename: 'remoteEntry.js',
    manifest: false,
    exposes: {
      './Nav': './src/Nav/HeaderNav.tsx',
      './AnimatedButton': './src/Button/AnimatedButton.tsx',
      './Drawer': './src/Drawer/Drawer.tsx',
      './PdfViewer': './src/PDFViewer/PdfViewer.tsx',
      './UserProfile': './src/User/UserProfile.tsx',
      './AppModal': './src/AppModal/AppModal.tsx',
      './UploadPanel': './src/UploadPanel/UploadPanel.tsx'
    },
    shared: {
      react: { singleton: true, eager: true, requiredVersion: false },
      'react-dom': { singleton: true, eager: true, requiredVersion: false },
      'react-router': { singleton: true, eager: true, requiredVersion: false },
      '@azure/msal-react': { singleton: true, eager: true, requiredVersion: false },
      '@azure/msal-browser': { singleton: true, eager: true, requiredVersion: false }
    }
  },
  output: {
    sourceMapProd: false,
    hashFilenames: true,
    assetPrefixInDev: '/'
  }
};

export default config;

For Host Applications

If you want to use this CLI for a host application that consumes remote modules:

const config: PrecioConfig = {
  appName: 'My Host App',
  mf: {
    name: 'host',
    remotes: {
      preciolibrary: "preciolibrary@https://cdn.example.com/precio/remoteEntry.js"
    },
    shared: {
      react: { singleton: true, eager: true, requiredVersion: false },
      'react-dom': { singleton: true, eager: true, requiredVersion: false }
    }
  }
};

Configuration Options

PrecioConfig

| Option | Type | Default | Description | |--------|------|---------|-------------| | appName | string | 'Precio App' | Application name | | cdn | string | - | CDN URL for production assets | | html.title | string | 'Precio App' | HTML page title | | html.description | string | 'Precio App' | HTML meta description | | mf.name | string | 'preciolib' | Module Federation name | | mf.filename | string | 'remoteEntry.js' | Remote entry filename | | mf.manifest | boolean | false | Generate manifest file | | mf.exposes | Record<string, string> | {} | Exposed modules | | mf.remotes | Record<string, string> | {} | Remote modules | | mf.shared | Record<string, any> | {} | Shared dependencies | | output.sourceMapProd | boolean | false | Generate source maps in production | | output.hashFilenames | boolean | true | Add hash to filenames | | output.assetPrefixInDev | string | '/' | Asset prefix in development |

Environment Variables

• CDN_URL: CDN URL for production assets
• NODE_ENV: Environment mode (development/production)

Features

• ✅ Simple configuration with precio.config.ts
• ✅ Module Federation support out of the box
• ✅ React plugin included
• ✅ CDN support for production
• ✅ Source map control
• ✅ File hashing for cache busting
• ✅ Environment variable support

License

MIT