{"id":20495298,"url":"https://github.com/jualoppaz/single-spa-auth-app","last_synced_at":"2025-04-13T17:43:26.002Z","repository":{"id":39256741,"uuid":"233917186","full_name":"jualoppaz/single-spa-auth-app","owner":"jualoppaz","description":"Vue application with login form for be included in a single-spa application as registered app.","archived":false,"fork":false,"pushed_at":"2023-01-06T02:27:49.000Z","size":3623,"stargazers_count":8,"open_issues_count":23,"forks_count":16,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T08:45:09.599Z","etag":null,"topics":["bootstrap","bootstrap-vue","login","login-system","single-spa","single-spa-demo","single-spa-vue","vue","vue-application","vuejs","webpack"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jualoppaz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-14T19:18:17.000Z","updated_at":"2023-09-10T06:15:01.000Z","dependencies_parsed_at":"2023-02-05T03:01:52.083Z","dependency_job_id":null,"html_url":"https://github.com/jualoppaz/single-spa-auth-app","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jualoppaz%2Fsingle-spa-auth-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jualoppaz%2Fsingle-spa-auth-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jualoppaz%2Fsingle-spa-auth-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jualoppaz%2Fsingle-spa-auth-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jualoppaz","download_url":"https://codeload.github.com/jualoppaz/single-spa-auth-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248756360,"owners_count":21156758,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-vue","login","login-system","single-spa","single-spa-demo","single-spa-vue","vue","vue-application","vuejs","webpack"],"created_at":"2024-11-15T17:45:22.197Z","updated_at":"2025-04-13T17:43:25.983Z","avatar_url":"https://github.com/jualoppaz.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp float=\"left\"\u003e\n  \u003cimg src=\"https://single-spa.js.org/img/logo-white-bgblue.svg\" width=\"50\" height=\"50\"\u003e\n  \u003cimg src=\"https://vuejs.org/images/logo.png\" width=\"50\" height=\"50\"\u003e\n\u003c/p\u003e\n\n[![npm version](https://img.shields.io/npm/v/single-spa-auth-app.svg?style=flat-square)](https://www.npmjs.org/package/single-spa-auth-app)\n[![](https://data.jsdelivr.com/v1/package/npm/single-spa-auth-app/badge)](https://www.jsdelivr.com/package/npm/single-spa-auth-app)\n\n# single-spa-auth-app\n\nThis is a Vue application example used as NPM package in [single-spa-login-example-with-npm-modules](https://github.com/jualoppaz/single-spa-login-example-with-npm-modules) in order to register an application. See the installation instructions there.\n\n## ✍🏻 Motivation\n\nThis is a vue application built as library which only contains the login form in order to perform the required login.\n\n## How it works ❓\n\nThere are several files for the right working of this application and they are:\n\n- src/router/index.js\n- src/singleSpaEntry.js\n- package.json\n- vue.config.js\n\n### src/router/index.js\n\n```javascript\n/* eslint-disable import/no-unresolved */\nimport Vue from 'vue';\nimport Router from 'vue-router';\n\nVue.use(Router);\n\nexport default new Router({\n  mode: 'history',\n  base: '/login',\n  routes: [\n    {\n      path: '/',\n      component: () =\u003e import('@/views/Login'),\n      children: [],\n    },\n  ],\n});\n```\n\nThe **eslint** comment is indicated due to **webpack external** dependencies. Without the **eslint** comment the build process will fail.\\\nAs 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.\n\n### src/singleSpaEntry.js\n\n```javascript\n/* eslint-disable import/no-unresolved */\n/* eslint-disable import/no-extraneous-dependencies */\nimport Vue from 'vue';\nimport VueToastr from 'vue-toastr';\nimport singleSpaVue from 'single-spa-vue';\nimport { BootstrapVue } from 'bootstrap-vue';\n\nimport { library } from '@fortawesome/fontawesome-svg-core';\nimport { faGithub } from '@fortawesome/free-brands-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';\n\nimport App from './App.vue';\nimport router from './router';\n\nlibrary.add(faGithub);\n\nVue.component('font-awesome-icon', FontAwesomeIcon);\n\nVue.use(BootstrapVue);\n\nVue.use(VueToastr, {\n  defaultPosition: 'toast-top-right',\n  defaultPreventDuplicates: true,\n  defaultTimeout: 0,\n});\n\nVue.config.productionTip = false;\n\nconst vueLifecycles = singleSpaVue({\n  Vue,\n  appOptions: {\n    el: '#auth-app',\n    render: (h) =\u003e h(App),\n    router,\n  },\n});\n\nexport const { bootstrap } = vueLifecycles;\nexport const { mount } = vueLifecycles;\nexport const { unmount } = vueLifecycles;\n```\n\nThe **eslint** comments are indicated due to **webpack external** dependencies. Without the **eslint** comments the build process will fail.\\\nThe **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.\n\n### package.json\n\n```json\n{\n  \"name\": \"single-spa-auth-app\",\n  \"version\": \"0.2.0\",\n  \"description\": \"Vue application with login form for be included in a single-spa application as registered app.\",\n  \"main\": \"dist/single-spa-auth-app.umd.js\",\n  \"scripts\": {\n    \"build\": \"vue-cli-service build --target lib --formats umd --name single-spa-auth-app src/singleSpaEntry.js\",\n    \"lint\": \"vue-cli-service lint\"\n  },\n  \"devDependencies\": {\n    \"@vue/cli-plugin-babel\": \"4.1.0\",\n    \"@vue/cli-plugin-eslint\": \"4.1.0\",\n    \"@vue/cli-service\": \"4.1.0\",\n    \"babel-eslint\": \"10.0.3\",\n    \"core-js\": \"3.4.4\",\n    \"eslint\": \"5.16.0\",\n    \"eslint-config-airbnb-base\": \"14.0.0\",\n    \"eslint-plugin-import\": \"2.20.0\",\n    \"eslint-plugin-vue\": \"5.0.0\",\n    \"node-sass\": \"4.13.1\",\n    \"sass-loader\": \"8.0.2\",\n    \"vue-cli-plugin-single-spa\": \"1.1.0\",\n    \"vue-template-compiler\": \"2.6.11\",\n    \"webpack\": \"4.41.5\"\n  },\n  \"browserslist\": [\n    \"\u003e 1%\",\n    \"last 2 versions\"\n  ],\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/jualoppaz/single-spa-auth-app.git\"\n  },\n  \"keywords\": [\n    \"single-spa\",\n    \"login\",\n    \"npm\",\n    \"webpack\",\n    \"vue\",\n    \"bootstrap-vue\",\n    \"bootstrap\"\n  ],\n  \"author\": \"Juan Manuel López Pazos\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jualoppaz/single-spa-auth-app/issues\"\n  },\n  \"homepage\": \"https://github.com/jualoppaz/single-spa-auth-app#readme\",\n  \"dependencies\": {\n    \"vue-google-adsense\": \"1.9.2\",\n    \"vue-script2\": \"2.1.0\"\n  }\n}\n```\n\nThere are only two scripts in this project:\n\n- **build**: for compile the application and build it as a **libray** in **umd** format\n- **lint**: for run **eslint** in all project\n\nThere are only **devDependencies** because the application dependencies are defined as **webpack externals**.\n\n### vue.config.js\n\n```javascript\nconst path = require('path');\nconst webpack = require('webpack');\n\nmodule.exports = {\n  devServer: {\n    writeToDisk: true,\n  },\n  configureWebpack: {\n    output: {\n      library: 'single-spa-auth-app',\n      libraryTarget: 'umd',\n      filename: 'single-spa-auth-app.js',\n      path: path.resolve(__dirname, 'dist'),\n    },\n    plugins: [\n      new webpack.optimize.LimitChunkCountPlugin({\n        maxChunks: 1,\n      }),\n    ],\n  },\n  chainWebpack: (config) =\u003e {\n    config.externals([\n      '@fortawesome/fontawesome-svg-core',\n      '@fortawesome/free-brands-svg-icons',\n      '@fortawesome/vue-fontawesome',\n      'bootstrap',\n      'bootstrap-vue',\n      'single-spa-vue',\n      'vue',\n      'vue-router',\n      'vue-toastr',\n    ]);\n  },\n};\n```\n\nThe needed options for the right build of the application as library are defined in the **configureWebpack.output** field.\\\nThe **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.\\\nFinally, 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. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjualoppaz%2Fsingle-spa-auth-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjualoppaz%2Fsingle-spa-auth-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjualoppaz%2Fsingle-spa-auth-app/lists"}