├── .env
├── src
    ├── react-app-env.d.ts
    ├── components
    │   ├── portfolio
    │   │   ├── grid.module.css
    │   │   ├── GridComponent.jsx
    │   │   └── index.jsx
    │   ├── about
    │   │   └── index.jsx
    │   ├── home
    │   │   └── index.jsx
    │   ├── WarningMessage
    │   │   ├── warningmessage.module.css
    │   │   └── index.jsx
    │   ├── NavBar
    │   │   ├── navbar.module.css
    │   │   └── index.jsx
    │   ├── Footer
    │   │   ├── footer.module.css
    │   │   └── index.jsx
    │   └── detail
    │   │   ├── masterdetail.module.css
    │   │   ├── MasterDetailSideBarTab.jsx
    │   │   ├── MasterDetailPage.jsx
    │   │   └── index.jsx
    ├── images
    │   ├── GreyBox.svg
    │   └── GreyAvatar.svg
    ├── App.test.js
    ├── constants.js
    ├── index.jsx
    ├── App.css
    ├── App.jsx
    └── registerServiceWorker.js
├── public
    ├── favicon.ico
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── .editorconfig
├── server
    ├── constants.js
    ├── package.json
    ├── routes
    │   └── index.js
    ├── app.js
    ├── server.js
    └── sampleData.js
├── .gitignore
├── tsconfig.json
├── package.json
└── README.md


/.env:
--------------------------------------------------------------------------------
1 | BROWSER=none
2 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plutonurmux/react_express_app/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow: /static/
4 | 


--------------------------------------------------------------------------------
/src/components/portfolio/grid.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 |   background-color: #cecece;
3 |   padding-top: 7rem;
4 |   padding-bottom: 7rem;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/components/about/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | export default function Blank() {
4 |   return <main id="mainContent" />;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/components/home/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | export default function Blank() {
4 |   return <main id="mainContent" />;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/components/WarningMessage/warningmessage.module.css:
--------------------------------------------------------------------------------
1 | .warningPosition {
2 |   position: fixed !important;
3 |   bottom: 0;
4 |   left: 0;
5 |   z-index: 1030;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/images/GreyBox.svg:
--------------------------------------------------------------------------------
1 | <svg width="98" height="77" viewBox="0 0 98 77" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <rect width="98" height="77" fill="#CECECE"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | end_of_line = crlf
 5 | charset = utf-8
 6 | indent_size = 2
 7 | indent_style = space
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/server/constants.js:
--------------------------------------------------------------------------------
 1 | const CONSTANTS = {};
 2 | CONSTANTS.ENDPOINT = {};
 3 | 
 4 | CONSTANTS.PORT = process.env.PORT || "3001";
 5 | CONSTANTS.ENDPOINT.MASTERDETAIL = "/masterdetail";
 6 | 
 7 | CONSTANTS.ENDPOINT.GRID = "/grid";
 8 | 
 9 | 
10 | module.exports = CONSTANTS;
11 | 


--------------------------------------------------------------------------------
/src/components/NavBar/navbar.module.css:
--------------------------------------------------------------------------------
 1 | .skipLink a {
 2 |   position: absolute;
 3 |   left: -100px;
 4 |   top: -100px;
 5 | }
 6 | 
 7 | .skipLink a:focus {
 8 |   position: fixed;
 9 |   z-index: 1000;
10 |   top: 0;
11 |   left: 0;
12 |   padding: 10px;
13 |   color: #ffffff;
14 |   background: #000000;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/Footer/footer.module.css:
--------------------------------------------------------------------------------
 1 | .footer {
 2 |   background-color: #1d1d1d;
 3 |   padding-top: 2rem;
 4 |   padding-bottom: 4rem;
 5 | }
 6 | 
 7 | .title {
 8 |   color: #fff;
 9 | }
10 | 
11 | .description {
12 |   color: #fff;
13 | }
14 | 
15 | .footerlink,
16 | .footerlink:hover {
17 |   color: #fff;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/images/GreyAvatar.svg:
--------------------------------------------------------------------------------
1 | <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="black" fill-opacity="0.26"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import {BrowserRouter} from 'react-router-dom'
 4 | 
 5 | import App from './App'
 6 | 
 7 | it('renders without crashing', () => {
 8 |   const div = document.createElement('div')
 9 | 
10 |   ReactDOM.render(
11 |     <BrowserRouter>
12 |       <App />
13 |     </BrowserRouter>,
14 |     div
15 |   )
16 | })
17 | 


--------------------------------------------------------------------------------
/src/components/portfolio/GridComponent.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function GridComponent(props) {
 4 |   const { image, header, description } = props;
 5 |   return (
 6 |     <div className="col-md-4 col-sm-12 p-5">
 7 |       <img src={image} alt="Default Grey Box" className="mb-3" />
 8 |       <h3>{header}</h3>
 9 |       <p>{description}</p>
10 |     </div>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /server/build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
 1 | const CONSTANTS = {}
 2 | 
 3 | CONSTANTS.ERROR_MESSAGE = {}
 4 | 
 5 | CONSTANTS.ERROR_MESSAGE.GRID_GET = 'Request to get grid text failed:'
 6 | 
 7 | CONSTANTS.ERROR_MESSAGE.MASTERDETAIL_GET = 'Request to get master detail text failed:'
 8 | 
 9 | CONSTANTS.ENDPOINT = {}
10 | 
11 | CONSTANTS.ENDPOINT.GRID = '/api/grid'
12 | 
13 | CONSTANTS.ENDPOINT.MASTERDETAIL = '/api/masterdetail'
14 | 
15 | export default CONSTANTS
16 | 


--------------------------------------------------------------------------------
/src/components/detail/masterdetail.module.css:
--------------------------------------------------------------------------------
 1 | .sidebar {
 2 |   /* full height - footer height - navbar height */
 3 |   min-height: calc(100vh - 160px - 57px);
 4 | }
 5 | .sidebarText {
 6 |   font-weight: 500;
 7 | }
 8 | 
 9 | .title {
10 |   font-weight: 700;
11 |   margin-bottom: 0;
12 | }
13 | 
14 | .breadCrumbLink {
15 |   color: #025fce;
16 | }
17 | 
18 | .heading {
19 |   background-color: #cecece;
20 |   padding-top: 18em;
21 | }
22 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "react-express-app",
 3 |   "name": "Awesome and super-simple app with React front-end and Express back-end.",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-express-app",
 3 |   "version": "0.0.0",
 4 |   "private": false,
 5 |   "license": "MIT",
 6 |   "scripts": {
 7 |     "start": "node ./server.js"
 8 |   },
 9 |   "dependencies": {
10 |     "cookie-parser": "~1.4.4",
11 |     "debug": "~2.6.9",
12 |     "express": "~4.17.1",
13 |     "http-errors": "~1.7.3",
14 |     "morgan": "~1.9.1"
15 |   },
16 |   "engines": {
17 |     "node": ">=10.14.1"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { BrowserRouter } from 'react-router-dom'
 4 | 
 5 | import registerServiceWorker from './registerServiceWorker'
 6 | 
 7 | import App from './App'
 8 | 
 9 | import 'bootstrap/dist/css/bootstrap.min.css'
10 | 
11 | ReactDOM.render(
12 |     <BrowserRouter>
13 |       <App />
14 |     </BrowserRouter>,
15 |   document.getElementById('root')
16 | )
17 | 
18 | registerServiceWorker()
19 | 


--------------------------------------------------------------------------------
/server/routes/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | 
 3 | const CONSTANTS = require('../constants')
 4 | 
 5 | const sampleData = require('../sampleData')
 6 | 
 7 | 
 8 | const router = express.Router()
 9 | // MasterDetail Page Endpoint
10 | router.get(CONSTANTS.ENDPOINT.MASTERDETAIL, (req, res) => {
11 |   res.json(sampleData.textAssets)
12 | })
13 | 
14 | // Grid Page Endpoint
15 | router.get(CONSTANTS.ENDPOINT.GRID, (req, res) => {
16 |   res.json(sampleData.textAssets)
17 | })
18 | 
19 | 
20 | module.exports = router
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "noEmit": true,
20 |     "jsx": "react"
21 |   },
22 |   "include": [
23 |     "src"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   box-sizing: border-box;
 3 |   position: relative;
 4 |   min-height: 100%;
 5 | }
 6 | 
 7 | *,
 8 | *::before,
 9 | *::after {
10 |   box-sizing: inherit;
11 | }
12 | 
13 | body {
14 |   margin-bottom: 160px !important; /* Height of the footer */
15 |   padding: 0;
16 | }
17 | 
18 | footer {
19 |   position: absolute;
20 |   bottom: 0;
21 |   width: 100%;
22 |   height: 160px; /* Set the fixed height of the footer here */
23 | }
24 | 
25 | /* Override Bootstrap Styling */
26 | 
27 | .btn-primary {
28 |   background-color: #025fce !important;
29 | }
30 | 
31 | button:focus,
32 | button:active {
33 |   outline: none !important;
34 |   box-shadow: none !important;
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/detail/MasterDetailSideBarTab.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import classnames from "classnames";
 3 | import styles from "./masterdetail.module.css";
 4 | 
 5 | export default function MasterDetailSideBarTab(props) {
 6 |   const { index, image, tabText, onDisplayTabClick } = props;
 7 |   return (
 8 |     <button
 9 |       onClick={() => onDisplayTabClick(index)}
10 |       type="button"
11 |       className={classnames(
12 |         "list-group-item",
13 |         "list-group-item-action",
14 |         styles.sidebarText
15 |       )}
16 |     >
17 |       <img src={image} alt="Default Grey Avatar" className="mr-3" />
18 |       {tabText}
19 |     </button>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/WarningMessage/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import classnames from "classnames";
 3 | import styles from "./warningmessage.module.css";
 4 | 
 5 | // A pop up message used to warn users about failed API calls to the back end
 6 | export default function index(props) {
 7 |   const { open, text, onWarningClose } = props;
 8 |   return (
 9 |     <React.Fragment>
10 |       {open && (
11 |         <div
12 |           className={classnames(
13 |             "alert",
14 |             "alert-warning",
15 |             "ml-3",
16 |             styles.warningPosition
17 |           )}
18 |           role="alert"
19 |         >
20 |           {text}
21 |           <button
22 |             onClick={onWarningClose}
23 |             className="close ml-2"
24 |             aria-label="Close"
25 |           >
26 |             <span aria-hidden="true">&times;</span>
27 |           </button>
28 |         </div>
29 |       )}
30 |     </React.Fragment>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { Route, Switch, Redirect } from 'react-router-dom'
 3 | 
 4 | import './App.css'
 5 | 
 6 | import NavBar from './components/NavBar'
 7 | import Footer from './components/Footer'
 8 | 
 9 | import home from './components/home'
10 | import portfolio from './components/portfolio'
11 | import detail from './components/detail'
12 | import about from './components/about'
13 | 
14 | // Add routes for your new pages here.
15 | class App extends Component {
16 |   render() {
17 |     return (
18 |       <React.Fragment>
19 |         <NavBar />
20 |         <Switch>
21 |           <Redirect exact path = "/" to = "/home" />
22 |           <Route path = "/home" component = { home } />
23 |           <Route path = "/portfolio" component = { portfolio } />
24 |           <Route path = "/detail" component = { detail } />
25 |           <Route path = "/about" component = { about } />
26 |         </Switch>
27 |         <Footer />
28 |       </React.Fragment>
29 |     )
30 |   }
31 | }
32 | 
33 | export default App
34 | 


--------------------------------------------------------------------------------
/src/components/Footer/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styles from "./footer.module.css";
 3 | 
 4 | export default function Footer() {
 5 |   return (
 6 |     <footer className={styles.footer}>
 7 |       <div className="container-fluid">
 8 |         <div className="row justify-content-around">
 9 |           <div className="col-8 col-md-5">
10 |             <h5 className={styles.title}>myApp</h5>
11 |             <p className={styles.description}>
12 |               This is placeholder text. Your web app description goes here.
13 |             </p>
14 |           </div>
15 |           <div className="col-2">
16 |             <ul className="list-unstyled">
17 |               <li>
18 |                 <a className={styles.footerlink} href="/">
19 |                   Example Link
20 |                 </a>
21 |               </li>
22 |               <li>
23 |                 <a className={styles.footerlink} href="/">
24 |                   Example Link
25 |                 </a>
26 |               </li>
27 |               <li>
28 |                 <a className={styles.footerlink} href="/">
29 |                   Example Link
30 |                 </a>
31 |               </li>
32 |             </ul>
33 |           </div>
34 |         </div>
35 |       </div>
36 |     </footer>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/server/app.js:
--------------------------------------------------------------------------------
 1 | const createError = require('http-errors')
 2 | const express = require('express')
 3 | const path = require('path')
 4 | const cookieParser = require('cookie-parser')
 5 | const logger = require('morgan')
 6 | 
 7 | const indexRouter = require('./routes/index')
 8 | 
 9 | const app = express()
10 | 
11 | app.use(logger('dev'))
12 | app.use(express.json())
13 | app.use(express.urlencoded({ extended: false }))
14 | app.use(cookieParser())
15 | app.use(express.static(path.resolve(__dirname, 'build')))
16 | 
17 | app.use('/api', indexRouter)
18 | app.get('*', (req, res) => {
19 |   res.sendFile('build/index.html', { root: __dirname })
20 | })
21 | 
22 | // catch 404 and forward to error handler
23 | app.use((req, res, next) => {
24 |   next(createError(404))
25 | })
26 | 
27 | // TODO: Add your own error handler here.
28 | if (process.env.NODE_ENV === 'production') {
29 |   // Do not send stack trace of error message when in production
30 |   app.use((err, req, res, next) => {
31 |     res.status(err.status || 500)
32 |     res.send('Error occurred while handling the request.')
33 |   })
34 | } else {
35 |   // Log stack trace of error message while in development
36 |   app.use((err, req, res, next) => {
37 |     res.status(err.status || 500)
38 |     console.log(err)
39 |     res.send(err.message)
40 |   })
41 | }
42 | 
43 | module.exports = app
44 | 


--------------------------------------------------------------------------------
/src/components/NavBar/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | import styles from "./navbar.module.css";
 4 | 
 5 | //TODO Web Template Studio: Add a new link in the NavBar for your page here.
 6 | // A skip link is included as an accessibility best practice. For more information visit https://www.w3.org/WAI/WCAG21/Techniques/general/G1.
 7 | export default function NavBar() {
 8 |   return (
 9 |     <React.Fragment>
10 |       <div className={styles.skipLink}>
11 |         <a href="#mainContent">Skip to Main Content</a>
12 |       </div>
13 |       <nav className="navbar navbar-expand-sm navbar-light border-bottom justify-content-between">
14 |         <Link className="navbar-brand" to="/">
15 |           myApp
16 |         </Link>
17 |         <div className="navbar-nav">
18 |           <Link className="nav-item nav-link active" to="home">
19 |             home
20 |           </Link>
21 |           <Link className="nav-item nav-link active" to="portfolio">
22 |             portfolio
23 |           </Link>
24 |           <Link className="nav-item nav-link active" to="detail">
25 |             detail
26 |           </Link>
27 |           <Link className="nav-item nav-link active" to="about">
28 |             about
29 |           </Link>
30 |         </div>
31 |       </nav>
32 |     </React.Fragment>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-express-app",
 3 |   "version": "0.1.0",
 4 |   "description": "Awesome and super-simple app with React front-end and Express back-end.",
 5 |   "license": "MIT",
 6 |   "private": false,
 7 |   "repository": {
 8 |     "url": "https://github.com/alexdevero/react-express-app",
 9 |     "type": "git"
10 |   },
11 |   "browserslist": [
12 |     ">0.2%",
13 |     "not dead",
14 |     "not ie <= 11",
15 |     "not op_mini all"
16 |   ],
17 |   "keywords": [
18 |     "app",
19 |     "boilerplate",
20 |     "express",
21 |     "react",
22 |     "starter"
23 |   ],
24 |   "bugs": {
25 |     "url": "https://github.com/alexdevero/react-express-app/issues"
26 |   },
27 |   "proxy": "http://localhost:3001",
28 |   "eslintConfig": {
29 |     "extends": "react-app"
30 |   },
31 |   "scripts": {
32 |     "start": "concurrently \"yarn start-frontend || npm run start-frontend\" \"yarn start-backend || npm run start-backend\"",
33 |     "start-backend": "nodemon server/server.js",
34 |     "start-frontend": "react-scripts start",
35 |     "build": "node ./buildScript",
36 |     "test": "react-scripts test",
37 |     "eject": "react-scripts eject"
38 |   },
39 |   "dependencies": {
40 |     "body-parser": "^1.19.0",
41 |     "bootstrap": "^4.3.1",
42 |     "classnames": "^2.2.6",
43 |     "cookie-parser": "^1.4.4",
44 |     "debug": "~4.1.1",
45 |     "express": "^4.17.1",
46 |     "fs-extra": "8.1.0",
47 |     "morgan": "^1.9.1",
48 |     "react": "^16.8.4",
49 |     "react-dom": "^16.8.4",
50 |     "react-router-dom": "^4.3.1"
51 |   },
52 |   "devDependencies": {
53 |     "concurrently": "^4.1.1",
54 |     "nodemon": "^1.19.1",
55 |     "react-scripts": "^3.0.1",
56 |     "typescript": "^3.6.4"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/components/detail/MasterDetailPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import classnames from "classnames";
 3 | import styles from "./masterdetail.module.css";
 4 | 
 5 | export default function MasterDetailPage(props) {
 6 |   const {
 7 |     longDescription,
 8 |     title,
 9 |     status,
10 |     shipTo,
11 |     orderTotal,
12 |     orderDate
13 |   } = props.textSampleData;
14 |   return (
15 |     <div className="col">
16 |       <div className={classnames("row", styles.heading)}>
17 |         <div className="col">
18 |           <h3 className="ml-3 mb-4">{title}</h3>
19 |         </div>
20 |       </div>
21 |       <div className="row">
22 |         <div className="col-12 mt-3">
23 |           <nav aria-label="breadcrumb">
24 |             <ol className="breadcrumb bg-white mb-0">
25 |               <li className="breadcrumb-item">
26 |                 <a className={styles.breadCrumbLink} href="/detail">
27 |                   detail
28 |                 </a>
29 |               </li>
30 |               <li className="breadcrumb-item active" aria-current="page">
31 |                 {title}
32 |               </li>
33 |             </ol>
34 |           </nav>
35 |         </div>
36 |         <div className="col-md-8 col-12 ml-3 mb-5">
37 |           <p className={styles.title}>Status</p>
38 |           <p>{status}</p>
39 |           <p className={styles.title}>Order Date</p>
40 |           <p>{orderDate}</p>
41 |           <p className={styles.title}>Ship To</p>
42 |           <p>{shipTo}</p>
43 |           <p className={styles.title}>Order Total</p>
44 |           <p>{orderTotal}</p>
45 |           <p className={styles.title}>Description</p>
46 |           <p>{longDescription}</p>
47 |         </div>
48 |       </div>
49 |     </div>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 |     />
10 |     <meta name="theme-color" content="#000000" />
11 |     <!--
12 |       manifest.json provides metadata used when your web app is installed on a
13 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <title>React | Express App</title>
26 |   </head>
27 |   <body>
28 |     <noscript>You need to enable JavaScript to run this app.</noscript>
29 |     <div id="root"></div>
30 |     <!--
31 |       This HTML file is a template.
32 |       If you open it directly in the browser, you will see an empty page.
33 | 
34 |       You can add webfonts, meta tags, or analytics to this file.
35 |       The build step will place the bundled scripts into the <body> tag.
36 | 
37 |       To begin the development, run `npm start` or `yarn start`.
38 |       To create a production bundle, use `npm run build` or `yarn build`.
39 |     -->
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | /**
 4 |  * Module dependencies.
 5 |  */
 6 | 
 7 | const debug = require('debug')('react-express-app:server')
 8 | const http = require('http')
 9 | const app = require('./app')
10 | 
11 | const CONSTANTS = require('./constants')
12 | 
13 | /**
14 |  * Get port from environment and store in Express.
15 |  */
16 | 
17 | const port = normalizePort(CONSTANTS.PORT)
18 | app.set('port', port)
19 | 
20 | /**
21 |  * Create HTTP server.
22 |  */
23 | 
24 | const server = http.createServer(app)
25 | 
26 | /**
27 |  * Listen on provided port, on all network interfaces.
28 |  */
29 | 
30 | server.listen(port)
31 | server.on('error', onError)
32 | server.on('listening', onListening)
33 | 
34 | /**
35 |  * Normalize a port into a number, string, or false.
36 |  */
37 | 
38 | function normalizePort(val) {
39 |   const port = parseInt(val, 10)
40 | 
41 |   if (isNaN(port)) {
42 |     // named pipe
43 |     return val;
44 |   }
45 | 
46 |   if (port >= 0) {
47 |     // port number
48 |     return port;
49 |   }
50 | 
51 |   return false;
52 | }
53 | 
54 | /**
55 |  * Event listener for HTTP server 'error' event.
56 |  */
57 | 
58 | function onError(error) {
59 |   if (error.syscall !== 'listen') {
60 |     throw error;
61 |   }
62 | 
63 |   const bind = typeof port === 'string' ? `Pipe ${port}` : `Port ${port}`
64 | 
65 |   // handle specific listen errors with friendly messages
66 |   switch (error.code) {
67 |     case 'EACCES':
68 |       console.error(`${bind} requires elevated privileges`)
69 |       process.exit(1)
70 |       break
71 |     case 'EADDRINUSE':
72 |       console.error(`${bind} is already in use`)
73 |       process.exit(1)
74 |       break
75 |     default:
76 |       throw error
77 |   }
78 | }
79 | 
80 | /**
81 |  * Event listener for HTTP server 'listening' event.
82 |  */
83 | 
84 | function onListening() {
85 |   const addr = server.address()
86 |   const bind = typeof addr === 'string' ? `pipe ${addr}` : `port ${addr.port}`
87 |   debug(`Listening on ${bind}`)
88 | }
89 | 


--------------------------------------------------------------------------------
/src/components/portfolio/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import classnames from "classnames";
 3 | import GridComponent from "./GridComponent";
 4 | import WarningMessage from "../WarningMessage";
 5 | import GreyBox from "../../images/GreyBox.svg";
 6 | import styles from "./grid.module.css";
 7 | import CONSTANTS from "../../constants";
 8 | 
 9 | export default class portfolio extends Component {
10 |   constructor(props) {
11 |     super(props);
12 |     this.state = {
13 |       gridTextAssets: [{ description: "", header: "", id: 0 }],
14 |       WarningMessageOpen: false,
15 |       WarningMessageText: ""
16 |     };
17 | 
18 |     this.handleWarningClose = this.handleWarningClose.bind(this);
19 |   }
20 | 
21 |   // Get the text sample data from the back end
22 |   componentDidMount() {
23 |     fetch(CONSTANTS.ENDPOINT.GRID)
24 |       .then(response => {
25 |         if (!response.ok) {
26 |           throw Error(response.statusText);
27 |         }
28 |         return response.json();
29 |       })
30 |       .then(result => this.setState({ gridTextAssets: result }))
31 |       .catch(error =>
32 |         this.setState({
33 |           WarningMessageOpen: true,
34 |           WarningMessageText: `Request to get grid text failed: ${error}`
35 |         })
36 |       );
37 |   }
38 | 
39 |   handleWarningClose() {
40 |     this.setState({
41 |       WarningMessageOpen: false,
42 |       WarningMessageText: ""
43 |     });
44 |   }
45 | 
46 |   render() {
47 |     const {
48 |       gridTextAssets,
49 |       WarningMessageOpen,
50 |       WarningMessageText
51 |     } = this.state;
52 |     return (
53 |       <main id="mainContent">
54 |         <div className={classnames("text-center", styles.header)}>
55 |           <h1>myApp</h1>
56 |           <p>This is placeholder text. Your web app description goes here.</p>
57 |           <a
58 |             href="https://github.com/Microsoft/WebTemplateStudio"
59 |             className="btn btn-primary my-2"
60 |           >
61 |             Link to our Github
62 |           </a>
63 |         </div>
64 | 
65 |         <div className="container">
66 |           <div className="row justify-content-center py-5">
67 |             <h1>Bootstrap portfolio Template</h1>
68 |           </div>
69 | 
70 |           <div className="row justify-content-around text-center pb-5">
71 |             {gridTextAssets.map(textAssets => (
72 |               <GridComponent
73 |                 key={textAssets.id}
74 |                 header={textAssets.title}
75 |                 description={textAssets.shortDescription}
76 |                 image={GreyBox}
77 |               />
78 |             ))}
79 |           </div>
80 |         </div>
81 |         <WarningMessage
82 |           open={WarningMessageOpen}
83 |           text={WarningMessageText}
84 |           onWarningClose={this.handleWarningClose}
85 |         />
86 |       </main>
87 |     );
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/src/components/detail/index.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import classnames from "classnames";
  3 | import WarningMessage from "../WarningMessage";
  4 | import MasterDetailPage from "./MasterDetailPage";
  5 | import MasterDetailSideBarTab from "./MasterDetailSideBarTab";
  6 | import GreyAvatar from "../../images/GreyAvatar.svg";
  7 | import styles from "./masterdetail.module.css";
  8 | import CONSTANTS from "../../constants";
  9 | 
 10 | export default class detail extends Component {
 11 |   constructor(props) {
 12 |     super(props);
 13 | 
 14 |     this.state = {
 15 |       currentDisplayTabIndex: 0,
 16 |       masterDetailText: [
 17 |         {
 18 |           shortDescription: "",
 19 |           longDescription: "",
 20 |           title: "",
 21 |           status: "",
 22 |           shipTo: "",
 23 |           orderTotal: 0.0,
 24 |           orderDate: "",
 25 |           id: 0
 26 |         }
 27 |       ]
 28 |     };
 29 |     this.handleDisplayTabClick = this.handleDisplayTabClick.bind(this);
 30 |     this.handleWarningClose = this.handleWarningClose.bind(this);
 31 |   }
 32 | 
 33 |   // Get the sample data from the back end
 34 |   componentDidMount() {
 35 |     fetch(CONSTANTS.ENDPOINT.MASTERDETAIL)
 36 |       .then(response => {
 37 |         if (!response.ok) {
 38 |           throw Error(response.statusText);
 39 |         }
 40 |         return response.json();
 41 |       })
 42 |       .then(result => {
 43 |         this.setState({ masterDetailText: result });
 44 |       })
 45 |       .catch(error =>
 46 |         this.setState({
 47 |           WarningMessageOpen: true,
 48 |           WarningMessageText: `${
 49 |             CONSTANTS.ERROR_MESSAGE.MASTERDETAIL_GET
 50 |           } ${error}`
 51 |         })
 52 |       );
 53 |   }
 54 | 
 55 |   handleWarningClose() {
 56 |     this.setState({
 57 |       WarningMessageOpen: false,
 58 |       WarningMessageText: ""
 59 |     });
 60 |   }
 61 | 
 62 |   handleDisplayTabClick(id) {
 63 |     this.setState({ currentDisplayTabIndex: id });
 64 |   }
 65 | 
 66 |   render() {
 67 |     const {
 68 |       masterDetailText,
 69 |       currentDisplayTabIndex,
 70 |       WarningMessageOpen,
 71 |       WarningMessageText
 72 |     } = this.state;
 73 |     return (
 74 |       <main id="mainContent">
 75 |         <div className="container-fluid">
 76 |           <div className="row">
 77 |             <div
 78 |               className={classnames(
 79 |                 "col-2",
 80 |                 "p-0",
 81 |                 "border-right",
 82 |                 styles.sidebar
 83 |               )}
 84 |             >
 85 |               <div className="list-group list-group-flush border-bottom">
 86 |                 {masterDetailText.map((textAssets, index) => (
 87 |                   <MasterDetailSideBarTab
 88 |                     onDisplayTabClick={this.handleDisplayTabClick}
 89 |                     tabText={textAssets.title}
 90 |                     image={GreyAvatar}
 91 |                     index={index}
 92 |                     key={textAssets.id}
 93 |                   />
 94 |                 ))}
 95 |               </div>
 96 |             </div>
 97 |             <MasterDetailPage
 98 |               textSampleData={masterDetailText[currentDisplayTabIndex]}
 99 |             />
100 |           </div>
101 |         </div>
102 |         <WarningMessage
103 |           open={WarningMessageOpen}
104 |           text={WarningMessageText}
105 |           onWarningClose={this.handleWarningClose}
106 |         />
107 |       </main>
108 |     );
109 |   }
110 | }
111 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Getting Started
 2 | 
 3 | In the root directory of the project...
 4 | 
 5 | 1. Install node modules `yarn install` or `npm install`.
 6 | 2. Start development server `yarn start` or `npm start`.
 7 | 
 8 | ## Next Steps
 9 | 
10 | ### Sample Data
11 | 
12 | Replace the sample data stored in /server/sampleData.js.
13 | Replace the default images stored in /src/images.
14 | 
15 | ### Adding a New Page
16 | 
17 | 1. Create a folder in `/src/components` with your react components.
18 | 2. Add a route for your page to `/src/App.js`.
19 | 3. Add a button to the navigation bar in `/src/components/NavBar/index.js`.
20 | 
21 | ### Deployment
22 | 
23 | If you selected Azure App Service when creating your project, follow these steps:
24 | 
25 | 1. Press `Ctrl + Shift + P` in Windows/Linux or `Shift ⇧ + Command ⌘ + P` in Mac and type/select `Web Template Studio: Deploy App` to start deploying your app.
26 | 2. Once the deployment is done, click "Browse website" in the notification window on the lower right corner to check out your newly deployed app.
27 | 
28 | If you did not select Azure App Service and want to create a new Azure App Service web app, follow these steps:
29 | 
30 | 1. Press `Ctrl + Shift + P` in Windows/Linux or `Shift ⇧ + Command ⌘ + P` in Mac and type/select `Azure App Service: Create New Web App...` to create a new web app.
31 |    - Select your subscription
32 |    - Enter your web app name
33 |    - Select Linux as your OS
34 |    - Select Node.js 10.14 for a Node/Express application, Python 3.7 for a Flask application
35 | 2. Press `Ctrl + Shift + P` in Windows/Linux or `Shift ⇧ + Command ⌘ + P` in Mac and type/select `Web Template Studio: Deploy App` to start deploying your app.
36 |    - You will have to select the same subscription again
37 |    - Find the web app that you've just created
38 |    - Click "Yes" in the notification window on the lower right corner (build prompt)
39 |    - Click "Deploy" on the window pop-up (deploy window)
40 |    - Click "Yes" on the notification window on the lower right corner (default prompt)
41 | 3. Once the deployment is done, click "Browse website" in the notification window on the lower right corner to check out your newly deployed app.
42 | 
43 | Consider adding authentication and securing back-end API's by following [Azure App Service Security](https://docs.microsoft.com/en-us/azure/app-service/overview-security).
44 | 
45 | Full documentation for deployment to Azure App Service can be found here: [Deployment Docs](https://github.com/Microsoft/WebTemplateStudio/blob/dev/docs/deployment.md).
46 | 
47 | ## File Structure
48 | 
49 | The front-end is based on [create-react-app](https://github.com/facebook/create-react-app).
50 | 
51 | The back-end is based on [Express Generator](https://expressjs.com/en/starter/generator.html).
52 | 
53 | The front-end is served on http://localhost:3000/ and the back-end on http://localhost:3001/.
54 | 
55 | ```
56 | .
57 | ├── server/ - Express server that provides API routes and serves front-end
58 | │ ├── routes/ - Handles API calls for routes
59 | │ ├── app.js - Adds middleware to the express server
60 | │ ├── sampleData.js - Contains all sample text data for generate pages
61 | │ ├── constants.js - Defines the constants for the endpoints and port
62 | │ └── server.js - Configures Port and HTTP Server
63 | ├── src - React front-end
64 | │ ├── components - React components for each page
65 | │ ├── App.jsx - React routing
66 | │ └── index.jsx - React root component
67 | └── README.md
68 | ```
69 | 
70 | ## Additional Documentation
71 | 
72 | - React - https://reactjs.org/
73 | - React Router - https://reacttraining.com/react-router/
74 | 
75 | - Bootstrap CSS - https://getbootstrap.com/
76 | - Express - https://expressjs.com/
77 | 
78 | <!-- This project was created using [Microsoft Web Template Studio](https://github.com/Microsoft/WebTemplateStudio). -->
79 | 


--------------------------------------------------------------------------------
/server/sampleData.js:
--------------------------------------------------------------------------------
  1 | const shortLoremIpsum = `Lorem id sint aliqua tempor tempor sit. Ad dolor dolor ut nulla mollit dolore non eiusmod Lorem tempor nisi cillum.`;
  2 | const sampleData = {};
  3 | const longLoremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  4 |   tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus
  5 |   non enim praesent elementum facilisis leo vel. Risus at ultrices mi
  6 |   tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non
  7 |   tellus. Convallis convallis tellus id interdum velit laoreet id donec
  8 |   ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl
  9 |   suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod
 10 |   quis viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet
 11 |   proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras
 12 |   tincidunt lobortis feugiat vivamus at augue. At augue eget arcu dictum
 13 |   varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt.
 14 |   Lorem donec massa sapien faucibus et molestie ac.`;
 15 | 
 16 | // This class holds sample data used by some generated pages to show how they can be used.
 17 | // TODO: Delete this file once your app is using real data.
 18 | sampleData.textAssets = [
 19 |   {
 20 |     shortDescription: shortLoremIpsum,
 21 |     longDescription: longLoremIpsum,
 22 |     title: 'Company A',
 23 |     status: 'Closed',
 24 |     shipTo: 'Francisco Pérez-Olaeta',
 25 |     orderTotal: 2490.0,
 26 |     orderDate: new Date(2017, 5, 24).toDateString(),
 27 |     id: 1
 28 |   },
 29 |   {
 30 |     shortDescription: shortLoremIpsum,
 31 |     longDescription: longLoremIpsum,
 32 |     title: 'Company B',
 33 |     status: 'Closed',
 34 |     shipTo: 'Soo Jung Lee',
 35 |     orderTotal: 1760.0,
 36 |     orderDate: new Date(2017, 5, 24).toDateString(),
 37 |     id: 2
 38 |   },
 39 |   {
 40 |     shortDescription: shortLoremIpsum,
 41 |     longDescription: longLoremIpsum,
 42 |     title: 'Company C',
 43 |     status: 'Shipped',
 44 |     shipTo: 'Run Liu',
 45 |     orderTotal: 665.0,
 46 |     orderDate: new Date(2017, 6, 3).toDateString(),
 47 |     id: 3
 48 |   },
 49 |   {
 50 |     shortDescription: shortLoremIpsum,
 51 |     longDescription: longLoremIpsum,
 52 |     title: 'Company D',
 53 |     status: 'Shipped',
 54 |     shipTo: 'Soo Jung Lee',
 55 |     orderTotal: 560.0,
 56 |     orderDate: new Date(2017, 6, 5).toDateString(),
 57 |     id: 4
 58 |   },
 59 |   {
 60 |     shortDescription: shortLoremIpsum,
 61 |     longDescription: longLoremIpsum,
 62 |     title: 'Company E',
 63 |     status: 'New',
 64 |     shipTo: 'John Rodman',
 65 |     orderTotal: 810.0,
 66 |     orderDate: new Date(2017, 6, 7).toDateString(),
 67 |     id: 5
 68 |   },
 69 |   {
 70 |     shortDescription: shortLoremIpsum,
 71 |     longDescription: longLoremIpsum,
 72 |     title: 'Company F',
 73 |     status: 'New',
 74 |     shipTo: 'Elizabeth Andersen',
 75 |     orderTotal: 196.5,
 76 |     orderDate: new Date(2017, 6, 7).toDateString(),
 77 |     id: 6
 78 |   },
 79 |   {
 80 |     shortDescription: shortLoremIpsum,
 81 |     longDescription: longLoremIpsum,
 82 |     title: 'Company G',
 83 |     status: 'Closed',
 84 |     shipTo: 'Peter Krschne',
 85 |     orderTotal: 270.0,
 86 |     orderDate: new Date(2017, 6, 11).toDateString(),
 87 |     id: 7
 88 |   },
 89 |   {
 90 |     shortDescription: shortLoremIpsum,
 91 |     longDescription: longLoremIpsum,
 92 |     title: 'Company H',
 93 |     status: 'Closed',
 94 |     shipTo: 'Sven Mortensen',
 95 |     orderTotal: 736.0,
 96 |     orderDate: new Date(2017, 6, 14).toDateString(),
 97 |     id: 8
 98 |   },
 99 |   {
100 |     shortDescription: shortLoremIpsum,
101 |     longDescription: longLoremIpsum,
102 |     title: 'Company I',
103 |     status: 'Shipped',
104 |     shipTo: 'Anna Bedecs',
105 |     orderTotal: 800.0,
106 |     orderDate: new Date(2017, 6, 18).toDateString(),
107 |     id: 9
108 |   }
109 | ]
110 | 
111 | 
112 | module.exports = sampleData
113 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | )
 20 | 
 21 | export default function register() {
 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)
 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/facebookincubator/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 |         // Is not local host. Just register service worker
 37 |         registerValidSW(swUrl)
 38 |       } else {
 39 |         // This is running on localhost. Lets check if a service worker still exists or not.
 40 |         checkValidServiceWorker(swUrl)
 41 |       }
 42 |     })
 43 |   }
 44 | }
 45 | 
 46 | function registerValidSW(swUrl) {
 47 |   navigator.serviceWorker
 48 |     .register(swUrl)
 49 |     .then(registration => {
 50 |       registration.onupdatefound = () => {
 51 |         const installingWorker = registration.installing;
 52 |         installingWorker.onstatechange = () => {
 53 |           if (installingWorker.state === 'installed') {
 54 |             if (navigator.serviceWorker.controller) {
 55 |               // At this point, the old content will have been purged and
 56 |               // the fresh content will have been added to the cache.
 57 |               // It's the perfect time to display a "New content is
 58 |               // available; please refresh." message in your web app.
 59 |               console.log('New content is available; please refresh.')
 60 |             } else {
 61 |               // At this point, everything has been precached.
 62 |               // It's the perfect time to display a
 63 |               // "Content is cached for offline use." message.
 64 |               console.log('Content is cached for offline use.')
 65 |             }
 66 |           }
 67 |         }
 68 |       }
 69 |     })
 70 |     .catch(error => {
 71 |       console.error('Error during service worker registration:', error)
 72 |     })
 73 | }
 74 | 
 75 | function checkValidServiceWorker(swUrl) {
 76 |   // Check if the service worker can be found. If it can't reload the page.
 77 |   fetch(swUrl)
 78 |     .then(response => {
 79 |       // Ensure service worker exists, and that we really are getting a JS file.
 80 |       if (
 81 |         response.status === 404 ||
 82 |         response.headers.get('content-type').indexOf('javascript') === -1
 83 |       ) {
 84 |         // No service worker found. Probably a different app. Reload the page.
 85 |         navigator.serviceWorker.ready.then(registration => {
 86 |           registration.unregister().then(() => {
 87 |             window.location.reload()
 88 |           })
 89 |         })
 90 |       } else {
 91 |         // Service worker found. Proceed as normal.
 92 |         registerValidSW(swUrl)
 93 |       }
 94 |     })
 95 |     .catch(() => {
 96 |       console.log(
 97 |         'No internet connection found. App is running in offline mode.'
 98 |       )
 99 |     })
100 | }
101 | 
102 | export function unregister() {
103 |   if ('serviceWorker' in navigator) {
104 |     navigator.serviceWorker.ready.then(registration => {
105 |       registration.unregister()
106 |     })
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------