Update webpack config to typescript

.gitignore

@@ -41,3 +41,7 @@ frontend/cypress.env.json
 
 frontend/*.env
 pkg/query-service/signoz.db
+
+# docker generated files
+
+deploy/docker/clickhouse-setup

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",
@@ -15,6 +15,7 @@
 	"engines": {
 		"node": ">=12.13.0"
 	},
+	"type": "module",
 	"author": "",
 	"license": "ISC",
 	"dependencies": {
@@ -99,6 +100,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",
@@ -130,17 +132,21 @@
 		"@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",
+		"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",
@@ -166,4 +172,4 @@
 		"react-is": "^17.0.1",
 		"webpack-cli": "^4.5.0"
 	}
-}
+}

frontend/webpack.config.prod.js → frontend/webpack.config.prod.ts

@@ -1,17 +1,21 @@
 // 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';
 
-module.exports = {
+const __dirname = resolve();
+
+const config = {
 	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,10 +51,10 @@ module.exports = {
 		],
 	},
 	plugins: [
+		new HtmlWebpackPlugin({ template: 'src/index.html.ejs' }),
 		new CompressionPlugin({
 			exclude: /.map$/,
 		}),
-		new HtmlWebpackPlugin({ template: 'src/index.html.ejs' }),
 		new CopyPlugin({
 			patterns: [{ from: resolve(__dirname, 'public/'), to: '.' }],
 		}),
@@ -65,3 +69,5 @@ module.exports = {
 		hints: false,
 	},
 };
+
+export default config;

frontend/webpack.config.js → frontend/webpack.config.ts

@@ -1,36 +1,36 @@
 // 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';
 
 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.
-		port: portFinderSync.getPort(3000),
+		liveReload: true,
+		port: 'auto',
 	},
 	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 +77,5 @@ module.exports = {
 		hints: false,
 	},
 };
+
+export default config;