SourceGuard Frontend Components - Deployment Guide

Overview

The SourceGuard Frontend Components library is a comprehensive React component library designed for security and vulnerability management applications. This library provides a collection of reusable UI components, internationalization support, and TypeScript definitions for building modern security-focused web applications.

Installation

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager
• React 18.2.0 or higher
• Access to Sparkle-Techbank private registry

Setting Up Registry Access

1. Generate Authentication Token

   Visit GitLab and navigate to:

   Profile → Access Tokens → Add new token

   Or alternatively:

   User Settings → Access Tokens → Personal Access Tokens

   Token Scopes: Select api and read_registry scopes for npm package access.

   ⚠️ Important: Copy your token immediately as it will only be shown once.

2. Configure NPM Registry

   Add the following to your local ~/.npmrc file:

   @Sparkle-Techbank:registry=https://gitlab.sparkle-in-tech.com/api/v4/packages/npm/
   //gitlab.sparkle-in-tech.com/api/v4/packages/npm/:_authToken=[YOUR_AUTH_TOKEN]

   Replace [YOUR_AUTH_TOKEN] with the token generated in step 1.

3. Install the Package

   npm install @Sparkle-Techbank/sourceguard-frontend-components@[VERSION]

   Replace [VERSION] with the desired version (e.g., 0.0.5-rc27).

Development Setup

Local Development Environment

1. Clone the Repository

   git clone [REPOSITORY_URL]
   cd source-guard-frontend-component

2. Install Dependencies

   npm install

3. Install Yalc (for local development)

   npm install -g yalc

4. Start Development Server

   npm run start
   # or for webpack dev server
   npm run start-server

5. Build for Development

   npm run build-dev

6. Build for Production

   npm run build-prod

Local Development with Yalc

Yalc allows you to test your component library locally in consuming projects without publishing to the registry. This is essential for rapid development and testing.

Setting Up Yalc Workflow

1. Build and Publish to Yalc Store (fisrt time setup)

   npm run yalc:publish

   This will:

   • Build the library
   • Publish it to the local Yalc store
   • Make it available for local consumption

2. Push to Yalc Store (after changes)

   npm run yalc:push

   This will:

   • Push the changes to the local Yalc store

Using in Consuming Projects

1. Add the Library from Yalc

   In your consuming project:

   yalc add @Sparkle-Techbank/sourceguard-frontend-components
   npm install

2. Update When Changes are Made

   yalc update @Sparkle-Techbank/sourceguard-frontend-components

3. Remove Yalc Package (when done testing)

   yalc remove @Sparkle-Techbank/sourceguard-frontend-components
   npm install @Sparkle-Techbank/sourceguard-frontend-components@[VERSION]

Development Scripts

Script	Description
npm run start	Start React development server
npm run start-server	Start Webpack dev server with hot reload
npm run build	Build library for development
npm run build-dev	Build library in development mode
npm run build-prod	Build library in production mode
npm run prepublish	Clean and build before publishing
npm run clean	Remove dist directory
npm run yalc:publish	Build and publish to local Yalc store
npm run yalc:watch	Watch mode - auto rebuild and push to Yalc
npm run yalc:push	Push current build to Yalc consumers

Publishing

Pre-Publishing Checklist

1. Update Version: Increment version in package.json
2. Test Build: Ensure clean build without errors
3. Review Changes: Verify all changes are intended
4. Update Documentation: Update any relevant documentation

Publishing Process

1. Prepare Build

   npm run prepublish

   This command:

   • Removes existing dist directory
   • Builds the library in development mode
   • Generates TypeScript definitions

2. Publish to Registry

   npm publish

3. Verify Publication Check the package is available at: GitLab Packages