Merge branch 'release/v0.1.2'

jualoppaz · Mar 1, 2020 · 2da3546 · 2da3546
2 parents bd53ae5 + e808e26
commit 2da3546
Show file tree

Hide file tree

Showing 6 changed files with 470 additions and 138 deletions.
diff --git a/README.md b/README.md
@@ -14,16 +14,162 @@ This is a Vue application example used as NPM package in [single-spa-login-examp
 
 This is a vue application built as library which only contains the login form in order to perform the required login.
 
-## 💻 Run in localhost
+## How it works ❓
 
-This application is designed especially for be integrated in [single-spa-login-example-with-npm-modules](https://github.com/jualoppaz/single-spa-login-example-with-npm-modules), but if you want you can run only this application following this steps:
+There are several files for the right working of this application and they are:
 
+- src/singleSpaEntry.js
+- package.json
+- vue.config.js
+
+### src/singleSpaEntry.js
+
+```javascript
+/* 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;
 ```
-npm install
-```
 
+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
+
+```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"
+}
 ```
-npm run serve
+
+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
+
+```javascript
+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',
+    ]);
+  },
+};
 ```
 
-Finally you only have to open [http://localhost:8080](http://localhost:8080) in a browser to see the app running
+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.