5 |
6 |
15 |
16 | {{ title }} app is running!
17 |
18 |
19 |
20 | 30 | `mod-vue` is listening on port 8001.
31 | `mod-react` is listening on port 8002.
32 | `mod-angular` is listening on port 8003.
33 | `mod-svelte` is listening on port 8004. 34 | 35 | ## Directory Structure 36 | 37 | ```sh 38 | # core 39 | app-shell 40 | 41 | # shared 42 | app-components 43 | 44 | # modules 45 | mod-vue 46 | mod-react 47 | mod-angular 48 | mod-svelte 49 | ``` 50 | 51 | ## Application Testing 52 | 53 | jest 54 | 55 | ```sh 56 | $ yarn test 57 | ``` 58 | 59 | ## Previewing Locally 60 | 61 | caddy 62 | 63 | ```sh 64 | # /Micro-Fullstack/client 65 | $ yarn build 66 | $ caddy run 67 | ``` 68 | 69 | Visit [https://localhost:8000](https://localhost:8000). 70 | 71 | ## Application Containerization 72 | 73 | docker 74 | 75 | TODO: Push images to Docker Hub 76 | 77 | ```sh 78 | $ docker login 79 | ``` 80 | 81 | ```sh 82 | $ yarn build 83 | $ docker-compose build 84 | $ docker-compose push 85 | ``` 86 | 87 | ## Production Ready 88 | 89 | knative 90 | 91 | TODO: Pull images from Docker Hub 92 | 93 | ```sh 94 | $ minikube start 95 | $ 96 | ``` 97 | 98 | ## Domain name 99 | 100 | For example: 101 | 102 | - `example.com` (`app-shell`, `setDefaultMountApp('/app')`) 103 | - `example.com/app` (`mod-vue`, App) 104 | - `example.com/auth` (`mod-react`, Auth) 105 | - `example.com/account` (`mod-angular`, Account) 106 | - `example.com/product` (`mod-svelte`, Product) 107 | - `app.example.com` (`mod-vue`, App) 108 | - `auth.example.com` (`mod-react`, Auth) 109 | - `account.example.com` (`mod-angular`, Account) 110 | - `product.example.com` (`mod-svelte`, Product) 111 | - (`app-components`, Common) 112 | 113 | TODO: Without `setDefaultMountApp('/app')`: 114 | 115 | - `example.com` (`app-shell`, Render in Vue) 116 | - `example.com/auth` (`mod-vue`, Auth) 117 | - `example.com/account` (`mod-react`, Account) 118 | - `example.com/product` (`mod-angular`, Product) 119 | - `example.com/payment` (`mod-svelte`, Payment) 120 | - `auth.example.com` (`mod-vue`, Auth) 121 | - `account.example.com` (`mod-react`, Account) 122 | - `product.example.com` (`mod-angular`, Product) 123 | - `payment.example.com` (`mod-svelte`, Payment) 124 | - (`app-components`, Common) 125 | -------------------------------------------------------------------------------- /mfe/app-components/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["svelte3"], 3 | "overrides": [ 4 | { 5 | "files": ["*.svelte"], 6 | "processor": "svelte3/svelte3" 7 | } 8 | ], 9 | "env": { 10 | "browser": true, 11 | "node": true, 12 | "commonjs": true, 13 | "es6": true, 14 | "jest": true 15 | }, 16 | "globals": {}, 17 | "extends": ["eslint:recommended"], 18 | "parser": "babel-eslint", 19 | "parserOptions": { 20 | "ecmaVersion": 2019, 21 | "sourceType": "module" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /mfe/app-components/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /mfe/app-components/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "singleQuote": true, 4 | "trailingComma": "all" 5 | } 6 | -------------------------------------------------------------------------------- /mfe/app-components/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:14-alpine 2 | -------------------------------------------------------------------------------- /mfe/app-components/README.md: -------------------------------------------------------------------------------- 1 | # App Components 2 | -------------------------------------------------------------------------------- /mfe/app-components/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = (api) => { 2 | api.cache(true); 3 | 4 | return { 5 | presets: [ 6 | [ 7 | '@babel/preset-env' 8 | ], 9 | ], 10 | plugins: [ 11 | '@babel/plugin-transform-runtime', 12 | '@babel/plugin-syntax-optional-chaining' 13 | ], 14 | }; 15 | }; 16 | -------------------------------------------------------------------------------- /mfe/app-components/docker-compose.yml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shyam-Chen/Micro-Fullstack/72ff7b703784cf8f7ac9edcdb44e532bbecbeca8/mfe/app-components/docker-compose.yml -------------------------------------------------------------------------------- /mfe/app-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app-components", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "serve": "rollup -c -w", 6 | "build": "rollup -c", 7 | "lint": "eslint 'src/**/*.{js,svelte}'", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "license": "MIT", 11 | "dependencies": { 12 | "@babel/runtime": "^7.9.6" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.9.6", 16 | "@babel/plugin-syntax-optional-chaining": "^7.8.3", 17 | "@babel/plugin-transform-runtime": "^7.9.6", 18 | "@babel/preset-env": "^7.9.6", 19 | "@rollup/plugin-babel": "^5.0.2", 20 | "@rollup/plugin-commonjs": "^12.0.0", 21 | "@rollup/plugin-node-resolve": "^8.0.0", 22 | "babel-eslint": "^10.1.0", 23 | "eslint": "^7.7.0", 24 | "eslint-plugin-svelte3": "^2.7.3", 25 | "rollup": "^2.3.4", 26 | "rollup-plugin-eslint": "^7.0.0", 27 | "rollup-plugin-svelte": "^5.0.3", 28 | "rollup-plugin-terser": "^5.1.2", 29 | "svelte": "^3.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /mfe/app-components/rollup.config.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import { eslint } from 'rollup-plugin-eslint'; 3 | import svelte from 'rollup-plugin-svelte'; 4 | import { getBabelOutputPlugin } from '@rollup/plugin-babel'; 5 | import resolve from '@rollup/plugin-node-resolve'; 6 | import commonjs from '@rollup/plugin-commonjs'; 7 | import { terser } from 'rollup-plugin-terser'; 8 | 9 | const production = !process.env.ROLLUP_WATCH; 10 | 11 | const cpnConfig = (file) => ({ 12 | input: path.join(__dirname, 'src', file), 13 | output: { 14 | file: path.join(__dirname, 'dist', file.substring(file.lastIndexOf('.'), 0) + '.js'), 15 | format: 'esm', 16 | sourcemap: true, 17 | }, 18 | plugins: [ 19 | eslint(), 20 | svelte({ 21 | customElement: true, 22 | tag: null, 23 | dev: !production, 24 | }), 25 | getBabelOutputPlugin({ 26 | configFile: path.resolve(__dirname, 'babel.config.js'), 27 | }), 28 | resolve({ 29 | browser: true, 30 | dedupe: ['svelte'], 31 | }), 32 | commonjs(), 33 | production && terser(), 34 | ], 35 | watch: { 36 | clearScreen: false, 37 | }, 38 | }); 39 | 40 | export default [ 41 | { ...cpnConfig('./header/Header.svelte') }, 42 | { ...cpnConfig('./footer/Footer.svelte') }, 43 | // { ...cpnConfig('
{title}
28 |
29 |
--------------------------------------------------------------------------------
/mfe/app-components/src/header/Header.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
19 |
20 | {title}
21 |
22 |
--------------------------------------------------------------------------------
/mfe/app-shell/.env:
--------------------------------------------------------------------------------
1 | APP_NAME="Micro Fullstack"
2 |
3 | ENTRY_VUE="//localhost:8001"
4 | ENTRY_REACT="//localhost:8002"
5 | ENTRY_ANGULAR="//localhost:8003"
6 | ENTRY_SVELTE="//localhost:8004"
7 |
--------------------------------------------------------------------------------
/mfe/app-shell/Caddyfile:
--------------------------------------------------------------------------------
1 | localhost:8000 {
2 | encode gzip
3 | root * ./dist
4 | try_files {path} /index.html
5 | file_server browse
6 |
7 | header {
8 | Strict-Transport-Security max-age=31536000
9 | X-Content-Type-Options nosniff
10 | X-Frame-Options DENY
11 | Referrer-Policy no-referrer-when-downgrade
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/mfe/app-shell/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM caddy:2-alpine
2 |
3 | COPY Caddyfile /etc/caddy/Caddyfile
4 | COPY /dist /usr/share/caddy/dist
5 |
--------------------------------------------------------------------------------
/mfe/app-shell/README.md:
--------------------------------------------------------------------------------
1 | # App Shell
2 |
3 | ## Usage
4 |
5 | ```sh
6 | $ yarn install
7 | ```
8 |
9 | ```sh
10 | $ yarn serve
11 | ```
12 |
13 | ```sh
14 | $ yarn build
15 | ```
16 |
17 | ## Environments
18 |
19 | `.env`
20 |
--------------------------------------------------------------------------------
/mfe/app-shell/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3'
2 |
3 | services:
4 |
5 | caddy:
6 | image: caddy
7 | ports:
8 | - "80:8000"
9 | - "443:443"
10 |
--------------------------------------------------------------------------------
/mfe/app-shell/index.js:
--------------------------------------------------------------------------------
1 | import 'zone.js';
2 | import { registerMicroApps, setDefaultMountApp, start } from 'qiankun';
3 |
4 | registerMicroApps([
5 | {
6 | name: 'mod-vue',
7 | entry: process.env.ENTRY_VUE,
8 | container: '#app-root',
9 | activeRule: '/vue',
10 | },
11 | {
12 | name: 'mod-react',
13 | entry: process.env.ENTRY_REACT,
14 | container: '#app-root',
15 | activeRule: '/react',
16 | },
17 | {
18 | name: 'mod-angular',
19 | entry: process.env.ENTRY_ANGULAR,
20 | container: '#app-root',
21 | activeRule: '/angular',
22 | },
23 | {
24 | name: 'mod-svelte',
25 | entry: process.env.ENTRY_SVELTE,
26 | container: '#app-root',
27 | activeRule: '/svelte',
28 | },
29 | ]);
30 |
31 | setDefaultMountApp('/vue');
32 |
33 | start();
34 |
--------------------------------------------------------------------------------
/mfe/app-shell/index.pug:
--------------------------------------------------------------------------------
1 | doctype html
2 | html(lang='en')
3 | head
4 | meta(charset='UTF-8')
5 | meta(name='viewport', content='width=device-width, initial-scale=1.0')
6 | title= process.env.APP_NAME
7 |
8 | body
9 | #app-root
10 | script(src='./index.js')
11 |
--------------------------------------------------------------------------------
/mfe/app-shell/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "app-shell",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "serve": "parcel index.pug --port 8000",
6 | "build": "parcel build index.pug"
7 | },
8 | "license": "MIT",
9 | "dependencies": {
10 | "qiankun": "^2.0.16",
11 | "zone.js": "^0.10.3"
12 | },
13 | "devDependencies": {
14 | "parcel-bundler": "^1.12.4",
15 | "pug": "^3.0.0"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/mfe/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3.8'
2 |
3 | services:
4 | shell:
5 | image:
2 |
3 |
4 |
25 |
26 |
27 |
28 |
32 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/mfe/mod-react/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(React Demo
8 |9 | React version: {reactVersion}, AntD version: {antdVersion} 10 |
11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /mfe/mod-react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import singleSpaReact from 'single-spa-react'; 4 | 5 | import App from './App'; 6 | import * as serviceWorker from './serviceWorker'; 7 | 8 | if (window.__POWERED_BY_QIANKUN__) { 9 | // eslint-disable-next-line no-undef 10 | __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 11 | } 12 | 13 | if (!window.__POWERED_BY_QIANKUN__) { 14 | ReactDOM.render(24 | About 25 |
26 |
23 | Home
24 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/mfe/mod-react/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
19 | );
20 |
21 | export function register(config) {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (isLocalhost) {
36 | // This is running on localhost. Let's check if a service worker still exists or not.
37 | checkValidServiceWorker(swUrl, config);
38 |
39 | // Add some additional logging to localhost, pointing developers to the
40 | // service worker/PWA documentation.
41 | navigator.serviceWorker.ready.then(() => {
42 | console.log(
43 | 'This web app is being served cache-first by a service ' +
44 | 'worker. To learn more, visit https://bit.ly/CRA-PWA',
45 | );
46 | });
47 | } else {
48 | // Is not localhost. Just register service worker
49 | registerValidSW(swUrl, config);
50 | }
51 | });
52 | }
53 | }
54 |
55 | function registerValidSW(swUrl, config) {
56 | navigator.serviceWorker
57 | .register(swUrl)
58 | .then(registration => {
59 | registration.onupdatefound = () => {
60 | const installingWorker = registration.installing;
61 | if (installingWorker == null) {
62 | return;
63 | }
64 | installingWorker.onstatechange = () => {
65 | if (installingWorker.state === 'installed') {
66 | if (navigator.serviceWorker.controller) {
67 | // At this point, the updated precached content has been fetched,
68 | // but the previous service worker will still serve the older
69 | // content until all client tabs are closed.
70 | console.log(
71 | 'New content is available and will be used when all ' +
72 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
73 | );
74 |
75 | // Execute callback
76 | if (config && config.onUpdate) {
77 | config.onUpdate(registration);
78 | }
79 | } else {
80 | // At this point, everything has been precached.
81 | // It's the perfect time to display a
82 | // "Content is cached for offline use." message.
83 | console.log('Content is cached for offline use.');
84 |
85 | // Execute callback
86 | if (config && config.onSuccess) {
87 | config.onSuccess(registration);
88 | }
89 | }
90 | }
91 | };
92 | };
93 | })
94 | .catch(error => {
95 | console.error('Error during service worker registration:', error);
96 | });
97 | }
98 |
99 | function checkValidServiceWorker(swUrl, config) {
100 | // Check if the service worker can be found. If it can't reload the page.
101 | fetch(swUrl)
102 | .then(response => {
103 | // Ensure service worker exists, and that we really are getting a JS file.
104 | const contentType = response.headers.get('content-type');
105 | if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
106 | // No service worker found. Probably a different app. Reload the page.
107 | navigator.serviceWorker.ready.then(registration => {
108 | registration.unregister().then(() => {
109 | window.location.reload();
110 | });
111 | });
112 | } else {
113 | // Service worker found. Proceed as normal.
114 | registerValidSW(swUrl, config);
115 | }
116 | })
117 | .catch(() => {
118 | console.log('No internet connection found. App is running in offline mode.');
119 | });
120 | }
121 |
122 | export function unregister() {
123 | if ('serviceWorker' in navigator) {
124 | navigator.serviceWorker.ready.then(registration => {
125 | registration.unregister();
126 | });
127 | }
128 | }
129 |
--------------------------------------------------------------------------------
/mfe/mod-svelte/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM caddy:2-alpine
2 |
3 | COPY Caddyfile /etc/caddy/Caddyfile
4 | COPY /dist /usr/share/caddy/dist
5 |
--------------------------------------------------------------------------------
/mfe/mod-svelte/README.md:
--------------------------------------------------------------------------------
1 | # Mod Svelte
2 |
--------------------------------------------------------------------------------
/mfe/mod-svelte/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = (api) => {
2 | api.cache(true);
3 |
4 | return {
5 | presets: [
6 | [
7 | '@babel/preset-env',
8 | {
9 | useBuiltIns: 'entry',
10 | corejs: '3',
11 | shippedProposals: true,
12 | targets: 'defaults',
13 | },
14 | ],
15 | ],
16 | plugins: ['@babel/plugin-transform-runtime'],
17 | };
18 | };
19 |
--------------------------------------------------------------------------------
/mfe/mod-svelte/env.js:
--------------------------------------------------------------------------------
1 | function Environments() {
2 | this.NODE_ENV = process.env.NODE_ENV || 'development';
3 |
4 | this.APP_NAME = process.env.APP_NAME || 'Mod Svelte';
5 | this.APP_DESCRIPTION = process.env.APP_DESCRIPTION || '';
6 |
7 | this.HOST_NAME = process.env.HOST_NAME || '0.0.0.0';
8 | this.SITE_PORT = process.env.SITE_PORT || 8004;
9 | this.SITE_URL = process.env.SITE_URL || `http://${this.HOST_NAME}:${this.SITE_PORT}`;
10 | this.APP_BASE = process.env.APP_BASE || '/';
11 | }
12 |
13 | module.exports = new Environments();
14 |
--------------------------------------------------------------------------------
/mfe/mod-svelte/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mod-svelte",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "scripts": {
6 | "serve": "webpack-dev-server",
7 | "build": "webpack --env.prod",
8 | "lint": "echo \"Error: no lint specified\" && exit 1",
9 | "test": "echo \"Error: no test specified\" && exit 1"
10 | },
11 | "license": "MIT",
12 | "dependencies": {
13 | "@babel/runtime": "^7.10.5",
14 | "core-js": "^3.6.5",
15 | "single-spa-svelte": "^2.0.0",
16 | "svelte": "^3.24.0",
17 | "svelte-routing": "^1.4.2"
18 | },
19 | "devDependencies": {
20 | "@babel/core": "^7.10.5",
21 | "@babel/plugin-transform-runtime": "^7.10.5",
22 | "@babel/preset-env": "^7.10.4",
23 | "babel-loader": "^8.1.0",
24 | "cache-loader": "^4.1.0",
25 | "copy-webpack-plugin": "^6.0.3",
26 | "css-loader": "^4.0.0",
27 | "file-loader": "^6.0.0",
28 | "html-webpack-plugin": "^4.3.0",
29 | "postcss-loader": "^3.0.0",
30 | "process-envify": "^0.1.3",
31 | "script-ext-html-webpack-plugin": "^2.1.4",
32 | "style-loader": "^1.2.1",
33 | "svelte-loader": "^2.13.6",
34 | "url-loader": "^4.1.0",
35 | "webpack": "^4.44.0",
36 | "webpack-cli": "^3.3.12",
37 | "webpack-dev-server": "^3.11.0"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/mfe/mod-svelte/src/App.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 | About Page
2 | -------------------------------------------------------------------------------- /mfe/mod-svelte/src/landings/Home.svelte: -------------------------------------------------------------------------------- 1 |Home Page
2 | -------------------------------------------------------------------------------- /mfe/mod-svelte/src/main.js: -------------------------------------------------------------------------------- 1 | import singleSpaSvelte from 'single-spa-svelte'; 2 | 3 | import App from './App'; 4 | 5 | if (window.__POWERED_BY_QIANKUN__) { 6 | __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 7 | } 8 | 9 | if (!window.__POWERED_BY_QIANKUN__) { 10 | new App({ target: document.querySelector('#app-root') }); 11 | } 12 | 13 | const { bootstrap, mount, unmount } = singleSpaSvelte({ 14 | component: App, 15 | domElementGetter: () => document.querySelector('#app-root'), 16 | }); 17 | 18 | export { bootstrap, mount, unmount }; 19 | -------------------------------------------------------------------------------- /mfe/mod-svelte/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const HtmlPlugin = require('html-webpack-plugin'); 4 | const ScriptExtHtmlPlugin = require('script-ext-html-webpack-plugin'); 5 | const CopyPlugin = require('copy-webpack-plugin'); 6 | const envify = require('process-envify'); 7 | 8 | const env = require('./env'); 9 | const pkg = require('./package'); 10 | 11 | const SOURCE_ROOT = path.join(__dirname, 'src'); 12 | const DISTRIBUTION_ROOT = path.join(__dirname, 'dist'); 13 | 14 | module.exports = ({ prod = false } = {}) => ({ 15 | mode: prod ? 'production' : 'development', 16 | context: SOURCE_ROOT, 17 | entry: './main.js', 18 | output: { 19 | path: DISTRIBUTION_ROOT, 20 | filename: prod ? '[name].[hash].js' : '[name].js', 21 | chunkFilename: prod ? '[id].[chunkhash].js' : '[name].js', 22 | publicPath: '/', 23 | library: `${pkg.name}-[name]`, 24 | libraryTarget: 'umd', 25 | jsonpFunction: `webpackJsonp_${pkg.name}`, 26 | }, 27 | module: { 28 | rules: [ 29 | { 30 | test: /\.svelte$/, 31 | use: [{ loader: 'svelte-loader' }], 32 | }, 33 | { 34 | test: /\.m?jsx?$/, 35 | exclude: /node_modules/, 36 | use: [{ loader: 'cache-loader' }, { loader: 'babel-loader' }], 37 | }, 38 | // { 39 | // test: /\.css$/, 40 | // use: [ 41 | // 'style-loader', 42 | // { loader: 'css-loader', options: { importLoaders: 1 } }, 43 | // { loader: 'postcss-loader', options: { sourceMap: true } }, 44 | // ], 45 | // }, 46 | { 47 | test: /\.(png|jpe?g|gif|webp)(\?.*)?$/, 48 | use: [ 49 | { 50 | loader: 'url-loader', 51 | options: { 52 | limit: 4096, 53 | fallback: { 54 | loader: 'file-loader', 55 | options: { name: path.posix.join('assets', 'images/[name].[hash:8].[ext]') }, 56 | }, 57 | }, 58 | }, 59 | ], 60 | }, 61 | { 62 | test: /\.(svg)(\?.*)?$/, 63 | use: [ 64 | { 65 | loader: 'file-loader', 66 | options: { name: path.posix.join('assets', 'images/[name].[hash:8].[ext]') }, 67 | }, 68 | ], 69 | }, 70 | { 71 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 72 | use: [ 73 | { 74 | loader: 'url-loader', 75 | options: { 76 | limit: 4096, 77 | fallback: { 78 | loader: 'file-loader', 79 | options: { name: path.posix.join('assets', 'medias/[name].[hash:8].[ext]') }, 80 | }, 81 | }, 82 | }, 83 | ], 84 | }, 85 | { 86 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, 87 | use: [ 88 | { 89 | loader: 'url-loader', 90 | options: { 91 | limit: 4096, 92 | fallback: { 93 | loader: 'file-loader', 94 | options: { name: path.posix.join('assets', 'fonts/[name].[hash:8].[ext]') }, 95 | }, 96 | }, 97 | }, 98 | ], 99 | }, 100 | ].filter(Boolean), 101 | }, 102 | resolve: { 103 | extensions: ['.mjs', '.js', '.svelte'], 104 | mainFields: ['svelte', 'browser', 'module', 'main'], 105 | alias: { 106 | svelte: path.resolve('node_modules', 'svelte'), 107 | '~': SOURCE_ROOT, 108 | }, 109 | }, 110 | plugins: [ 111 | new webpack.DefinePlugin(envify(env)), 112 | new HtmlPlugin({ 113 | template: 'index.html', 114 | minify: prod && { 115 | removeComments: true, 116 | collapseWhitespace: true, 117 | removeAttributeQuotes: true, 118 | }, 119 | chunksSortMode: prod ? 'manual' : 'auto', 120 | }), 121 | new ScriptExtHtmlPlugin({ 122 | defaultAttribute: 'defer', 123 | preload: { 124 | test: /\.js$/, 125 | chunks: 'initial', 126 | }, 127 | prefetch: { 128 | test: /\.js$/, 129 | chunks: 'all', 130 | }, 131 | }), 132 | // new CopyPlugin([ 133 | // { 134 | // from: 'assets/**/*', 135 | // to: DISTRIBUTION_ROOT, 136 | // ignore: ['assets/styles/**/*'], 137 | // }, 138 | // ]), 139 | !prod && new webpack.HotModuleReplacementPlugin(), 140 | prod && new webpack.optimize.AggressiveSplittingPlugin(), 141 | ].filter(Boolean), 142 | optimization: { 143 | runtimeChunk: 'single', 144 | splitChunks: { 145 | chunks: 'all', 146 | maxInitialRequests: Infinity, 147 | minSize: 0, 148 | cacheGroups: { 149 | vendor: { 150 | test: /[\\/]node_modules[\\/]/, 151 | }, 152 | }, 153 | }, 154 | }, 155 | devServer: { 156 | headers: { 157 | 'Access-Control-Allow-Origin': '*', 158 | }, 159 | contentBase: DISTRIBUTION_ROOT, 160 | historyApiFallback: true, 161 | host: env.HOST_NAME, 162 | hot: true, 163 | inline: true, 164 | overlay: true, 165 | port: env.SITE_PORT, 166 | }, 167 | devtool: prod ? 'hidden-source-map' : 'cheap-module-eval-source-map', 168 | }); 169 | -------------------------------------------------------------------------------- /mfe/mod-vue/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /mfe/mod-vue/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [], 3 | "root": true, 4 | "env": { 5 | "node": true 6 | }, 7 | "globals": { 8 | "__webpack_public_path__": true 9 | }, 10 | "extends": [ 11 | "plugin:vue/essential", 12 | "eslint:recommended" 13 | ], 14 | "parserOptions": { 15 | "parser": "babel-eslint" 16 | }, 17 | "rules": {}, 18 | "overrides": [ 19 | { 20 | "files": [ 21 | "**/__tests__/*.{j,t}s?(x)", 22 | "**/tests/unit/**/*.spec.{j,t}s?(x)" 23 | ], 24 | "env": { 25 | "jest": true 26 | } 27 | } 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /mfe/mod-vue/.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 | -------------------------------------------------------------------------------- /mfe/mod-vue/Caddyfile: -------------------------------------------------------------------------------- 1 | :8001 { 2 | encode gzip 3 | root * /usr/share/caddy/dist 4 | try_files {path} /index.html 5 | file_server browse 6 | 7 | header { 8 | Access-Control-Allow-Origin http://localhost:8000 9 | Strict-Transport-Security max-age=31536000 10 | X-Content-Type-Options nosniff 11 | X-Frame-Options DENY 12 | Referrer-Policy no-referrer-when-downgrade 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /mfe/mod-vue/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM caddy:2-alpine 2 | 3 | COPY Caddyfile /etc/caddy/Caddyfile 4 | COPY /dist /usr/share/caddy/dist 5 | -------------------------------------------------------------------------------- /mfe/mod-vue/README.md: -------------------------------------------------------------------------------- 1 | # Mod Vue 2 | 3 | ## Usage 4 | 5 | ```sh 6 | $ yarn install 7 | ``` 8 | 9 | ```sh 10 | $ yarn serve 11 | ``` 12 | 13 | ```sh 14 | $ yarn build 15 | ``` 16 | 17 | ```sh 18 | $ yarn lint 19 | ``` 20 | 21 | ```sh 22 | $ yarn test 23 | ``` 24 | 25 | ## Dockerization 26 | 27 | ```sh 28 | $ yarn build 29 | $ docker-compose up 30 | ``` 31 | 32 | Visit [http://localhost:8001](http://localhost:8001). 33 | -------------------------------------------------------------------------------- /mfe/mod-vue/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/cli-plugin-babel/preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /mfe/mod-vue/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.8' 2 | 3 | services: 4 | serve: 5 | image: serve-mod-vue 6 | build: 7 | context: . 8 | dockerfile: Dockerfile 9 | ports: 10 | - '80:80' 11 | - '443:443' 12 | - '8001:8001' 13 | volumes: 14 | - caddy_data:/data 15 | - caddy_config:/config 16 | networks: 17 | - micro 18 | 19 | volumes: 20 | caddy_data: 21 | caddy_config: 22 | 23 | networks: 24 | micro: 25 | driver: bridge 26 | -------------------------------------------------------------------------------- /mfe/mod-vue/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: '@vue/cli-plugin-unit-jest', 3 | }; 4 | -------------------------------------------------------------------------------- /mfe/mod-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mod-vue", 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 | "test": "vue-cli-service test:unit" 10 | }, 11 | "dependencies": { 12 | "core-js": "^3.6.4", 13 | "single-spa-vue": "^1.8.2", 14 | "vue": "^2.6.11", 15 | "vue-router": "^3.1.6" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "~4.2.0", 19 | "@vue/cli-plugin-eslint": "~4.2.0", 20 | "@vue/cli-plugin-unit-jest": "~4.5.0", 21 | "@vue/cli-service": "~4.2.0", 22 | "@vue/test-utils": "^1.0.3", 23 | "babel-eslint": "^10.0.3", 24 | "eslint": "^6.7.2", 25 | "eslint-plugin-vue": "^6.1.2", 26 | "vue-template-compiler": "^2.6.11" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /mfe/mod-vue/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shyam-Chen/Micro-Fullstack/72ff7b703784cf8f7ac9edcdb44e532bbecbeca8/mfe/mod-vue/public/favicon.ico -------------------------------------------------------------------------------- /mfe/mod-vue/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
3 |
11 |
12 |
17 |
18 | 
21 |
23 |
24 |
25 |
40 |
41 |
46 |
--------------------------------------------------------------------------------
/mfe/mod-vue/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shyam-Chen/Micro-Fullstack/72ff7b703784cf8f7ac9edcdb44e532bbecbeca8/mfe/mod-vue/src/assets/logo.png
--------------------------------------------------------------------------------
/mfe/mod-vue/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 |
21 |
3 |
55 |
56 |
57 |
65 |
66 |
82 |
--------------------------------------------------------------------------------
/mfe/mod-vue/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import singleSpaVue from 'single-spa-vue';
3 |
4 | import App from './App.vue';
5 | import router from './router';
6 |
7 | if (window.__POWERED_BY_QIANKUN__) {
8 | __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
9 | }
10 |
11 | if (!window.__POWERED_BY_QIANKUN__) {
12 | new Vue({
13 | router,
14 | render: h => h(App),
15 | }).$mount('#app');
16 | }
17 |
18 | const { bootstrap, mount, unmount } = singleSpaVue({
19 | Vue,
20 | appOptions: {
21 | el: '#app',
22 | router,
23 | render: h => h(App),
24 | },
25 | });
26 |
27 | export { bootstrap, mount, unmount };
28 |
--------------------------------------------------------------------------------
/mfe/mod-vue/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import VueRouter from 'vue-router';
3 |
4 | import Home from '@/views/Home.vue';
5 | import NotFound from '@/views/NotFound.vue';
6 |
7 | Vue.use(VueRouter);
8 |
9 | const routes = [
10 | {
11 | path: '/',
12 | name: 'home',
13 | component: Home,
14 | },
15 | {
16 | path: '/about',
17 | name: 'about',
18 | // route level code-splitting
19 | // this generates a separate chunk (about.[hash].js) for this route
20 | // which is lazy-loaded when the route is visited.
21 | component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
22 | },
23 | { path: '*', component: NotFound },
24 | ];
25 |
26 | const router = new VueRouter({
27 | base: window.__POWERED_BY_QIANKUN__ ? '/vue' : '/',
28 | mode: 'history',
29 | routes,
30 | });
31 |
32 | export default router;
33 |
--------------------------------------------------------------------------------
/mfe/mod-vue/src/views/About.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
Installed CLI Plugins
10 |-
11 |
- 12 | 17 | babel 18 | 19 | 20 |
- 21 | 26 | eslint 27 | 28 | 29 |
Essential Links
31 |-
32 |
- Core Docs 33 |
- Forum 34 |
- Community Chat 35 |
- News 37 |
Ecosystem
39 |-
40 |
- vue-router 41 |
- vuex 42 |
- 43 | 44 | vue-devtools 45 | 46 | 47 |
- vue-loader 48 |
- 49 | 50 | awesome-vue 51 | 52 | 53 |
3 |
13 |
14 |
15 |
20 |
21 |
51 |
--------------------------------------------------------------------------------
/mfe/mod-vue/src/views/Home.vue:
--------------------------------------------------------------------------------
1 |
2 | This is an about page
4 | dynamic span color 5 | 6 |
3 |
4 |
5 |
6 |
7 |
12 |
--------------------------------------------------------------------------------
/mfe/mod-vue/src/views/NotFound.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
3 | 404
4 |
5 |
6 |
7 |
12 |
--------------------------------------------------------------------------------
/mfe/mod-vue/vue.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | const pkg = require('./package');
4 |
5 | module.exports = {
6 | configureWebpack: {
7 | output: {
8 | jsonpFunction: `webpackJsonp_${pkg.name}`,
9 | library: `${pkg.name}-[name]`,
10 | libraryTarget: 'umd',
11 | },
12 | resolve: {
13 | alias: {
14 | '@': path.join(__dirname, 'src'),
15 | '~': path.join(__dirname, '../app-components/dist'),
16 | },
17 | },
18 | },
19 | chainWebpack(config) {
20 | config.module.rules.delete('eslint');
21 | },
22 | devServer: {
23 | disableHostCheck: true,
24 | headers: {
25 | 'Access-Control-Allow-Origin': '*',
26 | },
27 | hot: true,
28 | overlay: {
29 | warnings: false,
30 | errors: true,
31 | },
32 | port: 8001,
33 | progress: false,
34 | },
35 | };
36 |
--------------------------------------------------------------------------------
/mfe/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mfe",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "bootstrap": "lerna bootstrap",
6 | "serve": "lerna run --parallel serve",
7 | "build": "lerna run --parallel build",
8 | "lint": "echo \"Error: no lint specified\" && exit 1",
9 | "test": "echo \"Error: no test specified\" && exit 1"
10 | },
11 | "license": "MIT",
12 | "devDependencies": {
13 | "lerna": "^3.22.1"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/servers/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shyam-Chen/Micro-Fullstack/72ff7b703784cf8f7ac9edcdb44e532bbecbeca8/servers/.gitkeep
--------------------------------------------------------------------------------