add boilerplate (try 2)

.env.example

@@ -0,0 +1 @@
+ENV=

.eslintrc.json

@@ -0,0 +1,54 @@
+{
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"]
+    }
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "sort-imports": [
+      0,
+      {
+        "ignoreCase": true,
+        "allowSeparatedGroups": true,
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
+      }
+    ],
+    "@typescript-eslint/no-explicit-any": ["warn"],
+    "@typescript-eslint/no-inferrable-types": [0],
+    "indent": [
+      "error",
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "linebreak-style": ["warn", "unix"],
+    "quotes": ["error", "double", { "avoidEscape": true }],
+    "semi": ["error", "always"]
+  }
+}

.gitignore

@@ -0,0 +1,13 @@
+# dependencies
+/node_modules
+
+# production
+/build
+
+# misc
+.DS_Store
+env/local.env
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.husky/pre-commit

@@ -0,0 +1,10 @@
+#!/bin/sh
+STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM)
+
+if [[ "$STAGED_FILES" = "" ]]; then
+  echo "No files staged for commit"
+  exit 1
+fi
+
+echo "Valiidating Typescript..."
+npm run lint -- --max-warnings 0

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+omit=peer

env/dev.env

@@ -0,0 +1 @@
+ENV=dev

env/prod.env

@@ -0,0 +1 @@
+ENV=prod

package.json

@@ -0,0 +1,70 @@
+{
+  "name": "frontend-boilerplate",
+  "version": "0.1.0",
+  "author": "Branden K Siegle <branden.siegle@outlook.com>",
+  "description": "Basic boilerplate for a Typescript React project",
+  "engines": {
+    "npm": ">=8",
+    "node": ">=16 <17"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "scripts": {
+    "start-local": "webpack serve --config webpack.config.ts",
+    "start-dev": "BUILD_ENV=DEV webpack serve --config webpack.config.ts",
+    "build-local": "BUILD_ENV=LOCAL webpack --config webpack.config.ts",
+    "build-dev": "BUILD_ENV=DEV webpack --config webpack.config.ts",
+    "build-prod": "BUILD_ENV=PROD webpack --config webpack.config.ts",
+    "lint": "eslint src",
+    "prepare": "husky install"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^5.5.0",
+    "@types/dotenv-webpack": "^7.0.3",
+    "@types/node": "^12.20.25",
+    "@types/react": "^17.0.21",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.1.9",
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-env": "^1.16.2",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
+    "copy-webpack-plugin": "^10.2.0",
+    "css-loader": "^5.1.2",
+    "dotenv-webpack": "^7.0.2",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react": "^7.26.1",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "husky": "^7.0.0",
+    "style-loader": "^2.0.0",
+    "ts-loader": "^8.0.18",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.4.4",
+    "webpack": "^5.30.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.4.0"
+  },
+  "resolutions": {
+    "@types/webpack": "^5.28.0"
+  }
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

src/App.tsx

@@ -0,0 +1,7 @@
+import { ENV } from "./constants/env";
+
+const App = () => {
+  return <span>My {ENV} App</span>;
+};
+
+export default App;

src/constants/env.ts

@@ -0,0 +1 @@
+export const ENV: string = process.env.ENV || "dev";

src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
+    <title>Typescript React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

src/index.tsx

@@ -0,0 +1,8 @@
+import ReactDOM from "react-dom";
+import App from "./App";
+
+const Index = () => {
+  return <App />;
+};
+
+ReactDOM.render(<Index />, document.getElementById("root"));

tsconfig.json

@@ -0,0 +1,71 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ] /* Specify library files to be included in the compilation. */,
+    "allowJs": true /* Allow javascript files to be compiled. */,
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true /* Generates corresponding '.map' file. */,
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
+    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+    /* Strict Type-Checking Options */
+    "strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
+    /* Module Resolution Options */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "resolveJsonModule": true,
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    /* Advanced Options */
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+    "types": ["node", "webpack-env"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "build"]
+}

webpack.config.ts

@@ -0,0 +1,133 @@
+import path from "path";
+import { Configuration as WebpackConfiguration } from "webpack";
+import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
+import Dotenv from "dotenv-webpack";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import CopyWebpackPlugin from "copy-webpack-plugin";
+
+interface Configuration extends WebpackConfiguration {
+  devServer?: WebpackDevServerConfiguration;
+}
+
+const BUILD_ENV: string = process.env.BUILD_ENV || "LOCAL";
+const LOCAL_PORT: string | number = process.env.LOCAL_PORT || 3000;
+const SERVE_LOCAL: boolean =
+  process.env.WEBPACK_SERVE !== undefined &&
+  process.env.WEBPACK_SERVE.toUpperCase() === "TRUE";
+
+/**
+ * Config for running local development server
+ */
+const getDevServerConfig = (): WebpackDevServerConfiguration => {
+  const devServerConfig: WebpackDevServerConfiguration = {
+    static: path.join(__dirname, "build"),
+    allowedHosts: ["all"],
+    compress: true,
+    port: LOCAL_PORT,
+    hot: true,
+    historyApiFallback: true,
+  };
+
+  console.log("Starting Development server with the following configuration:");
+  console.log(devServerConfig);
+
+  return devServerConfig;
+};
+
+console.info(`Building application for environment ${BUILD_ENV}`);
+
+const baseConfig: Configuration = {
+  entry: {
+    app: path.join(__dirname, "src", "index.tsx"),
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: "ts-loader",
+      },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.m?js/,
+        resolve: {
+          fullySpecified: false,
+        },
+      },
+      {
+        test: /\.svg$/,
+        use: ["@svgr/webpack"],
+      },
+    ],
+  },
+
+  output: {
+    publicPath: "/",
+    filename: "[name].js",
+    path: path.join(__dirname, "build/"),
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, "src", "index.html"),
+      chunks: ["app"],
+    }),
+    new CopyWebpackPlugin({
+      patterns: [{ from: "public" }],
+    }),
+  ],
+
+  resolve: {
+    extensions: [".tsx", ".ts", ".js", ".jsx"],
+  },
+
+  target: "web",
+};
+
+if (!baseConfig.plugins) throw new Error("No plugins array!");
+
+switch (BUILD_ENV) {
+  case "LOCAL":
+    baseConfig.devtool = "source-map";
+    baseConfig.mode = "development";
+    baseConfig.plugins.push(
+      new Dotenv({
+        safe: true,
+        allowEmptyValues: false,
+        path: "./env/local.env", // load this now instead of the ones in '.env'
+      })
+    );
+
+    if (SERVE_LOCAL) baseConfig.devServer = getDevServerConfig();
+
+    break;
+
+  case "DEV":
+    baseConfig.devtool = "source-map";
+    baseConfig.mode = "development";
+    baseConfig.plugins.push(
+      new Dotenv({
+        path: "./env/development.env", // load this now instead of the ones in '.env'
+      })
+    );
+
+    if (SERVE_LOCAL) baseConfig.devServer = getDevServerConfig();
+
+    break;
+
+  case "PROD":
+    baseConfig.plugins.push(
+      new Dotenv({
+        path: "./env/production.env", // load this now instead of the ones in '.env'
+      })
+    );
+
+    baseConfig.mode = "production";
+
+    break;
+}
+
+export default baseConfig;