Merge pull request #124 from scout-ch/configure-react-from-scratch

Configure react from scratch

.github/workflows/deploy.yml

@@ -52,7 +52,7 @@ jobs:
       - uses: actions/upload-artifact@v3
         with:
           name: build-cache
-          path: ./build
+          path: ./dist
 
   deploy:
     name: Deploy Thilo App
@@ -64,8 +64,8 @@ jobs:
       - uses: actions/download-artifact@v3
         with:
           name: build-cache
-          path: ./build
+          path: ./dist
       - uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build
+          publish_dir: ./dist

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

README.md

@@ -58,3 +58,55 @@ Bei Fragen kannst du dich an die Betreuungskommission (inhaltlich) oder die IT K
 
 ## Production
 The frontend is deployed to GitHub pages.
+
+
+# React Template: adapted from https://github.com/CreativeTechGuy/ReactTemplate
+
+This repository exists as a starting point for a new React 18 application (with hooks). The build system, testing, linting, formatting, compiling, spellchecking and more are all pre-configured.
+
+This repository should be generic enough that most people can use it out of the box. It comes with an existing "hello world" application which you can build and run right away.
+
+It also includes all of the nice-to-haves to ensure that you code is high quality and follows best practices. This is very helpful for a beginner who needs nudges in the right direction but also helps an expert focus on the higher level problems and not worry about missing smaller errors.
+
+## Setup
+
+-   Be sure you have [Node 16+ installed](https://nodejs.org/en/download/)
+-   If you are on Windows, you probably want to be using either [GitBash which comes with Git](https://git-scm.com/download/win) or [WSL](https://docs.microsoft.com/en-us/windows/wsl/install).
+-   Run `npm ci` to install dependencies
+-   Run `npm run start` to start the dev server and visit the link provided in the terminal to view it in your browser
+
+## Core Dependencies Included
+
+-   [React](https://reactjs.org/docs/getting-started.html) (JavaScript UI framework)
+-   [Webpack](https://webpack.js.org/) (Asset bundling)
+-   [TypeScript](https://www.typescriptlang.org/docs/handbook/intro.html) (JavaScript with Types)
+-   [Babel](https://babeljs.io/docs/en/) (Transpiling JavaScript for older browsers)
+-   [ESLint](https://eslint.org/) (Identifying and reporting errors in code)
+-   [Prettier](https://prettier.io/docs/en/index.html) (Code formatter)
+-   [CSpell](https://github.com/streetsidesoftware/cspell) (Code Spellchecker)
+-   [SCSS](https://sass-lang.com/guide) (Enhanced CSS)
+-   [Jest](https://jestjs.io/docs/en/getting-started) (Unit test framework)
+-   [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) (React unit test utilities)
+-   [Husky](https://typicode.github.io/husky) (Git hooks - run commands on commit)
+
+## NPM scripts
+
+This repo assumes you are using Node 16+ and NPM 7+.
+
+-   `npm clean-install` - install all dependencies. _Do this first before anything else_
+-   `npm run start` - starts a local server which can be accessed at http://localhost:7579. As long as this server is running it'll auto refresh whenever you save changes.
+-   `npm run release` - creates a release build of your application. All output files will be located in the dist folder. This also runs all of the checks to ensure the code works, is formatted, etc.
+-   `npm run bundle-analysis` - opens a bundle analysis UI showing the file size of each dependency in your output JavaScript bundle.
+-   `npm run lint` - runs ESLint enforcing good coding style and habits and erroring if any are broken.
+    -   `npm run lint:fix` - fixes any auto-fixable ESLint errors
+-   `npm run format` - runs Prettier to reformat all files
+-   `npm run ts-check` - runs the TypeScript compiler to see TypeScript errors
+-   `npm run spellcheck` - runs CSpell to see any typos. If the word is misidentified, add it to `cspell.json`.
+-   `npm run test` - runs Jest and all unit tests
+-   `npm run clean` - removes all auto-generated files and dependencies
+-   `npm run list-outdated-dependencies` - lists the dependencies that have newer versions available with links to their repository and changelog
+-   `npm run update-dependencies` - update and install all outdated dependencies
+
+## Why use this instead of create-react-app?
+
+Tools like create-react-app bring everything and the kitchen sink when setting up a new project. They are great to start quickly, but as soon as you want to customize or understand how it all works you'll have trouble. My goal is to expose all of the tools and show how easy it can be to configure from scratch. This makes it easier to debug and tweak settings to fit your needs.

babel.config.js

@@ -0,0 +1,48 @@
+/* eslint-env node */
+
+module.exports = (api) => {
+    const isTest = api.env("test");
+    const isDev = api.env("development");
+    return {
+        plugins: [...(isDev ? ["react-refresh/babel"] : [])],
+        presets: [
+            [
+                "@babel/env",
+                {
+                    bugfixes: true,
+                    useBuiltIns: "usage",
+                    corejs: 3,
+                    shippedProposals: true,
+                    ...(isTest
+                        ? {
+                              targets: {
+                                  node: "current",
+                              },
+                          }
+                        : {}),
+                },
+            ],
+            [
+                "@babel/react",
+                {
+                    useBuiltIns: true,
+                    runtime: "automatic",
+                },
+            ],
+            [
+                "@babel/typescript",
+                {
+                    allowDeclareFields: true,
+                    onlyRemoveTypeImports: true,
+                },
+            ],
+        ],
+        retainLines: isTest,
+        assumptions: {
+            ignoreFunctionLength: true,
+            constantReexports: true,
+            noClassCalls: true,
+            noDocumentAll: true,
+        },
+    };
+};

cspell.json

@@ -0,0 +1,11 @@
+{
+    "version": "0.2",
+    "words": ["browserconfig", "corejs", "lcov", "loglevel", "msapplication", "mstile", "transpiling"],
+    "ignorePaths": ["package.json", "package-lock.json"],
+    "useGitignore": true,
+    "validateDirectives": true,
+    "cache": {
+        "useCache": true,
+        "cacheLocation": "./node_modules/.cache/cspell/.cspell"
+    }
+}

jest.config.js

@@ -0,0 +1,39 @@
+/* eslint-env node */
+
+const inspector = require("inspector");
+const isDebuggerAttached = inspector.url() !== undefined;
+
+module.exports = {
+    restoreMocks: true,
+    collectCoverage: true,
+    collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
+    coverageDirectory: "coverage",
+    coverageReporters: ["text-summary", "lcov"],
+    coverageThreshold: {
+        global: {
+            branches: 100,
+            functions: 100,
+            lines: 100,
+            statements: 100,
+        },
+    },
+    errorOnDeprecated: true,
+    moduleNameMapper: {
+        "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+        "test/(.*)$": "<rootDir>/test/$1",
+        "~/(.*)$": "<rootDir>/src/$1",
+    },
+    transform: {
+        "\\.[jt]sx?$": "babel-jest",
+        "\\.(jpg|jpeg|png|gif|webp|svg|bmp|woff|woff2|ttf)$": "<rootDir>/test/transformers/importPathTransformer.js",
+    },
+    setupFilesAfterEnv: ["<rootDir>/test/setup.ts"],
+    globalTeardown: "<rootDir>/test/teardown.ts",
+    fakeTimers: {
+        enableGlobally: true,
+    },
+    verbose: true,
+    testEnvironment: "jsdom",
+    testTimeout: isDebuggerAttached ? 10000000 : 5000,
+    randomize: true,
+};

lint-staged.config.js

@@ -0,0 +1,20 @@
+/* eslint-env node */
+
+const path = require("path");
+
+module.exports = {
+    "*.{js,ts,jsx,tsx,json,html,xml,svg,css,scss,sass,md}": "cspell --no-progress --no-must-find-files",
+    "*.{js,ts,jsx,tsx}": "eslint --max-warnings 0 --fix",
+    "*": "prettier --write --ignore-unknown --loglevel warn",
+    "src/**/*.{js,ts,jsx,tsx}": (paths) => {
+        const relativePaths = paths.map((filePath) =>
+            path.relative(__dirname, filePath).split(path.sep).join(path.posix.sep)
+        );
+        // Running unit tests is the largest contributor to the speed of a commit.
+        // If you are running all of your validations in PR before merging then remove this and depend on PR checks.
+        // This is only useful if you are directly pushing code and not creating PRs.
+        return `jest --runInBand --bail --collectCoverageFrom '(${relativePaths.join(
+            "|"
+        )})' --coverage --findRelatedTests ${paths.join(" ")}`;
+    },
+};