single-spa-auth-app

This is a Vue application example used as NPM package in single-spa-login-example-with-npm-modules in order to register an application. See the installation instructions there.

✍🏻 Motivation

This is a vue application built as library which only contains the login form in order to perform the required login.

How it works ❓

There are several files for the right working of this application and they are:

• src/router/index.js
• src/singleSpaEntry.js
• package.json
• vue.config.js

src/router/index.js

/* eslint-disable import/no-unresolved */
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: '/login',
  routes: [
    {
      path: '/',
      component: () => import('@/views/Login'),
      children: [],
    },
  ],
});

The eslint comment is indicated due to webpack external dependencies. Without the eslint comment the build process will fail.
As this application will be mounted when browser url is /login, we need to config mode option with history value and base option with /login value in the vue router instance.

src/singleSpaEntry.js

/* eslint-disable import/no-unresolved */
/* eslint-disable import/no-extraneous-dependencies */
import Vue from 'vue';
import VueToastr from 'vue-toastr';
import singleSpaVue from 'single-spa-vue';
import { BootstrapVue } from 'bootstrap-vue';

import { library } from '@fortawesome/fontawesome-svg-core';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

import App from './App.vue';
import router from './router';

library.add(faGithub);

Vue.component('font-awesome-icon', FontAwesomeIcon);

Vue.use(BootstrapVue);

Vue.use(VueToastr, {
  defaultPosition: 'toast-top-right',
  defaultPreventDuplicates: true,
  defaultTimeout: 0,
});

Vue.config.productionTip = false;

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#auth-app',
    render: (h) => h(App),
    router,
  },
});

export const { bootstrap } = vueLifecycles;
export const { mount } = vueLifecycles;
export const { unmount } = vueLifecycles;

The eslint comments are indicated due to webpack external dependencies. Without the eslint comments the build process will fail.
The vueLifecycles object contains all single-spa-vue methods for the single-spa lifecycle of this app. All used config is default one but the custom config of the el option. It's assumed that an element with auth-app id is defined in the index.html where this application will be mounted.

package.json

{
  "name": "single-spa-auth-app",
  "version": "0.1.2",
  "description": "Vue application with login form for be included in a single-spa application as registered app.",
  "main": "dist/single-spa-auth-app.umd.js",
  "scripts": {
    "build": "vue-cli-service build --target lib --formats umd --name single-spa-auth-app src/singleSpaEntry.js",
    "lint": "vue-cli-service lint"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.1.0",
    "@vue/cli-plugin-eslint": "4.1.0",
    "@vue/cli-service": "4.1.0",
    "babel-eslint": "10.0.3",
    "core-js": "3.4.4",
    "eslint": "5.16.0",
    "eslint-config-airbnb-base": "14.0.0",
    "eslint-plugin-import": "2.20.0",
    "eslint-plugin-vue": "5.0.0",
    "node-sass": "4.13.1",
    "sass-loader": "8.0.2",
    "vue-cli-plugin-single-spa": "1.1.0",
    "vue-template-compiler": "2.6.11",
    "webpack": "4.41.5"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/jualoppaz/single-spa-auth-app.git"
  },
  "keywords": [
    "single-spa",
    "login",
    "npm",
    "webpack",
    "vue",
    "bootstrap-vue",
    "bootstrap"
  ],
  "author": "Juan Manuel López Pazos",
  "bugs": {
    "url": "https://github.com/jualoppaz/single-spa-auth-app/issues"
  },
  "homepage": "https://github.com/jualoppaz/single-spa-auth-app#readme"
}

There are only two scripts in this project:

• build: for compile the application and build it as a libray in umd format
• lint: for run eslint in all project

There are only devDependencies because the application dependencies are defined as webpack externals.

vue.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  devServer: {
    writeToDisk: true,
  },
  configureWebpack: {
    output: {
      library: 'single-spa-auth-app',
      libraryTarget: 'umd',
      filename: 'single-spa-auth-app.js',
      path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
      }),
    ],
  },
  chainWebpack: (config) => {
    config.externals([
      '@fortawesome/fontawesome-svg-core',
      '@fortawesome/free-brands-svg-icons',
      '@fortawesome/vue-fontawesome',
      'bootstrap',
      'bootstrap-vue',
      'single-spa-vue',
      'vue',
      'vue-router',
      'vue-toastr',
    ]);
  },
};

The needed options for the right build of the application as library are defined in the configureWebpack.output field.
The LimitChunkCountPlugin is used for disable chunks for build process. It's not necessary but I prefer keep whole application in one chunk as it will be embedded in another one.
Finally, in the chainWebpack field all common dependencies between single spa registered apps are defined as externals. In that way, all single spa registered apps will use the same dependencies and they will be imported only in the root project.