├── .eslintrc
├── .gitignore
├── .nowignore
├── .storybook
    ├── addons.js
    ├── config.js
    ├── preview-head.html
    └── webpack.config.js
├── .vscode
    └── settings.json
├── .yarnrc
├── README.md
├── api
    └── time.ts
├── config-overrides.js
├── jest.config.js
├── jest.cra.config.js
├── jest.node.config.js
├── lib
    ├── app-name.ts
    ├── current-time.test.ts
    └── current-time.ts
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
├── src
    ├── App.css
    ├── App.test.tsx
    ├── App.tsx
    ├── index.css
    ├── index.tsx
    ├── react-app-env.d.ts
    └── serviceWorker.ts
├── tsconfig.json
└── yarn.lock


/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "parser": "@typescript-eslint/parser",
 4 |   "extends": [
 5 |     "react-app",
 6 |     "plugin:@typescript-eslint/recommended",
 7 |     "prettier",
 8 |     "prettier/@typescript-eslint"
 9 |   ],
10 |   "plugins": ["@typescript-eslint"],
11 |   "parserOptions": {
12 |     "ecmaFeatures": {
13 |       "jsx": true
14 |     },
15 |     "useJSXTextNode": true
16 |   },
17 |   "env": {
18 |     "browser": true,
19 |     "commonjs": true,
20 |     "es6": true,
21 |     "node": true,
22 |     "jest": true
23 |   },
24 |   "settings": {
25 |     "react": {
26 |       "version": "16.8"
27 |     }
28 |   },
29 |   "rules": {
30 |     "@typescript-eslint/explicit-function-return-type": 0
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/.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 | build/
13 | 
14 | # misc
15 | .DS_Store
16 | .env
17 | storybook-static
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/.nowignore:
--------------------------------------------------------------------------------
1 | **/*.test.ts
2 | **/*.spec.ts
3 | .vscode
4 | .storybook


--------------------------------------------------------------------------------
/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-storysource/register';
2 | import '@storybook/addon-knobs/register';
3 | import '@storybook/addon-actions/register';
4 | import '@storybook/addon-links/register';
5 | import '@storybook/addon-a11y/register';
6 | 


--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
 1 | import { configure } from '@storybook/react';
 2 | 
 3 | const req = require.context('../src', true, /\.stories\.tsx$/);
 4 | 
 5 | function loadStories() {
 6 |   req.keys().forEach(filename => req(filename));
 7 | }
 8 | 
 9 | configure(loadStories, module);
10 | 


--------------------------------------------------------------------------------
/.storybook/preview-head.html:
--------------------------------------------------------------------------------
1 | <link
2 |   rel="stylesheet"
3 |   href="https://unpkg.com/normalize.css@8.0.0/normalize.css"
4 | />
5 | 


--------------------------------------------------------------------------------
/.storybook/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = ({ config, mode }) => {
 2 |   // remove the linting config
 3 |   config.module.rules = config.module.rules.filter(x => x.enforce !== 'pre');
 4 |   config.module.rules.push({
 5 |     test: /\.(ts|tsx)$/,
 6 |     use: [
 7 |       {
 8 |         loader: require.resolve('awesome-typescript-loader'),
 9 |       },
10 |       {
11 |         loader: require.resolve('react-docgen-typescript-loader'),
12 |       },
13 |     ],
14 |   });
15 |   config.resolve.extensions.push('.ts', '.tsx');
16 |   return config;
17 | };
18 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "eslint.validate": [
 3 |         "javascript",
 4 |         "javascriptreact",
 5 |         "typescript",
 6 |         "typescriptreact"
 7 |     ],
 8 |     "eslint.enable": true,
 9 |     "editor.tabSize": 2,
10 |     "search.exclude": {
11 |         "**/node_modules": true,
12 |         "**/bower_components": true,
13 |         "**/packages/*/lib/**": true,
14 |         "**/temp/**": true
15 |     }
16 | }


--------------------------------------------------------------------------------
/.yarnrc:
--------------------------------------------------------------------------------
1 | --add.ignore-engines true
2 | --install.ignore-engines true
3 | --upgrade-interactive.ignore-engines true
4 | --upgrade-interactive.latest true


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # cra-monorepo
 2 | 
 3 | This is a starter for a Zeit [Now 2.0](https://zeit.co/now) based monorepo containing a Create React App frontend + Node lambda based backend.
 4 | 
 5 | Example deployment: https://cra-monorepo.ctrlplusb.now.sh/
 6 | 
 7 | ## Features
 8 | 
 9 | - Frontend: Create React App with React Fast Refresh and Storybook
10 | - Backend: Node lambdas
11 | - Shared code between frontend and backend
12 | - Fully TypeScript'ed with same TSConfig across entire codebase
13 | - Consistent ESLint with Typescript parser across entire codebase
14 | - Run Jest from the root
15 | - Prettier configuration
16 | - Yarn
17 | 
18 | ## Recommendations
19 | 
20 | Highly recommend using VSCode with the Prettier plugin. 🥰
21 | 
22 | ## Getting started
23 | 
24 | ```bash
25 | git clone https://github.com/ctrlplusb/cra-monorepo
26 | cd cra-monorepo
27 | yarn install
28 | ```
29 | 
30 | ## Commands
31 | 
32 | Development:
33 | 
34 | ```bash
35 | yarn start
36 | ```
37 | 
38 | Deployment:
39 | 
40 | ```bash
41 | yarn deploy
42 | ```
43 | 
44 | Lint:
45 | 
46 | ```bash
47 | yarn lint
48 | ```
49 | 
50 | Storybook:
51 | 
52 | ```bash
53 | yarn storybook
54 | ```
55 | 
56 | Test:
57 | 
58 | ```bash
59 | yarn test
60 | ```
61 | 


--------------------------------------------------------------------------------
/api/time.ts:
--------------------------------------------------------------------------------
1 | import { IncomingMessage, ServerResponse } from 'http';
2 | import currentTime from '../lib/current-time';
3 | 
4 | export default (req: IncomingMessage, res: ServerResponse) => {
5 |   res.end(currentTime());
6 | };
7 | 


--------------------------------------------------------------------------------
/config-overrides.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/no-var-requires */
 2 | 
 3 | const path = require('path');
 4 | const {
 5 |   addBabelPlugin,
 6 |   addWebpackPlugin,
 7 |   babelInclude,
 8 |   disableEsLint,
 9 |   override,
10 |   removeModuleScopePlugin,
11 | } = require('customize-cra');
12 | // TODO: Replace with official plugin when it is supported
13 | const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
14 | 
15 | module.exports = override(
16 |   // Add support for React Fast Refresh
17 |   process.env.NODE_ENV === 'development'
18 |     ? addBabelPlugin('react-refresh/babel')
19 |     : undefined,
20 |   process.env.NODE_ENV === 'development'
21 |     ? addWebpackPlugin(new ReactRefreshPlugin())
22 |     : undefined,
23 |   // Add support for transpiling local package imports
24 |   babelInclude([path.resolve('src'), path.resolve('lib')]),
25 |   // Disable CRA lint in favour of project lint
26 |   disableEsLint(),
27 |   // Allow relative imports outside of src
28 |   removeModuleScopePlugin(),
29 | );
30 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   projects: ['jest.node.config.js', 'jest.cra.config.js'],
3 | };
4 | 


--------------------------------------------------------------------------------
/jest.cra.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * I have done this "re-export" of the react-scripts jest configuration so that
 3 |  * we are able to leverage Jest projects based execution from the root of the
 4 |  * repo.
 5 |  */
 6 | 
 7 | /* eslint-disable @typescript-eslint/no-var-requires */
 8 | 
 9 | const createJestConfig = require('react-scripts/scripts/utils/createJestConfig');
10 | 
11 | const rootDir = __dirname;
12 | const resolveReactScriptsModule = reactScriptsPath =>
13 |   require.resolve(`react-scripts/${reactScriptsPath}`);
14 | const isEjecting = false;
15 | 
16 | module.exports = {
17 |   ...createJestConfig(resolveReactScriptsModule, rootDir, isEjecting),
18 |   displayName: 'cra',
19 | };
20 | 


--------------------------------------------------------------------------------
/jest.node.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   displayName: 'node',
3 |   preset: 'ts-jest',
4 |   testEnvironment: 'node',
5 |   testPathIgnorePatterns: ['/node_modules/', '/src/'],
6 | };
7 | 


--------------------------------------------------------------------------------
/lib/app-name.ts:
--------------------------------------------------------------------------------
1 | export default 'cra-monorepo';
2 | 


--------------------------------------------------------------------------------
/lib/current-time.test.ts:
--------------------------------------------------------------------------------
1 | import currentTime from './current-time';
2 | 
3 | test('returns in the HH:MM format', () => {
4 |   const actual = currentTime();
5 | 
6 |   expect(actual).toMatch(/^[\d]{2}:[\d]{2}$/);
7 | });
8 | 


--------------------------------------------------------------------------------
/lib/current-time.ts:
--------------------------------------------------------------------------------
1 | export default function currentTime(): string {
2 |   const now = new Date();
3 |   return `${now
4 |     .getHours()
5 |     .toString()
6 |     .padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
7 | }
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "cra-monorepo",
 4 |   "engines": {
 5 |     "node": "12"
 6 |   },
 7 |   "scripts": {
 8 |     "build-storybook": "build-storybook -s public",
 9 |     "build": "NODE_ENV=development SKIP_PREFLIGHT_CHECK=true react-app-rewired build",
10 |     "deploy": "now",
11 |     "dev": "FORCE_COLOR=true BROWSER=none SKIP_PREFLIGHT_CHECK=true react-app-rewired start | cat",
12 |     "lint": "eslint --ext .ts --ext .tsx api src lib",
13 |     "start": "now dev",
14 |     "storybook": "start-storybook -p 9009 -s public",
15 |     "test": "jest"
16 |   },
17 |   "dependencies": {
18 |     "react": "^16.13.1",
19 |     "react-dom": "^16.13.1",
20 |     "react-scripts": "^3.4.1"
21 |   },
22 |   "devDependencies": {
23 |     "@babel/core": "^7.9.6",
24 |     "@babel/plugin-syntax-flow": "^7.8.3",
25 |     "@hot-loader/react-dom": "^16.13.0",
26 |     "@pmmmwh/react-refresh-webpack-plugin": "^0.2.0",
27 |     "@storybook/addon-a11y": "^5.3.18",
28 |     "@storybook/addon-actions": "^5.3.18",
29 |     "@storybook/addon-info": "^5.3.18",
30 |     "@storybook/addon-knobs": "^5.3.18",
31 |     "@storybook/addon-links": "^5.3.18",
32 |     "@storybook/addon-storysource": "^5.3.18",
33 |     "@storybook/addons": "^5.3.18",
34 |     "@storybook/react": "^5.3.18",
35 |     "@testing-library/jest-dom": "^5.5.0",
36 |     "@testing-library/react": "^10.0.4",
37 |     "@types/jest": "^25.2.1",
38 |     "@types/node": "^13.13.5",
39 |     "@types/react": "^16.9.34",
40 |     "@types/react-dom": "^16.9.7",
41 |     "@types/storybook__addon-info": "^5.2.1",
42 |     "@typescript-eslint/eslint-plugin": "^2.31.0",
43 |     "@typescript-eslint/parser": "^2.31.0",
44 |     "awesome-typescript-loader": "^5.2.1",
45 |     "babel-core": "^7.0.0-bridge.0",
46 |     "babel-eslint": "^10.1.0",
47 |     "babel-jest": "^26.0.1",
48 |     "babel-loader": "^8.1.0",
49 |     "customize-cra": "^0.9.1",
50 |     "eslint": "^6.8.0",
51 |     "eslint-config-prettier": "^6.11.0",
52 |     "eslint-config-react-app": "^5.2.1",
53 |     "eslint-plugin-flowtype": "^4.7.0",
54 |     "eslint-plugin-import": "^2.20.2",
55 |     "eslint-plugin-jsx-a11y": "^6.2.3",
56 |     "eslint-plugin-prettier": "^3.1.3",
57 |     "eslint-plugin-react": "^7.19.0",
58 |     "eslint-plugin-react-hooks": "^4.0.0",
59 |     "jest": "^26.0.1",
60 |     "jest-environment-jsdom": "^26.0.1",
61 |     "prettier": "^2.0.5",
62 |     "react-app-rewired": "^2.1.6",
63 |     "react-docgen-typescript-loader": "^3.7.2",
64 |     "react-docgen-typescript-webpack-plugin": "^1.1.0",
65 |     "react-refresh": "^0.8.2",
66 |     "ts-jest": "^25.5.0",
67 |     "typescript": "3.8.3"
68 |   },
69 |   "prettier": {
70 |     "semi": true,
71 |     "singleQuote": true,
72 |     "trailingComma": "all"
73 |   },
74 |   "browserslist": {
75 |     "production": [
76 |       ">0.2%",
77 |       "not dead",
78 |       "not op_mini all"
79 |     ],
80 |     "development": [
81 |       "last 1 chrome version",
82 |       "last 1 firefox version",
83 |       "last 1 safari version"
84 |     ]
85 |   }
86 | }
87 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrlplusb/cra-monorepo/37c971efc73b1f3581d2fcba429121808b9eb4ae/public/favicon.ico


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


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 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 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   animation: App-logo-spin infinite 20s linear;
 7 |   height: 40vmin;
 8 |   pointer-events: none;
 9 | }
10 | 
11 | .App-header {
12 |   background-color: #282c34;
13 |   min-height: 100vh;
14 |   display: flex;
15 |   flex-direction: column;
16 |   align-items: center;
17 |   justify-content: center;
18 |   font-size: calc(10px + 2vmin);
19 |   color: white;
20 | }
21 | 
22 | .App-link {
23 |   color: #61dafb;
24 | }
25 | 
26 | @keyframes App-logo-spin {
27 |   from {
28 |     transform: rotate(0deg);
29 |   }
30 |   to {
31 |     transform: rotate(360deg);
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/App.test.tsx:
--------------------------------------------------------------------------------
 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(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import appName from '../lib/app-name';
 3 | import currentTime from '../lib/current-time';
 4 | import './App.css';
 5 | 
 6 | const App: React.FC = () => {
 7 |   const [serverDate, setServerDate] = useState<string>();
 8 |   useEffect(() => {
 9 |     fetch('/api/time')
10 |       .then((response) => response.text())
11 |       .then((text) => setServerDate(text));
12 |   }, []);
13 | 
14 |   return (
15 |     <div className="App">
16 |       <header className="App-header">
17 |         <h1>{appName}</h1>
18 |         <p>The time on the server is {serverDate}</p>
19 |         <p>The time on client is {currentTime()}</p>
20 |       </header>
21 |     </div>
22 |   );
23 | };
24 | 
25 | export default App;
26 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(<App />, document.getElementById('root'));
 8 | 
 9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: https://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 
3 | module '*.css' {
4 |   export default string;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/serviceWorker.ts:
--------------------------------------------------------------------------------
  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(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | type Config = {
 24 |   onSuccess?: (registration: ServiceWorkerRegistration) => void;
 25 |   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 26 | };
 27 | 
 28 | export function register(config?: Config) {
 29 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 30 |     // The URL constructor is available in all browsers that support SW.
 31 |     const publicUrl = new URL(
 32 |       (process as { env: { [key: string]: string } }).env.PUBLIC_URL,
 33 |       window.location.href
 34 |     );
 35 |     if (publicUrl.origin !== window.location.origin) {
 36 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 37 |       // from what our page is served on. This might happen if a CDN is used to
 38 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 39 |       return;
 40 |     }
 41 | 
 42 |     window.addEventListener('load', () => {
 43 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 44 | 
 45 |       if (isLocalhost) {
 46 |         // This is running on localhost. Let's check if a service worker still exists or not.
 47 |         checkValidServiceWorker(swUrl, config);
 48 | 
 49 |         // Add some additional logging to localhost, pointing developers to the
 50 |         // service worker/PWA documentation.
 51 |         navigator.serviceWorker.ready.then(() => {
 52 |           console.log(
 53 |             'This web app is being served cache-first by a service ' +
 54 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 55 |           );
 56 |         });
 57 |       } else {
 58 |         // Is not localhost. Just register service worker
 59 |         registerValidSW(swUrl, config);
 60 |       }
 61 |     });
 62 |   }
 63 | }
 64 | 
 65 | function registerValidSW(swUrl: string, config?: Config) {
 66 |   navigator.serviceWorker
 67 |     .register(swUrl)
 68 |     .then(registration => {
 69 |       registration.onupdatefound = () => {
 70 |         const installingWorker = registration.installing;
 71 |         if (installingWorker == null) {
 72 |           return;
 73 |         }
 74 |         installingWorker.onstatechange = () => {
 75 |           if (installingWorker.state === 'installed') {
 76 |             if (navigator.serviceWorker.controller) {
 77 |               // At this point, the updated precached content has been fetched,
 78 |               // but the previous service worker will still serve the older
 79 |               // content until all client tabs are closed.
 80 |               console.log(
 81 |                 'New content is available and will be used when all ' +
 82 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 83 |               );
 84 | 
 85 |               // Execute callback
 86 |               if (config && config.onUpdate) {
 87 |                 config.onUpdate(registration);
 88 |               }
 89 |             } else {
 90 |               // At this point, everything has been precached.
 91 |               // It's the perfect time to display a
 92 |               // "Content is cached for offline use." message.
 93 |               console.log('Content is cached for offline use.');
 94 | 
 95 |               // Execute callback
 96 |               if (config && config.onSuccess) {
 97 |                 config.onSuccess(registration);
 98 |               }
 99 |             }
100 |           }
101 |         };
102 |       };
103 |     })
104 |     .catch(error => {
105 |       console.error('Error during service worker registration:', error);
106 |     });
107 | }
108 | 
109 | function checkValidServiceWorker(swUrl: string, config?: Config) {
110 |   // Check if the service worker can be found. If it can't reload the page.
111 |   fetch(swUrl)
112 |     .then(response => {
113 |       // Ensure service worker exists, and that we really are getting a JS file.
114 |       const contentType = response.headers.get('content-type');
115 |       if (
116 |         response.status === 404 ||
117 |         (contentType != null && contentType.indexOf('javascript') === -1)
118 |       ) {
119 |         // No service worker found. Probably a different app. Reload the page.
120 |         navigator.serviceWorker.ready.then(registration => {
121 |           registration.unregister().then(() => {
122 |             window.location.reload();
123 |           });
124 |         });
125 |       } else {
126 |         // Service worker found. Proceed as normal.
127 |         registerValidSW(swUrl, config);
128 |       }
129 |     })
130 |     .catch(() => {
131 |       console.log(
132 |         'No internet connection found. App is running in offline mode.'
133 |       );
134 |     });
135 | }
136 | 
137 | export function unregister() {
138 |   if ('serviceWorker' in navigator) {
139 |     navigator.serviceWorker.ready.then(registration => {
140 |       registration.unregister();
141 |     });
142 |   }
143 | }
144 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowJs": false,
 4 |     "allowSyntheticDefaultImports": true,
 5 |     "alwaysStrict": true,
 6 |     "esModuleInterop": true,
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "isolatedModules": true,
 9 |     "jsx": "react",
10 |     "lib": [
11 |       "dom",
12 |       "dom.iterable",
13 |       "esnext"
14 |     ],
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "noEmit": true,
18 |     "noImplicitAny": true,
19 |     "noImplicitThis": true,
20 |     "plugins": [{
21 |       "name": "typescript-styled-plugin",
22 |       "validate": false
23 |     }],
24 |     "resolveJsonModule": true,
25 |     "skipLibCheck": true,
26 |     "strict": true,
27 |     "strictPropertyInitialization": true,
28 |     "target": "ES2018"
29 |   },
30 |   "include": [
31 |     "src"
32 |   ]
33 | }


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