HRM Portal

A Vue 3 + TypeScript Human Resource Management portal application built as a microfrontend. This application provides comprehensive HR management features including employee management, role management, team management, and timesheet tracking.

Architecture

This is a microfrontend application that exports as an NPM package and can be consumed by other applications. It uses:

• Framework: Vue 3 with Composition API
• Build Tool: Vite
• Language: TypeScript
• State Management: Pinia
• Styling: Tailwind CSS
• Routing: Vue Router 4
• Internationalization: Vue I18n
• Backend Communication: Axios with REST APIs

Prerequisites

• Node.js: v20 or higher
• pnpm: v9 or higher
• Access to FeedMe's private packages: Requires authentication tokens for GitHub Packages

Environment Variables

Create a .env file in the apps/hrm-portal directory with the following variables:

# FeedMe Client ID for authentication
VITE_FEED_ME_CLIENT_ID=your_client_id_here

# Backend API URL (optional, defaults to FeedMe's base client)
VITE_PORTAL_BACKEND_URL=https://your-backend-api-url.com

Local Development

1. Install Dependencies

From the project root, install all dependencies:

pnpm install

2. Start Development Server

Run the development server for the HRM portal:

# From project root
pnpm portal:dev

# Or from apps/hrm-portal directory
cd apps/hrm-portal
pnpm dev

The application will be available at http://localhost:5173 (default Vite port).

3. Type Checking and Linting

# Type checking
pnpm type-check

# Linting and auto-fix
pnpm lint

# Code formatting
pnpm format

Deployment

Manual Deployment

1. Update Version: Update the version in apps/hrm-portal/package.json

2. Build Package:

   pnpm build-only

3. Publish to NPM/Github:

   pnpm publish-npm
   
   pnpm publish-github

   Or for beta releases:

   pnpm publish-npm:beta
   
   pnpm publish-github:beta

CI/CD Deployment

The application uses GitHub Actions for automated deployment:

• Development: Triggered manually via publish-hrm-portal-dev.yml
• Production: Triggered manually via publish-hrm-portal-prod.yml

Both workflows use the reusable workflow publish-hrm-portal-reusable.yml which:

1. Updates the package version (auto-increment or manual)
2. Builds the package
3. Publishes to GitHub Packages
4. Publishes to NPM registry
5. Update package version in /portal/ci/{environment}/package_versions.json for invalidating cloudflare.

Required Secrets

For CI/CD deployment, the following GitHub secrets are required:

• MEBOT_GITHUB_PACKAGES - GitHub token for accessing private packages
• MEBOT_NPM_PACKAGES - NPM token for publishing packages

These secrets are set in github Org level, for local development, you would need either add

• .npmrc (local to project folder), or
• ~/.npmrc (available for all other project)

@feedmepos:registry https://npm.pkg.github.com/=true

//npm.pkg.github.com/:_authToken=xxx (create personal access token (classic))
//registry.npmjs.org/:_authToken=xxx (get token from security team)