{"id":13637927,"url":"https://github.com/joeldenning/coexisting-vue-microfrontends","last_synced_at":"2025-03-01T07:08:59.927Z","repository":{"id":38361530,"uuid":"197675310","full_name":"joeldenning/coexisting-vue-microfrontends","owner":"joeldenning","description":"A repo showing separate vue apps coexisting as microfrontends with single-spa","archived":false,"fork":false,"pushed_at":"2023-03-04T04:23:37.000Z","size":3447,"stargazers_count":613,"open_issues_count":56,"forks_count":142,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-10-14T14:51:51.172Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://coexisting-vue-microfrontends.surge.sh/","language":"JavaScript","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/joeldenning.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":["joeldenning"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-07-19T00:40:56.000Z","updated_at":"2024-09-14T05:46:43.000Z","dependencies_parsed_at":"2023-02-02T21:16:18.159Z","dependency_job_id":"933d7fdb-f4c4-4b19-8c28-50abc4d9a2f7","html_url":"https://github.com/joeldenning/coexisting-vue-microfrontends","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeldenning%2Fcoexisting-vue-microfrontends","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeldenning%2Fcoexisting-vue-microfrontends/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeldenning%2Fcoexisting-vue-microfrontends/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeldenning%2Fcoexisting-vue-microfrontends/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joeldenning","download_url":"https://codeload.github.com/joeldenning/coexisting-vue-microfrontends/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240131749,"owners_count":19752727,"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":[],"created_at":"2024-08-02T01:00:37.014Z","updated_at":"2025-02-22T06:06:12.212Z","avatar_url":"https://github.com/joeldenning.png","language":"JavaScript","funding_links":["https://github.com/sponsors/joeldenning"],"categories":["Uncategorized","JavaScript"],"sub_categories":["Uncategorized"],"readme":"# Try the newer example repo\n\nThe newer example demonstrating Vue Microfrontends can be found at https://github.com/vue-microfrontends and https://vue.microfrontends.app. That example better reflects the microfrontends architecture and is encouraged to use.\n\n# Coexisting Vue Microfrontends\n\n[![Build Status](https://travis-ci.org/joeldenning/coexisting-vue-microfrontends.svg?branch=master)](https://travis-ci.org/joeldenning/coexisting-vue-microfrontends)\n\nDemo: http://coexisting-vue-microfrontends.surge.sh\n\nThis is a starter-kit / example repository for people who want to have multiple vue microfrontends coexist within a single page. Each\nof the vue applications was created by Vue CLI.\n\nIt uses [single-spa](https://single-spa.js.org) to pull this off, which means that you can even add React, Angular, or other frameworks as\nadditional microfrontends.\n\n## An important note\nThis github repository has four projects all in one repo. But when you do this yourself, **you'll want to have one git repo per\nvue application**. The root-html-file project should also be in its own repo. This is what lets different teams and developers be in\ncharge of different microfrontends.\n\n## Local development -- one app at a time\n[Tutorial video](https://www.youtube.com/watch?v=vjjcuIxqIzY\u0026list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU\u0026index=4)\n\nWith single-spa, it is preferred to run `npm run serve` in only one single-spa application at a time, while using a deployed\nversion of the other applications. This makes for an awesome developer experience where you can boot up just one\nmicrofrontend at a time, not even having to clone, npm install, or boot up all of the other ones.\n\nTo try this out, clone the repo and run the following commands:\n```sh\ncd app1\nnpm i\nnpm run serve\n```\n\nNow go to http://coexisting-vue-microfrontends.surge.sh in a browser. In a browser console, run `localStorage.setItem('overrides-ui', true)`.\nRefresh the page. Now click on the yellowish rectangle at the bottom right. Then click on `app1`. Change the module url to http://localhost:8081/js/app.js. Then apply the override and reload the page. This will have change app1 to load from your localhost instead of from surge.sh.\nAs you modify the code locally, it will reload the page on coexisting-vue-microfrontends.surge.sh. See\nhttps://github.com/joeldenning/import-map-overrides for more info on this.\n\n## Local development -- all at once\nIt is preferred to only run one app at a time. But if you need to run them all locally, you can do so with the following instructions\n\n```sh\n# First terminal tab\ncd root-html-file\nnpm install\nnpm run serve\n```\n```sh\n# Second terminal tab\ncd app1\nnpm install\nnpm run serve\n```\n\n```sh\n# Third terminal tab\ncd app2\nnpm install\nnpm run serve\n```\n\n```sh\n# Fourth terminal tab\ncd navbar\nnpm install\nnpm run serve\n```\n\nNow go to http://localhost:5000 in a browser. Note that you can change any of the ports for the projects by modifying the Import Map inside of\nroot-html-file/index.html.\n\nIf you get serious about deploying your code, you'll want to make it no longer necessary to boot up all of the apps in order to do anything.\nWhen you get to that point, check out [import-map-overrides](https://github.com/joeldenning/import-map-overrides/), which lets you go to\na deployed environment and override the [Import Map](https://github.com/WICG/import-maps) for just one microfrontend at a time. The\nimport-map-overrides library is already loaded in the index.html of root-html-file, so you can start using it immediately. You can make your\ndeployed environment overridable, just like you can do overrides on http://coexisting-vue-microfrontends.surge.sh\n\n## More documentation\nGo to https://single-spa.js.org/docs/ecosystem-vue.html to learn how all of this works.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoeldenning%2Fcoexisting-vue-microfrontends","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoeldenning%2Fcoexisting-vue-microfrontends","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoeldenning%2Fcoexisting-vue-microfrontends/lists"}