Frontent dev env (#247)

* Added frontend development files/environment

* More items-categories related removals

* Improvements in pages templates (inc. static pages)

* Improvements in video player

* Added empty home page message + cta

* Updates in media, playlist and management pages

* Improvements in material icons font loading

* Replaced media & playlists links in frontend dev-env

* frontend package version update

* chnaged frontend dev url port

* static files update

* Changed default position of theme switcher

* enabled frontend docker container

frontend/packages/scripts/src/analyzer.ts

@@ -0,0 +1,84 @@
+const isAbsolutePath = require('path').isAbsolute;
+
+const webpack = require('webpack');
+const webpackFormatMessages = require('webpack-format-messages');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+import { config as defaultConfig } from '../lib/config';
+
+import { AnalyzerOptionsType } from '../lib/interfaces/OptionsTypes';
+
+import { config as buildWebpackConfig } from '../lib/.webpack/build.config';
+import { config as distWebpackConfig } from '../lib/.webpack/dist.config';
+
+import generateConfig from '../lib/webpack-helpers/generateConfig';
+
+const defaultOptions: AnalyzerOptionsType = {
+  env: 'production',
+  host: '127.0.0.1',
+  port: 8888,
+  mode: 'static',
+  config: defaultConfig,
+};
+
+export function analyzer(analyzerOptions: AnalyzerOptionsType = defaultOptions): void {
+  const options: AnalyzerOptionsType = { ...defaultOptions, ...analyzerOptions };
+
+  options.config = { ...defaultOptions.config, ...analyzerOptions.config };
+
+  const config = generateConfig(options.env, options.config);
+
+  if (!isAbsolutePath(options.config.src)) {
+    throw Error('"src" is not an absolute path');
+  }
+
+  if (!isAbsolutePath(options.config.build)) {
+    throw Error('"build" is not an absolute path');
+  }
+
+  if (!isAbsolutePath(options.config.postcssConfigFile)) {
+    throw Error('"postcssConfigFile" is not an absolute path');
+  }
+
+  const analyzerConfig = {
+    analyzerMode: options.mode,
+    analyzerHost: options.host,
+    analyzerPort: options.port,
+    generateStatsFile: 'server' !== options.mode,
+    startAnalyzer: 'server' === options.mode,
+    statsFilename: 'analyzer-stats.json',
+    reportFilename: 'analyzer-report.html',
+  };
+
+  const compiler =
+    'dist' === options.env
+      ? webpack({ ...distWebpackConfig, ...config })
+      : webpack({ ...buildWebpackConfig, ...config });
+  const analyzer = new BundleAnalyzerPlugin(analyzerConfig);
+
+  analyzer.apply(compiler);
+
+  compiler.run((err?: Error, stats?: any) => {
+    if (err) throw err;
+
+    const messages = webpackFormatMessages(stats);
+
+    if (!messages.errors.length && !messages.warnings.length) {
+      console.log('Compiled successfully!', '\n');
+    }
+
+    if (messages.errors.length) {
+      console.log('Failed to compile.', '\n');
+
+      for (const m of messages.errors) {
+        console.log(m);
+      }
+    } else if (messages.warnings.length) {
+      console.log('Compiled with warnings.', '\n');
+
+      for (const m of messages.warnings) {
+        console.log(m);
+      }
+    }
+  });
+}

frontend/packages/scripts/src/build.ts

@@ -0,0 +1,67 @@
+const isAbsolutePath = require('path').isAbsolute;
+
+const webpack = require('webpack');
+const webpackFormatMessages = require('webpack-format-messages');
+
+import { config as defaultConfig } from '../lib/config';
+
+import { BuildOptionsType } from '../lib/interfaces/OptionsTypes';
+
+import { config as buildWebpackConfig } from '../lib/.webpack/build.config';
+import { config as distWebpackConfig } from '../lib/.webpack/dist.config';
+
+import generateConfig from '../lib/webpack-helpers/generateConfig';
+
+const defaultOptions: BuildOptionsType = {
+  env: 'production',
+  config: defaultConfig,
+};
+
+export function build(buildOptions: BuildOptionsType = defaultOptions): void {
+  const options: BuildOptionsType = { ...defaultOptions, ...buildOptions };
+
+  options.config = { ...defaultOptions.config, ...buildOptions.config };
+
+  if (!isAbsolutePath(options.config.src)) {
+    throw Error('"src" is not an absolute path');
+  }
+
+  if (!isAbsolutePath(options.config.build)) {
+    throw Error('"build" is not an absolute path');
+  }
+
+  if (!isAbsolutePath(options.config.postcssConfigFile)) {
+    throw Error('"postcssConfigFile" is not an absolute path');
+  }
+
+  const config = generateConfig(options.env, options.config);
+
+  const compiler =
+    'dist' === options.env
+      ? webpack({ ...distWebpackConfig, ...config })
+      : webpack({ ...buildWebpackConfig, ...config });
+
+  compiler.run((err?: Error, stats?: any) => {
+    if (err) throw err;
+
+    const messages = webpackFormatMessages(stats);
+
+    if (!messages.errors.length && !messages.warnings.length) {
+      console.log('Compiled successfully!', '\n');
+    }
+
+    if (messages.errors.length) {
+      console.log('Failed to compile.', '\n');
+
+      for (const m of messages.errors) {
+        console.log(m);
+      }
+    } else if (messages.warnings.length) {
+      console.log('Compiled with warnings.', '\n');
+
+      for (const m of messages.warnings) {
+        console.log(m);
+      }
+    }
+  });
+}

frontend/packages/scripts/src/dev.ts

@@ -0,0 +1,52 @@
+const isAbsolutePath = require('path').isAbsolute;
+
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+
+import { config as defaultConfig } from '../lib/config';
+
+import { DevOptionsType } from '../lib/interfaces/OptionsTypes';
+
+import { config as webpackDefaultConfig } from '../lib/.webpack/dev.config';
+import { configFunc as webpackDefaultServerConfig } from '../lib/.webpack/dev-server.config';
+
+import generateConfig from '../lib/webpack-helpers/generateConfig';
+
+const defaultOptions: DevOptionsType = {
+  env: 'development',
+  host: '0.0.0.0',
+  port: 8080,
+  config: defaultConfig,
+};
+
+export function dev(devOptions: DevOptionsType = defaultOptions): void {
+  const options: DevOptionsType = { ...defaultOptions, ...devOptions };
+
+  options.config = { ...defaultOptions.config, ...devOptions.config };
+
+  const config = generateConfig(options.env, options.config);
+
+  if (!isAbsolutePath(options.config.src)) {
+    throw Error('"src" is not an absolute path');
+  }
+
+  if (!isAbsolutePath(options.config.build)) {
+    throw Error('"build" is not an absolute path');
+  }
+
+  if (!isAbsolutePath(options.config.postcssConfigFile)) {
+    throw Error('"postcssConfigFile" is not an absolute path');
+  }
+
+  const compilerConfig = { ...webpackDefaultConfig, ...config };
+  const serverOptions = webpackDefaultServerConfig(options.config.src);
+
+  WebpackDevServer.addDevServerEntrypoints(compilerConfig, serverOptions);
+
+  const compiler = webpack(compilerConfig);
+  const server = new WebpackDevServer(compiler, serverOptions);
+
+  server.listen(options.port, options.host, (err?: Error) => {
+    if (err) throw err;
+  });
+}

frontend/packages/scripts/src/index.ts

@@ -0,0 +1,3 @@
+export * from './analyzer';
+export * from './build';
+export * from './dev';