add frontend with react, typescript, webpack, babel

tanqiuliu · Apr 6, 2020 · e9bd447 · e9bd447
1 parent 2a952f7
commit e9bd447
Show file tree

Hide file tree

Showing 10 changed files with 330 additions and 0 deletions.
diff --git a/frontend/.babelrc b/frontend/.babelrc
@@ -0,0 +1,11 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-typescript",
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        "@babel/proposal-class-properties",
+        "@babel/proposal-object-rest-spread"
+    ]
+}
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,4 @@
+/node_modules
+package-lock.json
+/dist
+.idea/
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "react-typescript-boilerplate",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "bundle": "webpack",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --port 3000 --mode development --open --hot",
+    "build": "webpack --mode production",
+    "check-types": "tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/davinchee/react-typescript-boilerplate.git"
+  },
+  "author": "Vincent Chee",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/davinchee/react-typescript-boilerplate/issues"
+  },
+  "homepage": "https://github.com/davinchee/react-typescript-boilerplate#readme",
+  "devDependencies": {
+    "@babel/core": "7.2.2",
+    "@babel/plugin-proposal-class-properties": "7.3.0",
+    "@babel/plugin-proposal-object-rest-spread": "7.3.1",
+    "@babel/preset-env": "7.3.1",
+    "@babel/preset-react": "7.0.0",
+    "@babel/preset-typescript": "7.1.0",
+    "@types/react": "16.7.22",
+    "@types/react-dom": "16.0.11",
+    "babel-loader": "8.0.5",
+    "css-loader": "2.1.0",
+    "html-webpack-plugin": "3.2.0",
+    "style-loader": "0.23.1",
+    "tslint": "5.12.1",
+    "tslint-immutable": "5.1.2",
+    "typescript": "3.2.4",
+    "webpack": "4.29.0",
+    "webpack-cli": "3.2.1",
+    "webpack-dev-server": "3.1.14"
+  },
+  "dependencies": {
+    "react": "16.7.0",
+    "react-dom": "16.7.0"
+  }
+}
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import '../styles/index.css';
+
+export interface IAppProps {}
+
+export interface IAppState {}
+
+class App extends React.PureComponent<IAppProps, IAppState> {
+	render() {
+		return (
+			<div>
+				<h1>Hello World!</h1>
+			</div>
+		);
+	}
+}
+
+export default App;
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>React TypeScript Boilerplate</title>
+</head>
+
+<body>
+    <div id="root">
+
+    </div>
+</body>
+
+</html>
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
@@ -0,0 +1,4 @@
+h1 {
+    color: #27aedb;
+    text-align: center;
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -0,0 +1,42 @@
+{
+	"compilerOptions": {
+		// Target latest version of ECMAScript.
+		"target": "esnext",
+		// path to output directory
+		"outDir": "./dist/",
+		// enable strict null checks as a best practice
+		"strictNullChecks": true,
+		// Search under node_modules for non-relative imports.
+		"moduleResolution": "node",
+		// Process & infer types from .js files.
+		"allowJs": true,
+		// Don't emit; allow Babel to transform files.
+		"noEmit": true,
+		// Enable strictest settings like strictNullChecks & noImplicitAny.
+		"strict": true,
+		// Import non-ES modules as default imports.
+		"esModuleInterop": true,
+		// use typescript to transpile jsx to js
+		"jsx": "react",
+		"baseUrl": "./src",
+		"lib": [
+			"es2015",
+			"dom.iterable",
+			"es2016.array.include",
+			"es2017.object",
+			"dom"
+		],
+		"module": "es6",
+		"removeComments": true,
+		"alwaysStrict": true,
+		"allowUnreachableCode": false,
+		"noImplicitAny": true,
+		"noImplicitThis": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+		"forceConsistentCasingInFileNames": true,
+		"importHelpers": true
+	},
+}
diff --git a/frontend/tslint.json b/frontend/tslint.json
@@ -0,0 +1,148 @@
+{
+	"extends": [
+		"tslint-immutable"
+	],
+	"rules": {
+		"no-var-keyword": true,
+		"no-parameter-reassignment": true,
+		"typedef": false,
+		"readonly-keyword": false,
+		"readonly-array": false,
+		"no-let": false,
+		"no-array-mutation": true,
+		"no-object-mutation": false,
+		"no-this": false,
+		"no-class": false,
+		"no-mixed-interface": false,
+		"no-expression-statement": false,
+		"member-ordering": [
+			true,
+			"variables-before-functions"
+		],
+		"no-any": false,
+		"no-inferrable-types": [
+			false
+		],
+		"no-internal-module": true,
+		"no-var-requires": false,
+		"typedef-whitespace": [
+			true,
+			{
+				"call-signature": "nospace",
+				"index-signature": "nospace",
+				"parameter": "nospace",
+				"property-declaration": "nospace",
+				"variable-declaration": "nospace"
+			},
+			{
+				"call-signature": "space",
+				"index-signature": "space",
+				"parameter": "space",
+				"property-declaration": "space",
+				"variable-declaration": "space"
+			}
+		],
+		"ban": false,
+		"curly": false,
+		"forin": true,
+		"label-position": true,
+		"no-arg": true,
+		"no-bitwise": false,
+		"no-conditional-assignment": true,
+		"no-console": [
+			true,
+			"info",
+			"time",
+			"timeEnd",
+			"trace"
+		],
+		"no-construct": true,
+		"no-debugger": true,
+		"no-duplicate-variable": true,
+		"no-empty": false,
+		"no-eval": true,
+		"strictPropertyInitialization": false,
+		"no-null-keyword": false,
+		"no-shadowed-variable": false,
+		"no-string-literal": false,
+		"no-switch-case-fall-through": true,
+		"no-unused-expression": [
+			true,
+			"allow-fast-null-checks"
+		],
+		"no-use-before-declare": true,
+		"radix": true,
+		"switch-default": true,
+		"triple-equals": [
+			true,
+			"allow-undefined-check",
+			"allow-null-check"
+		],
+		"eofline": false,
+		"indent": [
+			true,
+			"tabs"
+		],
+		"max-line-length": [
+			true,
+			250
+		],
+		"no-require-imports": false,
+		"no-trailing-whitespace": true,
+		"object-literal-sort-keys": false,
+		"trailing-comma": [
+			true,
+			{
+				"multiline": "never",
+				"singleline": "never"
+			}
+		],
+		"align": [
+			true
+		],
+		"class-name": true,
+		"comment-format": [
+			true,
+			"check-space"
+		],
+		"interface-name": [
+			false
+		],
+		"jsdoc-format": true,
+		"no-consecutive-blank-lines": [
+			true
+		],
+		"no-parameter-properties": false,
+		"one-line": [
+			true,
+			"check-open-brace",
+			"check-catch",
+			"check-else",
+			"check-finally",
+			"check-whitespace"
+		],
+		"quotemark": [
+			true,
+			"single",
+			"avoid-escape"
+		],
+		"semicolon": [
+			true,
+			"always"
+		],
+		"variable-name": [
+			false,
+			"check-format",
+			"allow-leading-underscore",
+			"ban-keywords"
+		],
+		"whitespace": [
+			true,
+			"check-branch",
+			"check-decl",
+			"check-operator",
+			"check-separator",
+			"check-type"
+		]
+	}
+}
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
@@ -0,0 +1,33 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './src/index',
+  output: {
+    path: path.join(__dirname, '/dist'),
+    filename: 'bundle.js'
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|js)x?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader'
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ]
+};