@rhc-shared-components/vite-plugins

Collection of Vite plugins for Red Hat Connect applications

Requirements

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

Install

yarn add @rhc-shared-components/vite-plugins

Plugins

chromingPlugin

Injects Red Hat Connect chroming (header and footer) into HTML during build.

Usage

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

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
})

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

customUrlLogger

Customizes the dev server URL logger to display a custom URL instead of the default localhost URL.

Usage

import { defineConfig } from 'vite';
import { customUrlLogger } from '@rhc-shared-components/vite-plugins';

export default defineConfig({
  plugins: [
    customUrlLogger({
      host: 'stage.foo.redhat.com',
      port: 1337,
      prefix: '/partner-admin/'
    })
  ]
});

Configuration Options

| Option | Type | Default | Description | |------------|---------------------|--------------------------|----------------------------------| | protocol | 'http' \| 'https' | 'https' | Protocol to use | | host | string | 'stage.foo.redhat.com' | Host to display in the URL | | port | number | 1337 | Port to display in the URL | | prefix | string | '' | Path prefix to append to the URL |

Example Output

With the default configuration, the dev server will display:

➜  Local:   https://stage.foo.redhat.com:1337/partner-admin/

Using Multiple Plugins

You can use both plugins together:

import { defineConfig } from 'vite';
import { chromingPlugin, customUrlLogger } from '@rhc-shared-components/vite-plugins';

export default defineConfig({
  plugins: [
    chromingPlugin({
      env: 'QA'
    }),
    customUrlLogger({
      host: 'stage.foo.redhat.com',
      port: 1337,
      prefix: '/partner-admin/'
    })
  ]
});