Getting Started with Lidhium.js

Build scalable micro-frontend applications with ease

Lidhium.js is a powerful CLI tool designed to simplify the process of creating and managing micro-frontend applications with Webpack. It provides a complete solution for building, deploying, and managing modular frontend architectures.

Core Technologies

  • •
    Vue 3

    Modern, progressive JavaScript framework with Composition API

  • •
    Webpack

    Powerful module bundler with advanced code splitting

  • •
    Tailwind CSS

    Utility-first CSS framework for rapid UI development

  • •
    Module Federation

    Advanced system for seamless micro-frontend integration

Key Features

  • ✓
    Zero-config Setup

    Get started quickly with sensible defaults

  • ✓
    Hot Reloading

    Built-in development server with instant updates

  • ✓
    Production Optimization

    Automatic code splitting and bundle optimization

  • ✓
    Modern Tooling

    TypeScript, ESLint, and Prettier included

Installation & Project Setup

1. Global Installation

First, install Lidhium.js globally using npm or yarn to make the CLI commands available throughout your system:

# Using npm
npm install -g @lidhium/cli

# Using yarn
yarn global add @lidhium/cli

2. Create a New Project

Once installed, you can create a new Lidhium.js project using the init command:

lidhium init my-app

What this creates:

  • A new directory with your project name
  • Pre-configured Vue 3 setup with TypeScript
  • Tailwind CSS configuration
  • Module Federation setup
  • Development and production configurations

3. Project Structure

The generated project includes the following configuration files and directories:

my-app/
├── apps/                   # Application modules directory
├── global/                 # Global configurations
├── .browserslistrc         # Browser compatibility config
├── .editorconfig           # Editor settings
├── .eslintrc.js            # ESLint configuration
├── .gitignore              # Git ignore rules
├── babel.config.js         # Babel configuration
├── cypress.json            # Cypress test config
├── jest.config.js          # Jest test configuration
├── lidhium.config.json     # Lidhium specific settings
├── package.json            # Project dependencies
├── postcss.config.js       # PostCSS configuration
├── README.md              # Project documentation
├── tailwind.config.js     # Tailwind CSS configuration
└── tsconfig.json          # TypeScript configuration

Key Configuration Files:

  • lidhium.config.json - Configure micro-frontend settings
  • apps/ - Contains all your micro-frontend applications
  • global/ - Shared configurations and utilities
  • babel.config.js - JavaScript compilation settings
  • tsconfig.json - TypeScript compiler options
  • tailwind.config.js - Styling configuration

System Requirements

Node.js

Version 20.9 or higher

Package Manager

npm 6.x+ or yarn 1.22.x+

Browser Support

Modern browsers (Chrome, Firefox, Safari, Edge)

Next Steps

  • →
    Create Micro App

    Generate your first micro-frontend application using the lidhium generate command

  • →
    Create Components

    Start building your first micro-frontend components in the src/components directory

  • →
    Configure Routes

    Set up routing in your application using Vue Router

Troubleshooting Tips

  • • Ensure your Node.js version is compatible using node --version
  • • If installation fails, try with admin privileges or use sudo
  • • Clear npm cache using npm cache clean --force
  • • For permission errors, check npm's global installation directory