From e9bd447a6ae03e0e9458178e2627a98d65f7672e Mon Sep 17 00:00:00 2001 From: tanqiul Date: Sun, 5 Apr 2020 20:56:31 -0700 Subject: [PATCH] add frontend with react, typescript, webpack, babel --- frontend/.babelrc | 11 +++ frontend/.gitignore | 4 + frontend/package.json | 47 ++++++++++ frontend/src/components/App.tsx | 19 ++++ frontend/src/index.html | 17 ++++ frontend/src/index.tsx | 5 ++ frontend/src/styles/index.css | 4 + frontend/tsconfig.json | 42 +++++++++ frontend/tslint.json | 148 ++++++++++++++++++++++++++++++++ frontend/webpack.config.js | 33 +++++++ 10 files changed, 330 insertions(+) create mode 100644 frontend/.babelrc create mode 100644 frontend/.gitignore create mode 100644 frontend/package.json create mode 100644 frontend/src/components/App.tsx create mode 100644 frontend/src/index.html create mode 100644 frontend/src/index.tsx create mode 100644 frontend/src/styles/index.css create mode 100644 frontend/tsconfig.json create mode 100644 frontend/tslint.json create mode 100644 frontend/webpack.config.js diff --git a/frontend/.babelrc b/frontend/.babelrc new file mode 100644 index 0000000..2961d01 --- /dev/null +++ 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" + ] +} \ No newline at end of file diff --git a/frontend/.gitignore b/frontend/.gitignore new file mode 100644 index 0000000..14c53ce --- /dev/null +++ b/frontend/.gitignore @@ -0,0 +1,4 @@ +/node_modules +package-lock.json +/dist +.idea/ \ No newline at end of file diff --git a/frontend/package.json b/frontend/package.json new file mode 100644 index 0000000..3b801d0 --- /dev/null +++ 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 new file mode 100644 index 0000000..3b7498b --- /dev/null +++ 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 { + render() { + return ( +
+

Hello World!

+
+ ); + } +} + +export default App; \ No newline at end of file diff --git a/frontend/src/index.html b/frontend/src/index.html new file mode 100644 index 0000000..b9b87ce --- /dev/null +++ b/frontend/src/index.html @@ -0,0 +1,17 @@ + + + + + + + + React TypeScript Boilerplate + + + +
+ +
+ + + \ No newline at end of file diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx new file mode 100644 index 0000000..60025fa --- /dev/null +++ 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(, document.getElementById('root')); \ No newline at end of file diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css new file mode 100644 index 0000000..b5f42b9 --- /dev/null +++ b/frontend/src/styles/index.css @@ -0,0 +1,4 @@ +h1 { + color: #27aedb; + text-align: center; +} \ No newline at end of file diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json new file mode 100644 index 0000000..56f51af --- /dev/null +++ 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 + }, +} \ No newline at end of file diff --git a/frontend/tslint.json b/frontend/tslint.json new file mode 100644 index 0000000..52f402d --- /dev/null +++ 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" + ] + } +} \ No newline at end of file diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js new file mode 100644 index 0000000..e59b253 --- /dev/null +++ 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' + }) + ] +}; \ No newline at end of file