UBC/Alley-HSBC-Frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upload boilerplate files

Browse Source
This commit is contained in:
Mathew Balsdon 2022-02-16 19:00:29 -08:00 committed by GitHub
parent 289c084c1c
commit 8e91a0ae8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 16366 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
env/dev.env vendored Normal file
View File

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

1
env/prod.env vendored Normal file
View File

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

16061
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

70
package.json Normal file
View File

@ -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"
}
}

BIN
public/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

2
public/robots.txt Normal file
View File

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

7
src/App.tsx Normal file
View File

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

1
src/constants/env.ts Normal file
View File

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

11
src/index.html Normal file
View File

@ -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>

8
src/index.tsx Normal file
View File

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

71
tsconfig.json Normal file
View File

@ -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"]
}

133
webpack.config.ts Normal file
View File

@ -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;