@rhc-shared-components/chroming

Vite plugin to inject Red Hat Connect chroming (header and footer) into HTML

Requirements

• Node.js >= 18.0.0
• Vite >= 5.0.0

Install

yarn add @rhc-shared-components/chroming

Usage

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite';
import { chromingPlugin } from '@rhc-shared-components/chroming';

export default defineConfig({
  plugins: [
    chromingPlugin({
      env: 'QA', // 'QA' | 'STAGE' | 'PROD' | 'DEV'
      staticHtmlPath: 'index.static.html', // Optional
      outputHtmlPath: 'index.html' // Optional
    })
  ]
});

Proxy Configuration

Automatic (Recommended): The plugin automatically configures proxy for pre-production environments (QA, STAGE, DEV). No configuration needed!

Custom proxy:

chromingPlugin({
  env: 'QA',
  proxyUrl: 'http://your-proxy.com:3128' // Custom proxy URL
})

Disable proxy:

chromingPlugin({
  env: 'QA',
  proxyUrl: '' // Empty string to disable
})

Environment variable (alternative):

export HTTP_PROXY=http://squid.corp.redhat.com:3128
yarn build

Configuration Options

| Option | Type | Default | Description | |----------------------------|--------------------------------------|----------------------------------|------------------------------------------------------------------------------| | env | 'QA' \| 'STAGE' \| 'PROD' \| 'DEV' | 'QA' | Environment to fetch chroming from | | proxyUrl | string | Auto for QA/STAGE/DEV | Proxy URL for HTTP requests. Auto-set for pre-prod. Empty string to disable. | | headerUrl | string | - | Custom header URL (overrides env-based URL) | | footerUrl | string | - | Custom footer URL (overrides env-based URL) | | staticHtmlPath | string | 'index.static.html' | Path to the static HTML template (relative to project root) | | outputHtmlPath | string | 'index.html' | Path to the output HTML file (relative to project root) | | headerCommentPlaceholder | string | See below* | Header comment placeholder to replace | | footerCommentPlaceholder | string | See below** | Footer comment placeholder to replace | | spashipMode | boolean | process.env.SPASHIP === 'true' | Enable SPAShip mode (copies static file without fetching chroming) |

*Default header placeholder: #include virtual="/.include/chrome/header-authenticated-v3-universal-and-primary-full/header.html"

**Default footer placeholder: #include virtual="/.include/chrome/rh-universal-footer/footer.html"

How it Works

1. The plugin reads your static HTML template file
2. During build, it fetches the Red Hat Connect header and footer from the configured environment
3. It replaces HTML comment placeholders with the actual header/footer content
4. The processed HTML is written to the output path

License

MIT © gautamkrishnar