Support @-paths

configs/webpack/common.js

@@ -1,5 +1,6 @@
 // Shared config (dev and prod)
 const {resolve} = require("path");
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 const {CheckerPlugin} = require("awesome-typescript-loader");
 const StyleLintPlugin = require("stylelint-webpack-plugin");
 const webpack = require('webpack');
@@ -12,7 +13,8 @@ module.exports = function (env, argv) {
   };
 
   config.resolve = {
-    extensions: [".ts", ".tsx", ".js", ".jsx"]
+    extensions: [".ts", ".tsx", ".js", ".jsx"],
+    plugins: [new TsconfigPathsPlugin()]
   };
   config.context = resolve(__dirname, "../../src");
   config.module = {

package-lock.json

@@ -833,6 +833,12 @@
       "integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==",
       "dev": true
     },
+    "@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
+      "dev": true
+    },
     "@types/lodash": {
       "version": "4.14.146",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.146.tgz",
@@ -20330,6 +20336,46 @@
         "utf8-byte-length": "^1.0.1"
       }
     },
+    "tsconfig-paths": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz",
+      "integrity": "sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==",
+      "dev": true,
+      "requires": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.1",
+        "minimist": "^1.2.0",
+        "strip-bom": "^3.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        }
+      }
+    },
+    "tsconfig-paths-webpack-plugin": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-3.2.0.tgz",
+      "integrity": "sha512-S/gOOPOkV8rIL4LurZ1vUdYCVgo15iX9ZMJ6wx6w2OgcpT/G4wMyHB6WM+xheSqGMrWKuxFul+aXpCju3wmj/g==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.3.0",
+        "enhanced-resolve": "^4.0.0",
+        "tsconfig-paths": "^3.4.0"
+      }
+    },
     "tslib": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",

package.json

@@ -105,6 +105,7 @@
     "stylelint-webpack-plugin": "1.0.3",
     "testcafe": "1.6.1",
     "testcafe-react-selectors": "2.1.0",
+    "tsconfig-paths-webpack-plugin": "3.2.0",
     "typescript": "3.9.5",
     "uglifyjs-webpack-plugin": "1.3.0",
     "webpack": "4.41.2",

src/pages/FrontPage/FrontPage.tsx

@@ -1,21 +1,21 @@
 import React from "react";
 import "./FrontPage.scss";
-import appStore from "../../stores/AppStore";
-import Card from "../../components/Card";
-import { Event, getEvents } from "../../models/Event";
-import { Post, getFeed } from "../../models/Feed";
-import { StaticContext } from "../../server/StaticContext";
+import appStore from "@stores/AppStore";
+import Card from "@components/Card";
+import { Event, getEvents } from "@models/Event";
+import { Post, getFeed } from "@models/Feed";
+import { StaticContext } from "@server/StaticContext";
 
-import PageSection from "../../components/PageSection";
+import PageSection from "@components/PageSection";
 
-import PageLink from "../../components/PageLink/PageLink";
-import HeroMainSection from "../../components/Hero/HeroMainSection/HeroMainSection";
-import HeroAsideSection from "../../components/Hero/HeroAsideSection/HeroAsideSection";
-import Button, { ButtonType } from "../../components/Button";
-import Ribbon from "../../components/Ribbon";
-import SponsorReel from "../../components/SponsorReel";
-import HeroAsideItem from "../../components/Hero/HeroAsideItem/HeroAsideItem";
-import TextAnchor from "../../components/TextAnchor";
+import PageLink from "@components/PageLink/PageLink";
+import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection";
+import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection";
+import Button, { ButtonType } from "@components/Button";
+import Ribbon from "@components/Ribbon";
+import SponsorReel from "@components/SponsorReel";
+import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem";
+import TextAnchor from "@components/TextAnchor";
 
 interface FrontPageProps {
   staticContext: StaticContext;

tsconfig.json

@@ -18,7 +18,37 @@
     "types": [
       "node",
       "jest"
-    ]
+    ],
+    "baseUrl": "./",
+    "paths": {
+      "@assets/*": [
+        "src/assets/*"
+      ],
+      "@client/*": [
+        "src/client/*"
+      ],
+      "@components/*": [
+        "src/components/*"
+      ],
+      "@models/*": [
+        "src/models/*"
+      ],
+      "@pages/*": [
+        "src/pages/*"
+      ],
+      "@server/*": [
+        "src/server/*"
+      ],
+      "@stores/*": [
+        "src/stores/*"
+      ],
+      "@theme/*": [
+        "src/theme/*"
+      ],
+      "@views/*": [
+        "src/views/*"
+      ],
+    },
   },
   "include": [
     "./src/**/*",