diff --git a/config/webpack-config/client/client.base.js b/config/webpack-config/client/client.base.js
index 871971e6..e00f953f 100644
--- a/config/webpack-config/client/client.base.js
+++ b/config/webpack-config/client/client.base.js
@@ -9,7 +9,7 @@ module.exports = {
   name: 'client',
   target: 'web',
   entry: {
-    bundle: [`${paths.srcClient}/index.js`],
+    bundle: [`${paths.srcClient}/index.tsx`],
   },
   output: {
     path: path.join(paths.clientBuild, paths.publicPath),
diff --git a/config/webpack-config/loaders.js b/config/webpack-config/loaders.js
index d062c7f3..d0c2c62c 100644
--- a/config/webpack-config/loaders.js
+++ b/config/webpack-config/loaders.js
@@ -1,15 +1,14 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-const generateSourceMap = process.env.OMIT_SOURCEMAP === 'true' ? false : true;
+const generateSourceMap = process.env.OMIT_SOURCEMAP !== 'true';
 
-// const cssRegex = /\.css$/;
-// const cssModuleRegex = /\.module\.css$/;
-const jsRegex = /\.(js|jsx|mjs)$/;
+const jsRegex = /\.(js|mjs|jsx|ts|tsx)$/;
 const scssRegex = /\.(sa|sc|c)ss$/;
 
 const eslintLoader = {
   enforce: 'pre',
-  test: jsRegex,
+  test: /\.tsx?$/,
   loader: 'eslint-loader',
   exclude: /node_modules/,
 };
@@ -36,7 +35,6 @@ const cssLoaderClient = {
       loader: require.resolve('postcss-loader'),
       options: {
         sourceMap: generateSourceMap,
-
       },
     },
     {
@@ -102,23 +100,13 @@ const fileLoaderServer = {
 const client = [
   eslintLoader,
   {
-    oneOf: [
-      babelLoader,
-      cssLoaderClient,
-      urlLoaderClient,
-      fileLoaderClient,
-    ],
+    oneOf: [babelLoader, cssLoaderClient, urlLoaderClient, fileLoaderClient],
   },
 ];
 const server = [
   eslintLoader,
   {
-    oneOf: [
-      babelLoader,
-      cssLoaderServer,
-      urlLoaderServer,
-      fileLoaderServer,
-    ],
+    oneOf: [babelLoader, cssLoaderServer, urlLoaderServer, fileLoaderServer],
   },
 ];
 
diff --git a/config/webpack-config/resolvers.js b/config/webpack-config/resolvers.js
index aed623b4..763d8398 100644
--- a/config/webpack-config/resolvers.js
+++ b/config/webpack-config/resolvers.js
@@ -2,11 +2,11 @@
 const paths = require('../paths');
 
 module.exports = {
-  extensions: ['.js', '.mjs', '.json', '.jsx', '.css'],
+  extensions: ['.js', '.mjs', '.json', '.jsx', '.css', '.ts', '.tsx'],
   modules: paths.resolveModules,
   alias: {
-    api$: `${paths.srcApp}/api/api.js`,
-    '@': paths.srcApp,
+    api$: `${paths.srcApp}/api/api.tsx`,
+    '~': paths.srcApp,
     styles: `${paths.srcApp}/assets/scss`,
     // @link https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977
     'react-dom$': 'react-dom/profiling',
diff --git a/config/webpack-config/server/server.base.js b/config/webpack-config/server/server.base.js
index 7008a14f..8a7ae17f 100644
--- a/config/webpack-config/server/server.base.js
+++ b/config/webpack-config/server/server.base.js
@@ -11,7 +11,7 @@ module.exports = {
   name: 'server',
   target: 'node',
   entry: {
-    server: [path.resolve(paths.srcServer, 'index.js')],
+    server: [path.resolve(paths.srcServer, 'index.tsx')],
   },
   externals: [
     nodeExternals({