diff --git a/examples/getstarted/src/admin/app.example.js b/examples/getstarted/src/admin/app.example.js
new file mode 100644
index 0000000000..0ea34bef7a
--- /dev/null
+++ b/examples/getstarted/src/admin/app.example.js
@@ -0,0 +1,9 @@
+const config = {
+  locales: ['fr'],
+};
+const bootstrap = () => {};
+
+export default {
+  config,
+  bootstrap,
+};
diff --git a/examples/getstarted/src/admin/app.js b/examples/getstarted/src/admin/app.js
deleted file mode 100644
index d5f38eb6b4..0000000000
--- a/examples/getstarted/src/admin/app.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  config: {
-    locales: ['fr'],
-  },
-  bootstrap() {},
-};
diff --git a/examples/getstarted/src/plugins/myplugin/admin/src/tsconfig.json b/examples/getstarted/src/plugins/myplugin/admin/src/tsconfig.json
deleted file mode 100644
index 3b80d2bd93..0000000000
--- a/examples/getstarted/src/plugins/myplugin/admin/src/tsconfig.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "noImplicitAny": false,
-    "module": "es6",
-    "target": "es5",
-    "jsx": "react",
-    "allowJs": true,
-    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true,
-    "noEmit": false,
-    "incremental": true
-  },
-  "exclude": ["node_modules", "**/*.test.js", "*.js"]
-}
diff --git a/examples/kitchensink/src/admin/app.tsx b/examples/kitchensink/src/admin/app.tsx
index f0fc63b427..7b1744d3ba 100644
--- a/examples/kitchensink/src/admin/app.tsx
+++ b/examples/kitchensink/src/admin/app.tsx
@@ -1,8 +1,9 @@
-import theme from './extensions/theme'
+import theme from './extensions/theme';
 
-const config =  {
+const config = {
   auth: {
-    logo: 'https://images.unsplash.com/photo-1593642634367-d91a135587b5?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80'
+    logo:
+      'https://images.unsplash.com/photo-1593642634367-d91a135587b5?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80',
   },
   head: {
     favicon:
@@ -26,11 +27,13 @@ const config =  {
   },
   tutorials: false,
   notifications: { release: false },
-}
+};
 
-const bootstrap = (app) => {}
+const bootstrap = (app: any) => {
+  console.log(app);
+};
 
 export default {
   config,
-  bootstrap
+  bootstrap,
 };
diff --git a/examples/kitchensink/src/admin/extensions/theme.js b/examples/kitchensink/src/admin/extensions/theme.js
deleted file mode 100644
index ad6e1eae5a..0000000000
--- a/examples/kitchensink/src/admin/extensions/theme.js
+++ /dev/null
@@ -1,47 +0,0 @@
-const theme = {
-  colors: {
-    alternative100: '#f6ecfc',
-    alternative200: '#e0c1f4',
-    alternative500: '#ac73e6',
-    alternative600: '#9736e8',
-    alternative700: '#8312d1',
-    danger100: '#fcecea',
-    danger200: '#f5c0b8',
-    danger500: '#ee5e52',
-    danger600: '#d02b20',
-    danger700: '#b72b1a',
-    neutral0: 'black',
-    neutral100: '#f6f6f9',
-    neutral150: '#eaeaef',
-    neutral200: '#dcdce4',
-    neutral300: '#c0c0cf',
-    neutral400: '#a5a5ba',
-    neutral500: '#8e8ea9',
-    neutral600: '#666687',
-    neutral700: '#4a4a6a',
-    neutral800: '#32324d',
-    neutral900: '#212134',
-    primary100: '#f0f0ff',
-    primary200: '#d9d8ff',
-    primary500: '#7b79ff',
-    primary600: '#4945ff',
-    primary700: '#271fe0',
-    secondary100: '#eaf5ff',
-    secondary200: '#b8e1ff',
-    secondary500: '#66b7f1',
-    secondary600: '#0c75af',
-    secondary700: '#006096',
-    success100: '#eafbe7',
-    success200: '#c6f0c2',
-    success500: '#5cb176',
-    success600: '#328048',
-    success700: '#2f6846',
-    warning100: '#fdf4dc',
-    warning200: '#fae7b9',
-    warning500: '#f29d41',
-    warning600: '#d9822f',
-    warning700: '#be5d01',
-  },
-};
-
-export default theme;
diff --git a/examples/kitchensink/src/admin/extensions/theme.ts b/examples/kitchensink/src/admin/extensions/theme.ts
new file mode 100644
index 0000000000..9bee861dc3
--- /dev/null
+++ b/examples/kitchensink/src/admin/extensions/theme.ts
@@ -0,0 +1,48 @@
+const colors: object = {
+  alternative100: '#f6ecfc',
+  alternative200: '#e0c1f4',
+  alternative500: '#ac73e6',
+  alternative600: '#9736e8',
+  alternative700: '#8312d1',
+  danger100: '#fcecea',
+  danger200: '#f5c0b8',
+  danger500: '#ee5e52',
+  danger600: '#d02b20',
+  danger700: '#b72b1a',
+  neutral0: 'black',
+  neutral100: '#f6f6f9',
+  neutral150: '#eaeaef',
+  neutral200: '#dcdce4',
+  neutral300: '#c0c0cf',
+  neutral400: '#a5a5ba',
+  neutral500: '#8e8ea9',
+  neutral600: '#666687',
+  neutral700: '#4a4a6a',
+  neutral800: '#32324d',
+  neutral900: '#212134',
+  primary100: '#f0f0ff',
+  primary200: '#d9d8ff',
+  primary500: '#7b79ff',
+  primary600: '#4945ff',
+  primary700: '#271fe0',
+  secondary100: '#eaf5ff',
+  secondary200: '#b8e1ff',
+  secondary500: '#66b7f1',
+  secondary600: '#0c75af',
+  secondary700: '#006096',
+  success100: '#eafbe7',
+  success200: '#c6f0c2',
+  success500: '#5cb176',
+  success600: '#328048',
+  success700: '#2f6846',
+  warning100: '#fdf4dc',
+  warning200: '#fae7b9',
+  warning500: '#f29d41',
+  warning600: '#d9822f',
+  warning700: '#be5d01',
+};
+const theme = {
+  colors,
+};
+
+export default theme;
diff --git a/packages/core/admin/admin/src/app.js b/packages/core/admin/admin/src/app.js
index d5f38eb6b4..0ea34bef7a 100644
--- a/packages/core/admin/admin/src/app.js
+++ b/packages/core/admin/admin/src/app.js
@@ -1,6 +1,9 @@
-export default {
-  config: {
-    locales: ['fr'],
-  },
-  bootstrap() {},
+const config = {
+  locales: ['fr'],
+};
+const bootstrap = () => {};
+
+export default {
+  config,
+  bootstrap,
 };
diff --git a/packages/core/admin/index.js b/packages/core/admin/index.js
index c9926fe255..16e01e8645 100644
--- a/packages/core/admin/index.js
+++ b/packages/core/admin/index.js
@@ -79,6 +79,7 @@ async function build({ plugins, dir, env, options, optimize, forceBuild, useType
     options,
     optimize,
     roots,
+    useTypeScript,
   });
 
   const compiler = webpack(config);
@@ -253,6 +254,7 @@ async function watchAdmin({ plugins, dir, host, port, browser, options, useTypeS
     port,
     options,
     roots,
+    useTypeScript,
     devServer: {
       port,
       client: {
diff --git a/packages/core/admin/webpack.config.js b/packages/core/admin/webpack.config.js
index 43c1580280..2dddecc2ed 100644
--- a/packages/core/admin/webpack.config.js
+++ b/packages/core/admin/webpack.config.js
@@ -27,6 +27,7 @@ module.exports = ({
     eeRoot: './ee/admin',
     ceRoot: './admin/src',
   },
+  useTypeScript,
 }) => {
   const isProduction = env === 'production';
 
@@ -47,6 +48,20 @@ module.exports = ({
       ]
     : [];
 
+  // webpack is quite slow to compile so it is best not to use the ts loader when
+  // it is not needed in javascript apps.
+  // Users can still add it by using the custom webpack config.
+  const typescriptRules = useTypeScript
+    ? [
+        {
+          test: /\.tsx?$/,
+          use: require.resolve('ts-loader'),
+          include: [cacheDir, ...pluginsPath],
+          exclude: /node_modules/,
+        },
+      ]
+    : [];
+
   return {
     mode: isProduction ? 'production' : 'development',
     bail: isProduction ? true : false,
@@ -134,12 +149,7 @@ module.exports = ({
             },
           },
         },
-        {
-          test: /\.tsx?$/,
-          use: require.resolve('ts-loader'),
-          include: [cacheDir, ...pluginsPath],
-          exclude: /node_modules/,
-        },
+
         {
           test: /\.css$/i,
           use: ['style-loader', 'css-loader'],
@@ -171,6 +181,7 @@ module.exports = ({
             },
           },
         },
+        ...typescriptRules,
       ],
     },
     resolve: {
diff --git a/packages/generators/app/lib/resources/files/src/admin/app.example.js b/packages/generators/app/lib/resources/files/src/admin/app.example.js
index 7316221f10..7d6a8ead3c 100644
--- a/packages/generators/app/lib/resources/files/src/admin/app.example.js
+++ b/packages/generators/app/lib/resources/files/src/admin/app.example.js
@@ -1,35 +1,39 @@
-export default {
-  config: {
-    locales: [
-      // 'ar',
-      // 'fr',
-      // 'cs',
-      // 'de',
-      // 'dk',
-      // 'es',
-      // 'he',
-      // 'id',
-      // 'it',
-      // 'ja',
-      // 'ko',
-      // 'ms',
-      // 'nl',
-      // 'no',
-      // 'pl',
-      // 'pt-BR',
-      // 'pt',
-      // 'ru',
-      // 'sk',
-      // 'sv',
-      // 'th',
-      // 'tr',
-      // 'uk',
-      // 'vi',
-      // 'zh-Hans',
-      // 'zh',
-    ],
-  },
-  bootstrap(app) {
-    console.log(app);
-  },
+const config = {
+  locales: [
+    // 'ar',
+    // 'fr',
+    // 'cs',
+    // 'de',
+    // 'dk',
+    // 'es',
+    // 'he',
+    // 'id',
+    // 'it',
+    // 'ja',
+    // 'ko',
+    // 'ms',
+    // 'nl',
+    // 'no',
+    // 'pl',
+    // 'pt-BR',
+    // 'pt',
+    // 'ru',
+    // 'sk',
+    // 'sv',
+    // 'th',
+    // 'tr',
+    // 'uk',
+    // 'vi',
+    // 'zh-Hans',
+    // 'zh',
+  ],
+};
+
+const bootstrap = app => {
+  console.log(app);
+};
+
+export default {
+  config,
+  bootstrap,
 };