@cesarchamal/single-spa-layout-app

v1.0.18

Published

5 months ago

Vue application with header, navbar and footer for be included in a single-spa application as registered app.

0High
0Medium
0Low

cesarchamal

single-spa login npm bootstrap bootstrap-vue webpack

single-spa-layout-app

Part of Demo Microfrontends - A comprehensive Single-SPA microfrontend architecture demonstration

A Vue.js layout microfrontend for Single-SPA providing shared navigation, header, and footer components across the entire application.

🏗️ Microfrontend Architecture

This application is one of 12 microfrontends in the demo-microfrontends project:

| Microfrontend | Framework | Port | Route | Repository | |---------------|-----------|------|-------|------------| | 🎯 Root App | Single-SPA | 8080 | Orchestrator | single-spa-root | | 🔐 Auth App | Vue.js | 4201 | /login | single-spa-auth-app | | 🎨 Layout App | Vue.js | 4202 | All routes | This repo | | 🏠 Home App | AngularJS | 4203 | / | single-spa-home-app | | 🅰️ Angular App | Angular 8 | 4204 | /angular/* | single-spa-angular-app | | 💚 Vue App | Vue.js 2 | 4205 | /vue/* | single-spa-vue-app | | ⚛️ React App | React 16 | 4206 | /react/* | single-spa-react-app | | 🍦 Vanilla App | ES2020+ | 4207 | /vanilla/* | single-spa-vanilla-app | | 🧩 Web Components | Lit | 4208 | /webcomponents/* | single-spa-webcomponents-app | | 📘 TypeScript App | TypeScript | 4209 | /typescript/* | single-spa-typescript-app | | 💎 jQuery App | jQuery 3.6 | 4210 | /jquery/* | single-spa-jquery-app | | 🔥 Svelte App | Svelte 3 | 4211 | /svelte/* | single-spa-svelte-app |

Main Repository: demo-microfrontends

Features

Shared Layout: Common header, navigation, and footer components
Vue.js 2: Progressive JavaScript framework
Bootstrap Vue: Responsive UI components and grid system
FontAwesome Icons: Comprehensive icon library
Responsive Design: Mobile-first responsive layout
Navigation Management: Dynamic menu and routing integration

Technology Stack

Framework: Vue.js 2.6.11
UI Library: Bootstrap Vue 2.2.2
Build Tool: Vue CLI 4 with library target
Styling: SCSS with Bootstrap integration
Icons: FontAwesome with Vue integration
Integration: Single-SPA Vue adapter

Development

Prerequisites

Node.js (v18.0.0 or higher)
npm (v8.0.0 or higher)

Installation

npm install

Development Server

npm start
# Runs on http://localhost:4202

Build

npm run build
# Outputs to dist/single-spa-layout-app.umd.js

Layout Components

Header Component

Application branding and logo
User authentication status
Global navigation menu
Responsive hamburger menu

Navigation Component

Primary navigation menu
Active route highlighting
Dropdown submenus
Mobile-responsive design

Footer Component

Copyright information
Links and social media
Contact information
Responsive layout

Sidebar (Optional)

Secondary navigation
Collapsible design
Context-sensitive content
Mobile drawer functionality

Single-SPA Integration

This microfrontend exports the required Single-SPA lifecycle functions:

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

Mount Point

The application mounts to the DOM element with ID layout-app:

<div id="layout-app"></div>

Route Configuration

Configured to be active on all routes except /login:

singleSpa.registerApplication(
  'layout',
  () => loadApp('single-spa-layout-app'),
  showWhenNotAnyOf(['/login'])
);

Global Layout Strategy

Always visible except on login page
Provides consistent user experience
Shared navigation state
Responsive breakpoints

Vue Configuration

External Dependencies

The application uses webpack externals for shared dependencies:

config.externals([
  'vue',
  'bootstrap-vue',
  'single-spa-vue',
  '@fortawesome/fontawesome-svg-core',
  '@fortawesome/free-brands-svg-icons',
  '@fortawesome/free-solid-svg-icons'
]);

Library Build

Built as UMD library for Single-SPA consumption:

configureWebpack: {
  output: {
    library: 'single-spa-layout-app',
    libraryTarget: 'umd',
    filename: 'single-spa-layout-app.js'
  }
}

Layout Features

Responsive Design

Mobile-first approach
Bootstrap grid system
Flexible breakpoints
Touch-friendly navigation

Navigation Management

Dynamic menu generation
Route-based active states
Breadcrumb navigation
Search functionality

User Interface

Consistent branding
Accessibility compliant
Dark/light theme support
Loading states

Performance

Lazy-loaded components
Optimized bundle size
Efficient re-renders
Memory management

Styling Architecture

SCSS Structure

// Variables and mixins
@import 'variables';
@import 'mixins';

// Bootstrap customization
@import 'bootstrap-overrides';

// Component styles
@import 'components/header';
@import 'components/navigation';
@import 'components/footer';

CSS Classes

BEM methodology
Utility classes
Component-scoped styles
Responsive utilities

File Structure

single-spa-layout-app/
├── src/
│   ├── components/           # Layout components
│   │   ├── Header.vue       # Header component
│   │   ├── Navigation.vue   # Navigation component
│   │   └── Footer.vue       # Footer component
│   ├── styles/              # SCSS stylesheets
│   │   ├── variables.scss   # SCSS variables
│   │   └── styles.scss      # Main styles
│   ├── App.vue              # Root layout component
│   └── singleSpaEntry.js    # Single-SPA integration
├── dist/                    # Build output directory
├── package.json             # Dependencies and scripts
├── vue.config.js           # Vue CLI configuration
├── .gitignore              # Git ignore rules
└── README.md               # This file

Configuration

Vue CLI Configuration (vue.config.js)

module.exports = {
  configureWebpack: {
    output: {
      library: 'single-spa-layout-app',
      libraryTarget: 'umd'
    },
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
      })
    ]
  }
};

Bootstrap Integration

Custom theme variables
Component overrides
Responsive utilities
Grid system customization

Accessibility

WCAG Compliance

Semantic HTML structure
ARIA labels and roles
Keyboard navigation
Screen reader support

Navigation Accessibility

Skip links
Focus management
High contrast support
Reduced motion support

Performance Optimization

Bundle Size: ~1.5MB (UMD build with styles)
Load Time: Optimized with external dependencies
Runtime: Efficient Vue.js updates
Memory: Proper component cleanup

Browser Support

Modern browsers (ES2015+)
IE11+ with polyfills
Mobile browsers
Progressive enhancement

Customization

Theming

// Override Bootstrap variables
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;

// Custom layout variables
$header-height: 60px;
$sidebar-width: 250px;

Component Props

// Navigation component props
props: {
  menuItems: Array,
  activeRoute: String,
  collapsed: Boolean
}

Testing

Unit Tests

npm run test:unit

Component Tests

npm run test:components

Linting

npm run lint

Contributing

Fork the repository
Create a feature branch
Follow Vue.js and Bootstrap best practices
Ensure responsive design
Test across different screen sizes
Submit a pull request

License

MIT License - see LICENSE file for details.

Related Projects

Vue.js - Progressive JavaScript framework
Bootstrap Vue - Vue.js Bootstrap components
FontAwesome - Icon library
Single-SPA - Microfrontend framework
Demo Microfrontends - Complete microfrontend demo

🚀 Quick Start

Run the complete microfrontend system:

# Clone main repository
git clone https://github.com/cesarchamal/demo-microfrontends.git
cd demo-microfrontends

# Start all microfrontends
./run.sh local dev

Run this microfrontend individually:

npm install
npm start
# Visit http://localhost:4202

Author

Cesar Francisco Chavez Maldonado - Vue.js Layout Microfrontend