Fixed vulnerabilities and remove unused or redundant dependencies (#55)

* chore: fix vulnerabilities and remove unused or redundant dependencies

* chore: Added start script and vulnerabilities screenshot

* fix: quick fix

* fix: converted to typescript + bugs removed

Co-authored-by: jahanzaibrao-dev <jahanzaib@tetrahex.com>
Co-authored-by: Saad Jutt <ihsan.distranger@gmail.com>

web/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/env", "@babel/react", "@babel/preset-typescript"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

web/.env.example

@@ -1,2 +1,2 @@
-REACT_APP_PORT_API=[place sasjs server port] default value is 5000
-REACT_APP_CLIENT_ID=<place clientId here>
+PORT_API=[place sasjs server port] default value is 5000
+CLIENT_ID=<place clientId here>

web/package.json

@@ -3,10 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "npx webpack-dev-server --config webpack.dev.ts --hot",
+    "build": "npx webpack --config webpack.prod.ts"
   },
   "dependencies": {
     "@emotion/react": "^11.4.1",
@@ -22,19 +20,43 @@
     "@types/jest": "^26.0.24",
     "@types/node": "^12.20.28",
     "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
-    "axios": "^0.22.0",
+    "axios": "^0.24.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.4.3"
+    "react-router-dom": "^5.3.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/node": "^7.16.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.0",
+    "@types/dotenv-webpack": "^7.0.3",
     "@types/prismjs": "^1.16.6",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
     "@types/react-router-dom": "^5.3.1",
+    "babel-loader": "^8.2.3",
     "babel-plugin-prismjs": "^2.1.0",
-    "prettier": "^2.4.1"
+    "copy-webpack-plugin": "^10.0.0",
+    "css-loader": "^6.5.1",
+    "dotenv-webpack": "^7.1.0",
+    "eslint": "^8.5.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-webpack-plugin": "^3.1.1",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "5.5.0",
+    "path": "0.12.7",
+    "prettier": "^2.4.1",
+    "sass": "^1.44.0",
+    "sass-loader": "^12.3.0",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.2",
+    "webpack": "5.64.3",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "4.7.4"
   },
   "eslintConfig": {
     "extends": [

web/src/components/login.tsx

@@ -8,11 +8,10 @@ const headers = {
   Accept: 'application/json',
   'Content-Type': 'application/json'
 }
-const { NODE_ENV, REACT_APP_PORT_API } = process.env
+const NODE_ENV = process.env.NODE_ENV
+const PORT_API = process.env.PORT_API
 const baseUrl =
-  NODE_ENV === 'development'
-    ? `http://localhost:${REACT_APP_PORT_API ?? 5000}`
-    : ''
+  NODE_ENV === 'development' ? `http://localhost:${PORT_API ?? 5000}` : ''
 
 const getAuthCode = async (credentials: any) => {
   return fetch(`${baseUrl}/SASjsApi/auth/authorize`, {
@@ -46,7 +45,7 @@ const Login = ({ setTokens, getCodeOnly }: any) => {
     error = false
     setErrorMessage('')
     e.preventDefault()
-    let { REACT_APP_CLIENT_ID: clientId } = process.env
+    let clientId = process.env.CLIENT_ID
 
     if (getCodeOnly) {
       const params = new URLSearchParams(location.search)

web/src/components/useTokens.ts

@@ -36,11 +36,10 @@ export default function useTokens() {
   }
 }
 
-const { NODE_ENV, REACT_APP_PORT_API } = process.env
+const NODE_ENV = process.env.NODE_ENV
+const PORT_API = process.env.PORT_API
 const baseUrl =
-  NODE_ENV === 'development'
-    ? `http://localhost:${REACT_APP_PORT_API ?? 5000}`
-    : ''
+  NODE_ENV === 'development' ? `http://localhost:${PORT_API ?? 5000}` : ''
 
 const isAbsoluteURLRegex = /^(?:\w+:)\/\//
 

web/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="SASjs Server Web Interface" />
@@ -10,7 +10,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

web/webpack.common.ts

@@ -0,0 +1,60 @@
+import path from 'path'
+import { Configuration } from 'webpack'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import CopyPlugin from 'copy-webpack-plugin'
+import dotenv from 'dotenv-webpack'
+
+const config: Configuration = {
+  entry: path.join(__dirname, 'src', 'index.tsx'),
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js', '.jsx']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader']
+      },
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              compilerOptions: {
+                noEmit: false
+              }
+            }
+          }
+        ]
+      },
+      {
+        test: /\.css$/,
+        exclude: ['/node_modules/'],
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.scss$/,
+        exclude: ['/node_modules/'],
+        use: ['style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
+        use: ['file-loader']
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'src', 'index.html')
+    }),
+    new CopyPlugin({
+      patterns: [{ from: 'public' }]
+    }),
+    new dotenv()
+  ]
+}
+
+export default config

web/webpack.dev.ts

@@ -0,0 +1,28 @@
+import path from 'path'
+import { Configuration as WebpackConfiguration } from 'webpack'
+import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'
+import { merge } from 'webpack-merge'
+
+import common from './webpack.common'
+
+interface Configuration extends WebpackConfiguration {
+  devServer?: WebpackDevServerConfiguration
+}
+
+const devConfig: Configuration = merge(common, {
+  mode: 'development',
+  output: {
+    path: path.join(__dirname, 'build'),
+    filename: 'index.bundle.js',
+    publicPath: '/'
+  },
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'build')
+    },
+    historyApiFallback: true,
+    port: 3000
+  }
+})
+
+export default devConfig

web/webpack.prod.ts

@@ -0,0 +1,19 @@
+import path from 'path'
+import { Configuration } from 'webpack'
+import { merge } from 'webpack-merge'
+
+import common from './webpack.common'
+
+const prodConfig: Configuration = merge(common, {
+  mode: 'production',
+  output: {
+    path: path.join(__dirname, 'build'),
+    filename: 'index.bundle.js',
+    publicPath: './'
+  },
+  performance: {
+    hints: false
+  }
+})
+
+export default prodConfig