├── .browserslistrc ├── .github ├── FUNDING.yml └── workflows │ └── build_and_deploy.yml ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── jest.config.js ├── package.json ├── pnpm-lock.yaml ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── rate-dogs.vue ├── main.js └── router │ └── index.js └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: ["joeldenning"] 4 | patreon: singlespa 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/workflows/build_and_deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build, Test, Release 2 | 3 | on: 4 | push: 5 | branches: main 6 | pull_request: 7 | branches: "*" 8 | 9 | jobs: 10 | build_test: 11 | name: Build and Test 12 | runs-on: ubuntu-latest 13 | 14 | steps: 15 | - name: Checkout Repo 16 | uses: actions/checkout@v4 17 | - name: Install Pnpm 18 | uses: pnpm/action-setup@v4 19 | - name: Setup Node.js 20 | uses: actions/setup-node@v4 21 | with: 22 | node-version: 22 23 | cache: pnpm 24 | - name: Install dependencies 25 | run: pnpm install --frozen-lockfile 26 | 27 | - name: Test 28 | run: | 29 | pnpm run lint 30 | 31 | - name: Build 32 | run: pnpm run build 33 | 34 | - name: Store artifact 35 | uses: actions/upload-artifact@v4 36 | with: 37 | name: dist 38 | path: dist 39 | 40 | release: 41 | name: Release 42 | needs: build_test 43 | runs-on: ubuntu-latest 44 | if: ${{ github.ref == 'refs/heads/main' }} 45 | permissions: 46 | contents: "read" 47 | id-token: "write" 48 | 49 | steps: 50 | - name: Download build artifact 51 | uses: actions/download-artifact@v4 52 | with: 53 | name: dist 54 | 55 | - name: Authenticate with GCP 56 | uses: "google-github-actions/auth@v2" 57 | with: 58 | project_id: neural-passkey-248222 59 | workload_identity_provider: "projects/654158993889/locations/global/workloadIdentityPools/github/providers/my-repo" 60 | service_account: github-workload-identity-feder@neural-passkey-248222.iam.gserviceaccount.com 61 | 62 | - name: Upload Static Files to CDN 63 | uses: "google-github-actions/upload-cloud-storage@v2" 64 | with: 65 | path: . 66 | destination: vue.microfrontends.app/${{ github.event.repository.name }}/${{ github.run_id }} 67 | 68 | - name: Update Import Map 69 | uses: single-spa/action-deploy-to-import-map-deployer@v1 70 | with: 71 | host: ${{ secrets.DEPLOYER_HOST }} 72 | username: ${{ secrets.DEPLOYER_USERNAME }} 73 | password: ${{ secrets.DEPLOYER_PASSWORD }} 74 | environment-name: vue 75 | service-name: "@vue-mf/${{ github.event.repository.name }}" 76 | service-url: "https://vue.microfrontends.app/${{ github.event.repository.name }}/${{ github.run_id }}/js/app.js" 77 | service-integrity-file-path: js/app.js -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 vue-microfrontends 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Microfrontends rate dogs 2 | 3 | [![CircleCI](https://circleci.com/gh/vue-microfrontends/rate-dogs.svg?style=svg)](https://circleci.com/gh/vue-microfrontends/rate-dogs) 4 | 5 | ## What is this? 6 | 7 | This is an example microfrontend repo demonstrating how to use [single-spa](https://single-spa.js.org). You can see the code running at https://vue.microfrontends.app. 8 | 9 | ## How does it work? 10 | 11 | [Full article](https://single-spa.js.org/docs/recommended-setup) 12 | 13 | This repository is a javascript project that creates a javascript bundle that is an in-browser javascript module (explanation on [youtube](https://www.youtube.com/watch?v=Jxqiu6pdMSU&list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU&index=2) / [bilibili](https://www.bilibili.com/video/av83498486/)). The currently deployed version of the in-browser module can be seen at https://vue.microfrontends.app/importmap.json. 14 | 15 | This project uses [Vue](https://vuejs.org) and was created with the [create-single-spa](https://single-spa.js.org/docs/create-single-spa) CLI. It uses webpack and babel. 16 | 17 | Whenever a pull request is merged to master, [CircleCI builds and deploys the project](https://circleci.com/gh/vue-microfrontends/rate-dogs). The ["workflows" view](https://circleci.com/gh/vue-microfrontends/workflows) (pictured below) can be seen if you are logged into CircleCI. Deployments for this in-browser module are completely independent of deployments for any other module. 18 | 19 | ![image](https://user-images.githubusercontent.com/5524384/75210801-5ba02700-573f-11ea-8064-46af165cba0a.png) 20 | 21 | ## Local development 22 | 23 | [Full documentation](https://single-spa.js.org/docs/recommended-setup#local-development) 24 | 25 | Tutorial video: [youtube](https://www.youtube.com/watch?v=vjjcuIxqIzY&list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU&index=4) / [bilibili](https://www.bilibili.com/video/av83617789/) 26 | 27 | There are two ways to do local development. It is preferred to do one module at a time, whenever possible. 28 | 29 | ### One module at a time 30 | 31 | ```sh 32 | cd rate-dogs 33 | yarn install 34 | yarn serve 35 | ``` 36 | 37 | Note that you may use whichever port you would like to. Go to https://localhost:8503/js/app.js and verify that you are able to load the file without any SSL problems. To solve SSL problems, see [these instructions](https://improveandrepeat.com/2016/09/allowing-self-signed-certificates-on-localhost-with-chrome-and-firefox/). 38 | 39 | Now, go to https://vue.microfrontends.app. In the browser console, run the following: 40 | 41 | ```js 42 | localStorage.setItem('devtools', true); 43 | ``` 44 | 45 | Refresh the page. Click on the tan / beige rectangle: 46 | 47 | ![image](https://user-images.githubusercontent.com/5524384/75211359-e46b9280-5740-11ea-80bb-974846df414b.png) 48 | 49 | Set an [import map override](https://github.com/joeldenning/import-map-overrides/) to `https://localhost:8503/js/app.js`. 50 | 51 | ![image](https://user-images.githubusercontent.com/5524384/75211553-7e333f80-5741-11ea-97d6-d3d86ffd1826.png) 52 | 53 | Refresh the page. Your local code for this module will now be running on https://vue.microfrontends.app. You may make changes locally and refresh the page to see them. 54 | 55 | ### All modules together 56 | 57 | Run the root-config project locally: 58 | 59 | ``` 60 | cd root-config 61 | yarn install 62 | yarn start 63 | ``` 64 | 65 | Now follow the steps above for "One module at a time" for each of the modules you wish to work on. 66 | 67 | ## Adapting for your organization 68 | 69 | Feel free to fork and modify any files you would like when doing a proof of concept for your organization. When it's time to actually create / adapt your organization's projects, consider using [create-single-spa](https://single-spa.js.org/docs/create-single-spa) instead of forking this repository. 70 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "@vue/cli-plugin-unit-jest" 3 | }; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-mf-rate-dogs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "single-spa-vue": "^3.0.1", 13 | "vue": "^3.5.13", 14 | "vue-router": "^4.5.0" 15 | }, 16 | "devDependencies": { 17 | "@babel/eslint-parser": "^7.26.5", 18 | "@vue/cli-plugin-babel": "^5.0.8", 19 | "@vue/cli-plugin-eslint": "^5.0.8", 20 | "@vue/cli-plugin-router": "^5.0.8", 21 | "@vue/cli-service": "^5.0.8", 22 | "@vue/eslint-config-prettier": "^10.2.0", 23 | "babel-eslint": "^10.1.0", 24 | "eslint": "^7.32.0", 25 | "eslint-plugin-prettier": "^5.2.3", 26 | "eslint-plugin-vue": "^9.32.0", 27 | "prettier": "^3.4.2", 28 | "vue-cli-plugin-single-spa": "^4.0.0", 29 | "vue-template-compiler": "^2.6.12" 30 | }, 31 | "eslintConfig": { 32 | "root": true, 33 | "env": { 34 | "node": true 35 | }, 36 | "extends": [ 37 | "plugin:vue/vue3-essential", 38 | "eslint:recommended" 39 | ], 40 | "parserOptions": { 41 | "parser": "@babel/eslint-parser" 42 | }, 43 | "rules": {} 44 | }, 45 | "packageManager": "pnpm@10.2.0" 46 | } 47 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-microfrontends/rate-dogs/d4547b10ef1ec6ebd9a000e2da4693c867dd6903/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-mf-rate-dogs 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-microfrontends/rate-dogs/d4547b10ef1ec6ebd9a000e2da4693c867dd6903/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/rate-dogs.vue: -------------------------------------------------------------------------------- 1 | 24 | 54 | 81 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp, h } from 'vue'; 2 | import singleSpaVue from "single-spa-vue"; 3 | 4 | import App from "./App.vue"; 5 | import router from "./router"; 6 | 7 | const vueLifecycles = singleSpaVue({ 8 | createApp, 9 | appOptions: { 10 | render() { 11 | return h(App, {}); 12 | }, 13 | }, 14 | handleInstance(app) { 15 | app.use(router); 16 | } 17 | }); 18 | 19 | export const bootstrap = vueLifecycles.bootstrap; 20 | export const mount = vueLifecycles.mount; 21 | export const unmount = vueLifecycles.unmount; 22 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createWebHistory, createRouter } from 'vue-router' 2 | import RateDogs from "../components/rate-dogs.vue"; 3 | 4 | const routes = [{ path: "/rate-doggos", component: RateDogs }]; 5 | 6 | export default createRouter({ 7 | history: createWebHistory(), 8 | routes 9 | }) -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | configureWebpack: { 4 | externals: ["vue", "vue-router", /^@vue-mf\/.+/] 5 | }, 6 | filenameHashing: false 7 | }; 8 | --------------------------------------------------------------------------------