Update webpack config to typescript (#334)

* added docker generated files to .gitignore

* update webpack.config.js to webpack.config.ts

* change web dev server to use port from env

* update webpack-dev-server to 4.3.1,  update import statement for chartjsAdapter

* Revert "added docker generated files to .gitignore"

This reverts commit 494cfcda0e9ed90de8daac3097957fa63df23570.

* use portfindersync for webpack dev server and remove .env.sample

* add webpack config typing to prod config

frontend/package.json

@@ -4,8 +4,8 @@
 	"description": "",
 	"main": "webpack.config.js",
 	"scripts": {
-		"dev": "NODE_ENV=development webpack serve --progress",
-		"build": "webpack --config=webpack.config.prod.js --progress",
+		"dev": "NODE_OPTIONS=\"--loader ts-node/esm\" NODE_ENV=development webpack serve --config=webpack.config.ts --progress",
+		"build": "NODE_OPTIONS=\"--loader ts-node/esm\" webpack --config=webpack.config.prod.ts --progress",
 		"prettify": "prettier --write .",
 		"lint": "eslint . --debug",
 		"lint:fix": "eslint . --fix --debug",
@@ -18,6 +18,7 @@
 	"engines": {
 		"node": ">=12.13.0"
 	},
+	"type": "module",
 	"author": "",
 	"license": "ISC",
 	"dependencies": {
@@ -101,6 +102,7 @@
 		"style-loader": "1.3.0",
 		"styled-components": "^5.2.1",
 		"terser-webpack-plugin": "4.2.3",
+		"ts-node": "^10.2.1",
 		"ts-pnp": "1.2.0",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
 		"typescript": "^4.0.5",
@@ -108,7 +110,7 @@
 		"uuid": "^8.3.2",
 		"web-vitals": "^0.2.4",
 		"webpack": "^5.23.0",
-		"webpack-dev-server": "^3.11.2",
+		"webpack-dev-server": "^4.3.1",
 		"webpack-manifest-plugin": "2.2.0",
 		"workbox-webpack-plugin": "5.1.4"
 	},
@@ -132,18 +134,22 @@
 		"@babel/preset-react": "^7.12.13",
 		"@babel/preset-typescript": "^7.12.17",
 		"@testing-library/cypress": "^8.0.0",
+		"@types/compression-webpack-plugin": "^9.0.0",
+		"@types/copy-webpack-plugin": "^8.0.1",
 		"@types/d3-tip": "^3.5.5",
 		"@types/lodash-es": "^4.17.4",
-		"@types/node": "^14.17.12",
+		"@types/node": "^16.10.3",
 		"@types/react-grid-layout": "^1.1.2",
 		"@types/uuid": "^8.3.1",
+		"@types/webpack": "^5.28.0",
+		"@types/webpack-dev-server": "^4.3.0",
 		"@typescript-eslint/eslint-plugin": "^4.28.2",
 		"@typescript-eslint/parser": "^4.28.2",
 		"autoprefixer": "^9.0.0",
 		"babel-plugin-styled-components": "^1.12.0",
-		"compression-webpack-plugin": "^8.0.0",
-		"copy-webpack-plugin": "^7.0.0",
-		"cypress": "8.6.0",
+		"compression-webpack-plugin": "^9.0.0",
+		"copy-webpack-plugin": "^8.1.0",
+		"cypress": "^8.3.0",
 		"eslint": "^7.30.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-config-standard": "^16.0.3",

frontend/src/components/Graph/index.tsx

@@ -22,7 +22,7 @@ import {
 	Title,
 	Tooltip,
 } from 'chart.js';
-import chartjsAdapter from 'chartjs-adapter-date-fns';
+import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 // import { colors } from 'lib/getRandomColor';
 // import stringToHTML from 'lib/stringToHTML';
 import React, { useCallback, useEffect, useRef } from 'react';

frontend/webpack.config.prod.ts

@@ -1,17 +1,22 @@
 // shared config (dev and prod)
-const { resolve } = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
-const webpack = require('webpack');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+import CompressionPlugin from 'compression-webpack-plugin';
+import CopyPlugin from 'copy-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { resolve } from 'path';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+import webpack from 'webpack';
+import { WebpackPluginInstance } from 'webpack-dev-middleware/node_modules/webpack';
 
-module.exports = {
+const __dirname = resolve();
+
+const config: webpack.Configuration = {
 	mode: 'production',
 	devtool: 'source-map',
 	entry: resolve(__dirname, './src/index.tsx'),
 	output: {
-		filename: ({ chunk: { name, hash } }) => {
+		filename: ({ chunk }: any): string => {
+			const hash = chunk?.hash;
+			const name = chunk?.name;
 			return `js/${name}-${hash}.js`;
 		},
 		path: resolve(__dirname, './build'),
@@ -47,13 +52,13 @@ module.exports = {
 		],
 	},
 	plugins: [
+		new HtmlWebpackPlugin({ template: 'src/index.html.ejs' }),
 		new CompressionPlugin({
 			exclude: /.map$/,
-		}),
-		new HtmlWebpackPlugin({ template: 'src/index.html.ejs' }),
+		}) as any,
 		new CopyPlugin({
 			patterns: [{ from: resolve(__dirname, 'public/'), to: '.' }],
-		}),
+		}) as any,
 		new webpack.ProvidePlugin({
 			process: 'process/browser',
 		}),
@@ -65,3 +70,5 @@ module.exports = {
 		hints: false,
 	},
 };
+
+export default config;

frontend/webpack.config.ts

@@ -1,36 +1,44 @@
 // shared config (dev and prod)
-const { resolve } = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const portFinderSync = require('portfinder-sync');
-const dotenv = require('dotenv');
-const webpack = require('webpack');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+import dotenv from 'dotenv';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { resolve } from 'path';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+import webpack from 'webpack';
+import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
+
+// @ts-ignore
+import portFinderSync from 'portfinder-sync';
 
 dotenv.config();
 
+const __dirname = resolve();
 console.log(resolve(__dirname, './src/'));
 
-module.exports = {
+interface Configuration extends webpack.Configuration {
+	devServer?: WebpackDevServerConfiguration;
+}
+
+const config: Configuration = {
 	mode: 'development',
 	devtool: 'source-map',
 	entry: resolve(__dirname, './src/index.tsx'),
 	devServer: {
 		historyApiFallback: true,
-		publicPath: '/',
-		transportMode: 'ws',
 		open: true,
-		openPage: 'application',
-		contentBase: [resolve(__dirname, './public')],
 		hot: true,
-		liveReload: false,
-		inline: true,
-		// This is being used because if the port 3000 is being used
-		// then it will try to find another open port availble.
+		liveReload: true,
 		port: portFinderSync.getPort(3000),
+		static: {
+			directory: resolve(__dirname, "public"),
+			publicPath: "/",
+			watch: true,
+		}
 	},
 	target: 'web',
 	output: {
-		filename: ({ chunk: { name, hash } }) => {
+		filename: ({ chunk }) => {
+			const hash = chunk?.hash;
+			const name = chunk?.name;
 			return `js/${name}-${hash}.js`;
 		},
 		path: resolve(__dirname, './build'),
@@ -77,3 +85,5 @@ module.exports = {
 		hints: false,
 	},
 };
+
+export default config;