ModDota · SinZ163 · Jun 22, 2019 · Jun 22, 2019
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,10 @@
+{
+    "presets": [
+        "@babel/env",
+        "@babel/typescript",
+        "@babel/react"
+    ],
+    "plugins": [
+        "@babel/plugin-transform-typescript"
+    ]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,26 @@
+module.exports = {
+    parser: "@typescript-eslint/parser",  // Specifies the ESLint parser
+    plugins: [
+        "prettier",
+    ],
+    extends: [
+        "plugin:@typescript-eslint/recommended",  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+        "plugin:prettier/recommended",
+        "plugin:react/recommended",
+        "prettier/react",
+    ],
+    parserOptions: {
+        ecmaVersion: 2018,  // Allows for the parsing of modern ECMAScript features
+        sourceType: "module",  // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true,
+        }
+    },
+    rules: {
+        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+        "prettier/prettier": "error",
+        "@typescript-eslint/indent": "off",
+        "@typescript-eslint/explicit-function-return-type": "off",
+    },
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "singleQuote": false
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "MDForum",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/ModDota/MDForum",
+  "author": "ModDota",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/plugin-transform-typescript": "^7.4.5",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.3.3",
+    "@types/react": "^16.8.22",
+    "@types/react-dom": "^16.8.4",
+    "@types/react-router-dom": "^4.3.4",
+    "@types/styled-components": "^4.1.16",
+    "@typescript-eslint/eslint-plugin": "^1.10.2",
+    "@typescript-eslint/parser": "^1.10.2",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "eslint": "5.0.0",
+    "eslint-config-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.13.0",
+    "html-webpack-plugin": "^3.2.0",
+    "ts-loader": "^6.0.4",
+    "typescript": "^3.5.2",
+    "webpack": "^4.35.0",
+    "webpack-cli": "^3.3.4",
+    "webpack-dev-server": "^3.7.2"
+  },
+  "dependencies": {
+    "@babel/core": "^7.4.5",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
+    "styled-components": "^4.3.2"
+  },
+  "description": "My webpack project",
+  "scripts": {
+    "build": "yarn run webpack",
+    "start": "yarn run webpack-dev-server"
+  }
+}
diff --git a/public/logo.png b/public/logo.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import styled from "styled-components";
+
+const Title = styled.div`
+    font-size: 20pt;
+    color: ${props => props.theme.primary};
+`;
+export default class App extends React.Component {
+    public render() {
+        return (
+            <React.Fragment>
+                <Title>ModDota Forums</Title>
+                <img src="/static/logo.png" />
+            </React.Fragment>
+        );
+    }
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>Webpack App</title>
+</head>
+
+<body>
+    <div id="root"></div>
+</body>
+
+</html>
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { ThemeProvider } from "styled-components";
+import { BrowserRouter } from "react-router-dom";
+
+import App from "./App";
+
+const theme = {
+    primary: "#ff0000",
+    secondary: "#ffff00",
+};
+
+ReactDOM.render(
+    <ThemeProvider theme={theme}>
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
+    </ThemeProvider>,
+    document.getElementById("root")
+);
diff --git a/src/styled.d.ts b/src/styled.d.ts
@@ -0,0 +1,8 @@
+import "styled-components";
+
+declare module "styled-comonents" {
+    export interface DefaultTheme {
+        primary: string;
+        secondary: string;
+    }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "noImplicitAny": true,
+        "moduleResolution": "node",
+        "module": "es6",
+        "target": "es5",
+        "allowJs": true,
+        "jsx": "react",
+    },
+    "include": ["src/*"],
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+    mode: "development",
+    entry: "./src/index",
+    output: {
+        path: path.resolve(__dirname, "dist"),
+        filename: "bundle.js",
+    },
+    resolve: {
+        extensions: [".ts", ".tsx", ".js", ".json"],
+    },
+    module: {
+        rules: [
+            {
+                // Include ts, tsx, and js files.
+                test: /\.(tsx?)|(js)$/,
+                exclude: /node_modules/,
+                loader: "babel-loader",
+            },
+        ],
+    },
+    devServer: {
+        contentBase: path.join(__dirname, "public"),
+        proxy: {
+            // Doing this so we feel like we are using a /static route when we actually aren't
+            "/static": {
+                target: "http://localhost:8080",
+                pathRewrite: { "^/static": "" },
+            },
+        },
+        compress: true,
+        historyApiFallback: true,
+    },
+    plugins: [new HtmlWebpackPlugin({ template: "src/index.html" })],
+};