add sample project code

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+dist
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store

+

+{
+  "extends": [
+    "react-important-stuff",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "babel-eslint"
+}

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+dist
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store

+.gitignore
+.prettierignore
+yarn.lock
+yarn-error.log
+package-lock.json
+dist
\ No newline at end of file

+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "useESModules": true,
+        "regenerator": false
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": "current node"
+          }
+        ]
+      ]
+    }
+  }
+}

+module.exports = {
+  rootDir: "src",
+  transform: {
+    "^.+\\.(j|t)sx?$": "babel-jest",
+  },
+  moduleNameMapper: {
+    "\\.(css)$": "identity-obj-proxy",
+  },
+  setupFilesAfterEnv: [
+    "../node_modules/@testing-library/jest-dom/dist/index.js",
+  ],
+};

+{
+  "name": "@capstone-design/comment",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "webpack --mode=production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext js",
+    "format": "prettier --write \"./**\"",
+    "test": "cross-env BABEL_ENV=test jest",
+    "watch-tests": "cross-env BABEL_ENV=test jest --watch",
+    "coverage": "cross-env BABEL_ENV=test jest --coverage"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.5",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.7.6",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/runtime": "^7.8.7",
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^9.4.0",
+    "@types/jest": "^25.2.1",
+    "@types/systemjs": "^6.1.0",
+    "babel-eslint": "^11.0.0-beta.2",
+    "babel-jest": "^24.9.0",
+    "concurrently": "^5.0.1",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.7.2",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-react-important-stuff": "^2.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "husky": "^3.1.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^25.2.7",
+    "jest-cli": "^25.2.7",
+    "prettier": "^2.0.4",
+    "pretty-quick": "^2.0.1",
+    "single-spa-react": "^2.14.0",
+    "systemjs-webpack-interop": "^2.1.2",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-config-single-spa-react": "^1.0.3",
+    "webpack-dev-server": "^3.9.0",
+    "webpack-merge": "^4.2.2"
+  },
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  }
+}

+import "./set-public-path";
+import React from "react";
+import ReactDOM from "react-dom";
+import singleSpaReact from "single-spa-react";
+import Root from "./root.component";
+
+const lifecycles = singleSpaReact({
+  React,
+  ReactDOM,
+  rootComponent: Root,
+  errorBoundary(err, info, props) {
+    // Customize the root error boundary for your microfrontend here.
+    return null;
+  },
+});
+
+export const { bootstrap, mount, unmount } = lifecycles;

+import React from "react";
+
+export default function Root(props) {
+  return <div>댓글 컴포넌트</div>;
+}

+import { setPublicPath } from "systemjs-webpack-interop";
+
+setPublicPath("@capstone-design/comment");

+const webpackMerge = require("webpack-merge");
+const singleSpaDefaults = require("webpack-config-single-spa-react");
+
+module.exports = (webpackConfigEnv) => {
+  const defaultConfig = singleSpaDefaults({
+    orgName: "capstone-design",
+    projectName: "comment",
+    webpackConfigEnv,
+  });
+
+  return webpackMerge.smart(defaultConfig, {
+    // modify the webpack config however you'd like to by adding to this object
+  });
+};

+{
+  "extends": [
+    "react-important-stuff",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "babel-eslint"
+}

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+dist
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store

+.gitignore
+.prettierignore
+yarn.lock
+yarn-error.log
+package-lock.json
+dist
\ No newline at end of file

+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "useESModules": true,
+        "regenerator": false
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        ["@babel/preset-env", {
+          "targets": "current node"
+        }]
+      ]
+    }
+  }
+}

+module.exports = {
+  rootDir: "src",
+  transform: {
+    "^.+\\.(j|t)sx?$": "babel-jest",
+  },
+  moduleNameMapper: {
+    "\\.(css)$": "identity-obj-proxy",
+  },
+  setupFilesAfterEnv: [
+    "../node_modules/@testing-library/jest-dom/dist/index.js",
+  ],
+};

+{
+  "name": "@capstone-design/navbar",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "webpack --mode=production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext js",
+    "format": "prettier --write \"./**\"",
+    "test": "cross-env BABEL_ENV=test jest",
+    "watch-tests": "cross-env BABEL_ENV=test jest --watch",
+    "coverage": "cross-env BABEL_ENV=test jest --coverage"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.5",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.7.6",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/runtime": "^7.8.7",
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^9.4.0",
+    "@types/jest": "^25.2.1",
+    "@types/systemjs": "^6.1.0",
+    "babel-eslint": "^11.0.0-beta.2",
+    "babel-jest": "^24.9.0",
+    "concurrently": "^5.0.1",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.7.2",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-react-important-stuff": "^2.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "husky": "^3.1.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^25.2.7",
+    "jest-cli": "^25.2.7",
+    "prettier": "^2.0.4",
+    "pretty-quick": "^2.0.1",
+    "single-spa-react": "^2.14.0",
+    "systemjs-webpack-interop": "^2.1.2",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-config-single-spa-react": "^1.0.3",
+    "webpack-dev-server": "^3.9.0",
+    "webpack-merge": "^4.2.2"
+  },
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  }
+}

+import "./set-public-path";
+import React from "react";
+import ReactDOM from "react-dom";
+import singleSpaReact from "single-spa-react";
+import Root from "./root.component";
+
+const lifecycles = singleSpaReact({
+  React,
+  ReactDOM,
+  rootComponent: Root,
+  errorBoundary(err, info, props) {
+    // Customize the root error boundary for your microfrontend here.
+    return null;
+  },
+});
+
+export const { bootstrap, mount, unmount } = lifecycles;

+import React from "react";
+
+export default function Root(props) {
+  return <div>상단 네비게이션 바 컴포넌트</div>;
+}

+import { setPublicPath } from "systemjs-webpack-interop";
+
+setPublicPath("@capstone-design/navbar");

+const webpackMerge = require("webpack-merge");
+const singleSpaDefaults = require("webpack-config-single-spa-react");
+
+module.exports = (webpackConfigEnv) => {
+  const defaultConfig = singleSpaDefaults({
+    orgName: "capstone-design",
+    projectName: "navbar",
+    webpackConfigEnv,
+  });
+
+  return webpackMerge.smart(defaultConfig, {
+    // modify the webpack config however you'd like to by adding to this object
+  });
+};

+{
+  "extends": [
+    "react-important-stuff",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "babel-eslint"
+}

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+dist
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store

+.gitignore
+.prettierignore
+yarn.lock
+yarn-error.log
+package-lock.json
+dist
\ No newline at end of file

+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "useESModules": true,
+        "regenerator": false
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        ["@babel/preset-env", {
+          "targets": "current node"
+        }]
+      ]
+    }
+  }
+}

+module.exports = {
+  rootDir: "src",
+  transform: {
+    "^.+\\.(j|t)sx?$": "babel-jest",
+  },
+  moduleNameMapper: {
+    "\\.(css)$": "identity-obj-proxy",
+  },
+  setupFilesAfterEnv: [
+    "../node_modules/@testing-library/jest-dom/dist/index.js",
+  ],
+};

+{
+  "name": "@capstone-design/news",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "webpack --mode=production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext js",
+    "format": "prettier --write \"./**\"",
+    "test": "cross-env BABEL_ENV=test jest",
+    "watch-tests": "cross-env BABEL_ENV=test jest --watch",
+    "coverage": "cross-env BABEL_ENV=test jest --coverage"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.5",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.7.6",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/runtime": "^7.8.7",
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^9.4.0",
+    "@types/jest": "^25.2.1",
+    "@types/systemjs": "^6.1.0",
+    "babel-eslint": "^11.0.0-beta.2",
+    "babel-jest": "^24.9.0",
+    "concurrently": "^5.0.1",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.7.2",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-react-important-stuff": "^2.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "husky": "^3.1.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^25.2.7",
+    "jest-cli": "^25.2.7",
+    "prettier": "^2.0.4",
+    "pretty-quick": "^2.0.1",
+    "single-spa-react": "^2.14.0",
+    "systemjs-webpack-interop": "^2.1.2",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-config-single-spa-react": "^1.0.3",
+    "webpack-dev-server": "^3.9.0",
+    "webpack-merge": "^4.2.2"
+  },
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  }
+}

+import "./set-public-path";
+import React from "react";
+import ReactDOM from "react-dom";
+import singleSpaReact from "single-spa-react";
+import Root from "./root.component";
+
+const lifecycles = singleSpaReact({
+  React,
+  ReactDOM,
+  rootComponent: Root,
+  errorBoundary(err, info, props) {
+    // Customize the root error boundary for your microfrontend here.
+    return null;
+  },
+});
+
+export const { bootstrap, mount, unmount } = lifecycles;

+import React from "react";
+
+export default function Root(props) {
+  return <div>뉴스 본문 컴포넌트</div>;
+}

+import { setPublicPath } from "systemjs-webpack-interop";
+
+setPublicPath("@capstone-design/news");

+const webpackMerge = require("webpack-merge");
+const singleSpaDefaults = require("webpack-config-single-spa-react");
+
+module.exports = (webpackConfigEnv) => {
+  const defaultConfig = singleSpaDefaults({
+    orgName: "capstone-design",
+    projectName: "news",
+    webpackConfigEnv,
+  });
+
+  return webpackMerge.smart(defaultConfig, {
+    // modify the webpack config however you'd like to by adding to this object
+  });
+};

+{
+  "extends": [
+    "react-important-stuff",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "babel-eslint"
+}

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+dist
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store

+.gitignore
+.prettierignore
+yarn.lock
+yarn-error.log
+package-lock.json
+dist
\ No newline at end of file

+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "useESModules": true,
+        "regenerator": false
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        ["@babel/preset-env", {
+          "targets": "current node"
+        }]
+      ]
+    }
+  }
+}

+module.exports = {
+  rootDir: "src",
+  transform: {
+    "^.+\\.(j|t)sx?$": "babel-jest",
+  },
+  moduleNameMapper: {
+    "\\.(css)$": "identity-obj-proxy",
+  },
+  setupFilesAfterEnv: [
+    "../node_modules/@testing-library/jest-dom/dist/index.js",
+  ],
+};

+{
+  "name": "@capstone-design/recommend",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "webpack --mode=production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext js",
+    "format": "prettier --write \"./**\"",
+    "test": "cross-env BABEL_ENV=test jest",
+    "watch-tests": "cross-env BABEL_ENV=test jest --watch",
+    "coverage": "cross-env BABEL_ENV=test jest --coverage"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.5",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.7.6",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/runtime": "^7.8.7",
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^9.4.0",
+    "@types/jest": "^25.2.1",
+    "@types/systemjs": "^6.1.0",
+    "babel-eslint": "^11.0.0-beta.2",
+    "babel-jest": "^24.9.0",
+    "concurrently": "^5.0.1",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.7.2",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-react-important-stuff": "^2.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "husky": "^3.1.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^25.2.7",
+    "jest-cli": "^25.2.7",
+    "prettier": "^2.0.4",
+    "pretty-quick": "^2.0.1",
+    "single-spa-react": "^2.14.0",
+    "systemjs-webpack-interop": "^2.1.2",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-config-single-spa-react": "^1.0.3",
+    "webpack-dev-server": "^3.9.0",
+    "webpack-merge": "^4.2.2"
+  },
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  }
+}

+import "./set-public-path";
+import React from "react";
+import ReactDOM from "react-dom";
+import singleSpaReact from "single-spa-react";
+import Root from "./root.component";
+
+const lifecycles = singleSpaReact({
+  React,
+  ReactDOM,
+  rootComponent: Root,
+  errorBoundary(err, info, props) {
+    // Customize the root error boundary for your microfrontend here.
+    return null;
+  },
+});
+
+export const { bootstrap, mount, unmount } = lifecycles;

+import React from "react";
+
+export default function Root(props) {
+  return <div>뉴스 추천 컴포넌트</div>;
+}

+import { setPublicPath } from "systemjs-webpack-interop";
+
+setPublicPath("@capstone-design/recommend");

+const webpackMerge = require("webpack-merge");
+const singleSpaDefaults = require("webpack-config-single-spa-react");
+
+module.exports = (webpackConfigEnv) => {
+  const defaultConfig = singleSpaDefaults({
+    orgName: "capstone-design",
+    projectName: "recommend",
+    webpackConfigEnv,
+  });
+
+  return webpackMerge.smart(defaultConfig, {
+    // modify the webpack config however you'd like to by adding to this object
+  });
+};

+{
+  "extends": ["important-stuff", "plugin:prettier/recommended"],
+  "parser": "babel-eslint"
+}

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+dist
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store

+.gitignore
+.prettierignore
+yarn.lock
+yarn-error.log
+package-lock.json
+LICENSE
+*.ejs
+dist
\ No newline at end of file

+{
+  "presets": [
+    "@babel/preset-env",
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "useESModules": true,
+        "regenerator": false
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        ["@babel/preset-env", {
+          "targets": "current node"
+        }]
+      ]
+    }
+  }
+}

+{
+  "name": "@capstone-design/root",
+  "scripts": {
+    "start": "webpack-dev-server --mode=development --port 9000 --env.isLocal=true",
+    "lint": "eslint src --ext js",
+    "test": "cross-env BABEL_ENV=test jest --passWithNoTests",
+    "format": "prettier --write \"./**\"",
+    "build": "webpack --mode=production"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.7.4",
+    "@babel/runtime": "^7.8.7",
+    "@types/jest": "^25.2.1",
+    "@types/systemjs": "^6.1.0",
+    "babel-eslint": "^11.0.0-beta.2",
+    "concurrently": "^5.1.0",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.7.2",
+    "eslint-config-important-stuff": "^1.1.0",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "html-webpack-plugin": "^4.0.4",
+    "husky": "^4.2.3",
+    "jest": "^25.2.7",
+    "jest-cli": "^25.2.7",
+    "prettier": "^2.0.4",
+    "pretty-quick": "^2.0.1",
+    "serve": "^11.2.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-config-single-spa": "^1.4.1",
+    "webpack-dev-server": "^3.9.0",
+    "webpack-merge": "^4.2.2"
+  },
+  "dependencies": {
+    "single-spa": "^5.3.1"
+  }
+}

+import { registerApplication, start } from "single-spa";
+
+registerApplication({
+  name: "@capstone-design/navbar",
+  app: () => System.import("@capstone-design/navbar"),
+  activeWhen: ["/"],
+});
+
+registerApplication({
+  name: "@capstone-design/news",
+  app: () => System.import("@capstone-design/news"),
+  activeWhen: [(location) => location.pathname === "/"],
+});
+
+registerApplication({
+  name: "@capstone-design/comment",
+  app: () => System.import("@capstone-design/comment"),
+  activeWhen: ["/"],
+});
+
+registerApplication({
+  name: "@capstone-design/recommend",
+  app: () => System.import("@capstone-design/recommend"),
+  activeWhen: ["/"],
+});
+
+start({
+  urlRerouteOnly: true,
+});

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Capstone Design</title>
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https: localhost:*; script-src 'unsafe-inline' https: localhost:*; connect-src https: localhost:* ws://localhost:*; style-src 'unsafe-inline' https:; object-src 'none';">
+  <meta name="importmap-type" content="systemjs-importmap" />
+  <script type="systemjs-importmap">
+    {
+      "imports": {
+        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.5.5/lib/system/single-spa.min.js"
+      }
+    }
+  </script>
+  <% if (isLocal) { %>
+    <script type="systemjs-importmap">
+      {
+        "imports": {
+          "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.development.js",
+          "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.development.js",
+          "@capstone-design/root": "http://localhost:9000/capstone-design-root.js",
+          "@capstone-design/navbar": "http://localhost:9001/capstone-design-navbar.js",
+          "@capstone-design/news": "http://localhost:9002/capstone-design-news.js",
+          "@capstone-design/comment": "http://localhost:9003/capstone-design-comment.js",
+          "@capstone-design/recommend": "http://localhost:9004/capstone-design-recommend.js"
+        }
+      }
+    </script>
+  <% } %>  
+  <link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@5.5.5/lib/system/single-spa.min.js" as="script">
+
+  <% if (isLocal) { %>
+  <script type="systemjs-importmap">
+    {
+      "imports": {
+        "@capstone-design/root": "//localhost:9000/capstone-design-root.js"
+      }
+    }
+  </script>
+  <% } %>
+
+  <% if (isLocal) { %>
+  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@1.16.0/dist/import-map-overrides.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/system.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/amd.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/named-exports.js"></script>
+  <% } else { %>
+  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@1.16.0/dist/import-map-overrides.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/system.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/amd.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.0/dist/extras/named-exports.min.js"></script>
+  <% } %>
+</head>
+<body>
+    <div id="single-spa-application:@capstone-design/navbar"></div>
+    <div class="home" id="single-spa-application:@capstone-design/news"></div>
+    <div class="comment" id="single-spa-application:@capstone-design/comment"></div>
+    <div class="contact" id="single-spa-application:@capstone-design/recommend"></div>
+
+  <script>
+    System.import('@capstone-design/root');
+  </script>
+  <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
+</body>
+</html>

+const webpackMerge = require("webpack-merge");
+const singleSpaDefaults = require("webpack-config-single-spa");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = (webpackConfigEnv) => {
+  const orgName = "capstone-design";
+  const defaultConfig = singleSpaDefaults({
+    orgName,
+    projectName: "root",
+    webpackConfigEnv,
+  });
+
+  return webpackMerge.smart(defaultConfig, {
+    // modify the webpack config however you'd like to by adding to this object
+    devServer: {
+      historyApiFallback: true,
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        inject: false,
+        template: "src/index.ejs",
+        templateParameters: {
+          isLocal: webpackConfigEnv && webpackConfigEnv.isLocal === "true",
+          orgName,
+        },
+      }),
+    ],
+  });
+};