🔧 Fixed the path to funding.yml

.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/transform-runtime",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-syntax-top-level-await"
+  ],
+  "env": {
+    "production": {
+      "presets": ["minify"]
+    }
+  }
+}

package.json

@@ -5,10 +5,15 @@
   "main": "server/index.js",
   "typings": "server/index.js",
   "scripts": {
-    "build": "vite build",
-    "dev": "rimraf dist && npm run build && vite",
-    "prod": "npm run build && vite",
-    "docs": "jsdoc -c jsdoc.json"
+    "build": "webpack --mode production",
+    "start": "npm run build && npm run server",
+    "client": "webpack serve --mode development --devtool inline-source-map --hot",
+    "server": "tsc -p tsconfig.server.json && node server/",
+    "dev": "concurrently \"nodemon\" \"npm run client\"",
+    "server-dev": "nodemon",
+    "docs": "jsdoc -c jsdoc.json",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "author": "Rishi Ghan",
   "license": "MIT",
@@ -19,46 +24,49 @@
     "@dnd-kit/sortable": "^5.0.0",
     "@dnd-kit/utilities": "^3.2.0",
     "@fortawesome/fontawesome-free": "^6.1.1",
+    "@parcel/config-default": "^2.6.0",
     "@redux-devtools/extension": "^3.2.2",
-    "@rollup/plugin-node-resolve": "^15.0.1",
     "@tanstack/react-table": "^8.5.11",
     "@types/mime-types": "^2.1.0",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
     "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "^5.1.7",
+    "@types/sharp": "^0.28.0",
     "@types/socket.io": "^3.0.2",
     "@types/socket.io-client": "^3.0.0",
-    "@vitejs/plugin-react": "^3.1.0",
-    "airdcpp-apisocket": "2.4.5-beta.1",
+    "airdcpp-apisocket": "^2.4.4",
+    "array-sort-by": "^1.2.1",
     "axios": "^0.27.2",
     "axios-rate-limit": "^1.3.0",
     "axios-simple-cache-adapter": "^1.1.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-minify": "^0.5.2",
     "better-docs": "^2.7.2",
+    "comlink-loader": "^2.0.0",
     "date-fns": "^2.28.0",
     "dayjs": "^1.10.6",
     "ellipsize": "^0.1.0",
     "express": "^4.17.1",
+    "fastest-validator": "^1.11.0",
     "filename-parser": "^1.0.2",
     "final-form": "^4.20.2",
     "final-form-arrays": "^3.0.2",
     "html-to-text": "^8.1.0",
     "jsdoc": "^3.6.10",
     "lodash": "^4.17.21",
-    "node-sass": "npm:sass",
+    "opds-extra": "^3.0.9",
     "pretty-bytes": "^5.6.0",
     "prop-types": "^15.8.1",
     "qs": "^6.10.5",
     "react": "^18.2.0",
     "react-collapsible": "^2.9.0",
     "react-comic-viewer": "^0.4.0",
-    "react-day-picker": "^8.6.0",
+    "react-day-picker": "^8.0.6",
     "react-dom": "^18.1.0",
     "react-fast-compare": "^3.2.0",
     "react-final-form": "^6.5.9",
-    "react-final-form-arrays": "^3.1.4",
+    "react-final-form-arrays": "^3.1.3",
     "react-loader-spinner": "^4.0.0",
     "react-masonry-css": "^1.0.16",
     "react-modal": "^3.15.1",
@@ -66,20 +74,21 @@
     "react-router": "^6.2.2",
     "react-router-dom": "^6.2.2",
     "react-select": "^5.3.2",
-    "react-select-async-paginate": "^0.7.2",
+    "react-select-async-paginate": "^0.6.1",
     "react-slick": "^0.29.0",
     "react-sliding-pane": "^7.1.0",
-    "react-stickynode": "^4.1.0",
+    "react-stickynode": "^4.0.0",
     "react-textarea-autosize": "^8.3.4",
-    "reapop": "^4.2.1",
-    "redux-first-history": "^5.1.1",
+    "reapop": "^4.0.5",
+    "redux-first-history": "^5.0.9",
     "redux-socket.io-middleware": "^1.0.4",
-    "redux-thunk": "^2.4.2",
+    "redux-thunk": "^2.4.1",
+    "sharp": "^0.30.5",
     "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.3.2",
     "styled-components": "^5.3.5",
     "threetwo-ui-typings": "^1.0.14",
-    "vite-plugin-html": "^3.2.0",
+    "voca": "^1.4.0",
     "websocket": "^1.0.34",
     "ws": "^7.5.3",
     "xml2js": "^0.4.23",
@@ -90,9 +99,22 @@
     "@babel/core": "^7.13.10",
     "@babel/plugin-syntax-top-level-await": "^7.14.5",
     "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack4": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack4": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
+    "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
     "@tsconfig/node14": "^1.0.0",
     "@types/express": "^4.17.8",
     "@types/jest": "^26.0.20",
@@ -103,11 +125,18 @@
     "@types/react-redux": "^7.1.16",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
+    "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "body-parser": "^1.19.0",
-    "bulma": "^0.9.4",
+    "buffer": "^6.0.3",
+    "bulma": "^0.9.3",
+    "clean-webpack-plugin": "^1.0.0",
     "comlink": "^4.3.0",
     "concurrently": "^4.0.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "css-loader": "^5.1.2",
     "eslint": "^7.22.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-airbnb-base": "^14.2.1",
@@ -118,16 +147,34 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "express": "^4.17.1",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^9.1.0",
+    "html-webpack-plugin": "^5.3.1",
+    "http-response-stream": "^1.0.9",
+    "image-webpack-loader": "^8.1.0",
     "install": "^0.13.0",
     "jest": "^26.6.3",
+    "mini-css-extract-plugin": "^1.4.1",
+    "node-sass": "^7.0.1",
     "nodemon": "^1.17.3",
     "npm": "^8.11.0",
     "prettier": "^2.2.1",
     "react-refresh": "^0.14.0",
-    "rimraf": "^4.1.3",
-    "sass": "^1.58.1",
+    "rimraf": "^3.0.2",
+    "sass-loader": "^11.0.1",
+    "source-map-loader": "^0.2.4",
+    "string-similarity": "^4.0.4",
+    "style-loader": "^2.0.0",
     "tslint": "^6.1.3",
     "typescript": "^4.2.3",
-    "vite": "^4.1.1"
+    "url-loader": "^1.0.1",
+    "webpack": "^5.73.0",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^4.7.4",
+    "webpack-merge": "^5.7.3"
+  },
+  "resolutions": {
+    "@storybook/react/webpack": "^5"
   }
 }

public/index.html

@@ -10,7 +10,6 @@
 
 <body>
     <div id="root"></div>
-    <script type="module" src="/src/client/index.tsx"></script>
 </body>
 
 </html>

src/client/actions/fileops.actions.tsx

@@ -301,26 +301,26 @@ export const searchIssue = (query, options) => async (dispatch) => {
     case "wantedComicsPage":
       dispatch({
         type: WANTED_COMICS_FETCHED,
-        data: response.data.hits,
+        data: response.data.body,
       });
       break;
     case "globalSearchBar":
       dispatch({
         type: SS_SEARCH_RESULTS_FETCHED_SPECIAL,
-        data: response.data.hits,
+        data: response.data.body,
       });
       break;
 
     case "libraryPage":
       dispatch({
         type: SS_SEARCH_RESULTS_FETCHED,
-        data: response.data.hits,
+        data: response.data.body,
       });
       break;
     case "volumesPage":
       dispatch({
         type: VOLUMES_FETCHED,
-        data: response.data.hits,
+        data: response.data.body,
       });
       break;
 

src/client/assets/scss/App.scss

@@ -1,8 +1,8 @@
-@import "/node_modules/bulma/bulma.sass";
-$fa-font-path: "/node_modules/@fortawesome/fontawesome-free/webfonts";
-@import "/node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "/node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
-@import "/node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
+@import "../../../../node_modules/bulma/bulma.sass";
+$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
+@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
+@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
 $bg-color: yellow;
 $border-color: red;
 

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -167,7 +167,7 @@ export const AcquisitionPanel = (
                         }
                       >
                         <span className="icon is-small">
-                          <img src="/src/client/assets/img/airdcpp_logo.svg" />
+                          <img src="/img/airdcpp_logo.svg" />
                         </span>
                         <span className="airdcpp-text">Search on AirDC++</span>
                       </button>

src/client/components/Dashboard/PullList.tsx

@@ -20,7 +20,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2023-1-25",
+        startDate: "2022-12-25",
         pageSize: "15",
         currentPage: "1",
       }),

src/client/components/Dashboard/RecentlyImported.tsx

@@ -83,14 +83,14 @@ export const RecentlyImported = ({
                     {/* Raw file presence  */}
                     {isNil(rawFileDetails) && (
                       <span className="icon custom-icon is-small has-text-danger mr-2">
-                        <img src="/src/client/img/missing-file.svg" />
+                        <img src="/img/missing-file.svg" />
                       </span>
                     )}
                     {/* ComicInfo.xml presence */}
                     {!isNil(comicInfo) && !isEmpty(comicInfo) && (
                       <span className="icon custom-icon is-small has-text-danger">
                         <img
-                          src="/src/client/img/comicinfoxml.svg"
+                          src="/img/comicinfoxml.svg"
                           alt={"ComicInfo.xml file detected."}
                         />
                       </span>
@@ -99,8 +99,8 @@ export const RecentlyImported = ({
                     {isComicBookMetadataAvailable && (
                       <span className="icon custom-icon">
                         <img
-                          src="/src/client/assets/img/cvlogo.svg"
-                          alt={"ComicVine metadata detected."}
+                          src="/img/cvlogo.svg"
+                          alt={"ComicInfo.xml file detected."}
                         />
                       </span>
                     )}

src/client/components/Dashboard/WantedComicsList.tsx

@@ -82,12 +82,12 @@ export const WantedComicsList = ({
                   {/* comicVine metadata presence */}
                   {isComicBookMetadataAvailable && (
                     <span className="icon custom-icon">
-                      <img src="/src/client/assets/img/cvlogo.svg" />
+                      <img src="/img/cvlogo.svg" />
                     </span>
                   )}
                   {!isEmpty(locg) && (
                     <span className="icon custom-icon">
-                      <img src="/src/client/img/locglogo.svg" />
+                      <img src="/img/locglogo.svg" />
                     </span>
                   )}
                   {/* Issue type */}

src/client/components/Downloads/Downloads.tsx

@@ -3,6 +3,7 @@ import { getTransfers } from "../../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 import { isEmpty, isNil, isUndefined } from "lodash";
+import { searchIssue } from "../../actions/fileops.actions";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import MetadataPanel from "../shared/MetadataPanel";
 
@@ -46,6 +47,7 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
       })
       setBundles(foo);
     }
+
   }, [issueBundles])
 
   return !isNil(bundles) ?
@@ -54,9 +56,9 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
         <h1 className="title">Downloads</h1>
         <div className="columns">
           <div className="column is-half">
-            {bundles.map((bundle, idx) => {
+            {bundles.map(bundle => {
               console.log(bundle);
-              return <div key={idx}>
+              return <>
                 <MetadataPanel
                   data={bundle}
                   imageStyle={{ maxWidth: 80 }}
@@ -68,33 +70,30 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
                     margin: "0 0 8px 0",
                   }} />
 
-                <table className="table is-size-7">
-                  <thead>
+                  <table className="table is-size-7">
                     <tr>
                       <th>Name</th>
                       <th>Size</th>
                       <th>Type</th>
                       <th>Bundle ID</th>
                     </tr>
-                  </thead>
-                  <tbody>
-                    {bundle.acquisition.directconnect.downloads.map((bundle, idx) => {
-                      return (<tr key={idx}>
+
+                    {bundle.acquisition.directconnect.downloads.map((bundle) => {
+                      return(<tr>
                         <td>{bundle.name}</td>
                         <td>{bundle.size}</td>
                         <td>{bundle.type.str}</td>
                         <td><span className="tag is-warning">{bundle.bundleId}</span></td>
                       </tr>)
                     })}
-                  </tbody>
-                </table>
+                  </table>
                 {/* <pre>{JSON.stringify(bundle.acquisition.directconnect.downloads, null, 2)}</pre> */}
-              </div>
+              </>
             })}
           </div>
         </div>
       </section>
-    </div> : <div>There are no downloads.</div>;
+    </div> : <div>asd</div>;
 };
 
 export default Downloads;

src/client/components/GlobalSearchBar/SearchBar.tsx

@@ -31,7 +31,7 @@ export const SearchBar = (data: ISearchBarProps): ReactElement => {
               from: 0,
             },
             type: "volumeName",
-            trigger: "globalSearchBar",
+            trigger: "globalSearchBar"
           },
         ),
       );
@@ -51,6 +51,7 @@ export const SearchBar = (data: ISearchBarProps): ReactElement => {
           <i className="fa-solid fa-magnifying-glass"></i>
         </span>
       </div>
+
       {!isEmpty(searchResults) ? (
         <div
           className="columns box is-multiline"
@@ -61,10 +62,9 @@ export const SearchBar = (data: ISearchBarProps): ReactElement => {
             margin: "60px 0 0 350px",
           }}
         >
-          {map(searchResults, (result, idx) => (
+          {map(searchResults, (result) => (
             <MetadataPanel
               data={result}
-              key={idx}
               imageStyle={{ maxWidth: 70 }}
               titleStyle={{ fontSize: "0.8rem" }}
               tagsStyle={{ fontSize: "0.7rem" }}

src/client/components/Library/Library.tsx

@@ -19,7 +19,10 @@ export const Library = (): ReactElement => {
   const searchResults = useSelector(
     (state: RootState) => state.fileOps.libraryComics,
   );
-  const searchError = useSelector((state: RootState) => state.fileOps.librarySearchError);
+  const searchError = useSelector((state: RootState) => {
+    console.log(state);
+    return state.fileOps.librarySearchError;
+  });
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(
@@ -218,9 +221,9 @@ export const Library = (): ReactElement => {
           <div>
             <div className="library">
               <T2Table
-                totalPages={searchResults.total.value}
+                totalPages={searchResults.hits.total.value}
                 columns={columns}
-                sourceData={searchResults?.hits}
+                sourceData={searchResults?.hits?.hits}
                 rowClickHandler={navigateToComicDetail}
                 paginationHandlers={{
                   nextPage,

src/client/components/Navbar.tsx

@@ -25,7 +25,7 @@ const Navbar: React.FunctionComponent = (props) => {
       <div className="navbar-brand">
         <Link to="/" className="navbar-item">
           <img
-            src="/src/client/assets/img/threetwo.svg"
+            src="/img/threetwo.svg"
             alt="ThreeTwo! A comic book curator"
             width="112"
             height="28"

src/client/components/Volumes/Volumes.tsx

@@ -166,8 +166,8 @@ export const Volumes = (props): ReactElement => {
           <div>
             <div className="library">
               <T2Table
-                sourceData={volumes?.hits}
-                totalPages={volumes.hits.length}
+                sourceData={volumes?.hits?.hits}
+                totalPages={volumes.hits.hits.length}
                 paginationHandlers={{
                   nextPage: () => {},
                   previousPage: () => {},

src/client/components/WantedComics/WantedComics.tsx

@@ -73,8 +73,8 @@ export const WantedComics = (props): ReactElement => {
           id: "downloadDetails",
           accessorKey: "acquisition",
           cell: data => <ol>
-            {data.getValue().directconnect.downloads.map((download, idx) => {
-              return <li className="is-size-7" key={idx}>{download.name}</li>;
+            {data.getValue().directconnect.downloads.map(download => {
+              return <li className="is-size-7">{download.name}</li>;
             })}
           </ol>
         },

src/client/components/shared/T2Table.tsx

@@ -20,6 +20,8 @@ export const T2Table = (tableOptions): ReactElement => {
       pageIndex: 1,
       pageSize: 15,
     });
+    console.log(sourceData)
+
 
   const pagination = useMemo(
     () => ({
@@ -79,12 +81,12 @@ export const T2Table = (tableOptions): ReactElement => {
             {/* <p>{totalPages} comics in all</p> */}
           </div>
           <div className="field has-addons">
-            <div className="control">
+            <p className="control">
               <div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
-            </div>
-            <div className="control">
+            </p>
+            <p className="control">
               <div className="button" onClick={() => goToNextPage()}> <i className="fas fa-chevron-right"></i> </div>
-            </div>
+            </p>
 
             <div className="field has-addons ml-5">
               <p className="control">

src/client/constants/endpoints.ts

@@ -11,68 +11,68 @@ export const hostURIBuilder = (options: Record<string, string>): string => {
 
 export const CORS_PROXY_SERVER_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "8050",
   apiPath: "/",
 });
 
 export const COMICVINE_SERVICE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3080",
   apiPath: "/api/comicvine",
 });
 
 export const METRON_SERVICE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3080",
   apiPath: "/api/metron",
 });
 
 export const API_BASE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "8050",
   apiPath: "/api",
 });
 
 export const LIBRARY_SERVICE_HOST = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3000",
   apiPath: ``,
 });
 export const LIBRARY_SERVICE_BASE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3000",
   apiPath: "/api/library",
 });
 export const SEARCH_SERVICE_BASE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3000",
   apiPath: "/api/search",
 });
 
 export const SETTINGS_SERVICE_BASE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3000",
   apiPath: "/api/settings",
 });
 
 export const IMAGETRANSFORMATION_SERVICE_BASE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3000",
   apiPath: "/api/imagetransformation",
 });
 
 export const SOCKET_BASE_URI = hostURIBuilder({
   protocol: "ws",
-  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3001",
   apiPath: `/`,
 });

src/client/reducers/fileops.reducer.ts

@@ -233,7 +233,7 @@ function fileOpsReducer(state = initialState, action) {
     case SS_SEARCH_RESULTS_FETCHED_SPECIAL: {
       const foo = [];
       if (!isUndefined(action.data.hits)) {
-        map(action.data.hits, ({ _source }) => {
+        map(action.data.hits.hits, ({ _source }) => {
           foo.push(_source);
         });
       }
@@ -246,7 +246,7 @@ function fileOpsReducer(state = initialState, action) {
     case WANTED_COMICS_FETCHED: {
       const foo = [];
       if (!isUndefined(action.data.hits)) {
-        map(action.data.hits, ({ _source }) => {
+        map(action.data.hits.hits, ({ _source }) => {
           foo.push(_source);
         });
       }

src/funding.yml

@@ -0,0 +1 @@
+github: [rishighan]

src/server/index.ts

@@ -30,12 +30,12 @@ app.use(bodyParser.urlencoded({ extended: true }));
 // REGISTER ROUTES
 // all of the routes will be prefixed with /api
 const routes: Router[] = Object.values(router);
-// app.use("/api", routes);
+app.use("/api", routes);
 
 // Send index.html on root request
-// app.use(express.static("dist"));
-// app.use(express.static("public"));
+app.use(express.static("dist"));
+app.use(express.static("public"));
 
-// app.listen(port);
+app.listen(port);
 
-// console.log(`Server is listening on ${port}`);
+console.log(`Server is listening on ${port}`);

tsconfig.json

@@ -2,21 +2,19 @@
   "extends": "@tsconfig/node14/tsconfig.json",
   "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
+    "noImplicitAny": false,
+    "target": "es2019",
+    "jsx": "react",
+    "module": "commonjs",
+    "sourceMap": true,
+    "outDir": "./dist/",
+    "skipLibCheck": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
+    "lib": ["dom", "dom.iterable", "esnext", "webworker"],
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "strict": true
   },
   "settings": {
     "eslint.workingDirectories": [

vite.config.js

@@ -1,22 +0,0 @@
-import react from "@vitejs/plugin-react";
-import { nodeResolve } from "@rollup/plugin-node-resolve";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  publicDir: "public",
-  base: "",
-  build: "esnext",
-  plugins: [
-    nodeResolve({
-      // browser: true
-      exportConditions: ["node"],
-    }),
-    react({
-      // Use React plugin in all *.jsx and *.tsx files
-      include: "**/*.{jsx,tsx}",
-      babel: {
-        plugins: ["babel-plugin-styled-components"],
-      },
-    }),
-  ],
-});

webpack.config.js

@@ -0,0 +1,128 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require("webpack");
+const outputDirectory = "dist";
+const BundleAnalyzerPlugin =
+  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
+
+module.exports = (_, argv) => {
+  const mode = argv.mode;
+  const isDevelopment = mode === "development";
+  return {
+    entry: ["babel-polyfill", "./src/client/index.tsx"],
+    output: {
+      path: path.resolve(__dirname, outputDirectory),
+      filename: "./js/[name].bundle.js",
+    },
+    devtool: "source-map",
+    stats: {
+      children: true,
+    },
+    experiments: {
+      topLevelAwait: true,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.worker\.(js|ts)$/i,
+          use: [
+            {
+              loader: "comlink-loader",
+              options: {
+                singleton: true,
+              },
+            },
+          ],
+        },
+        {
+          test: [/\.js?$/, /\.jsx?$/, /\.tsx?$/],
+          use: [
+            {
+              loader: "babel-loader",
+              options: {
+                plugins: [
+                  isDevelopment && require("react-refresh/babel"),
+                ].filter(Boolean),
+              },
+            },
+          ],
+          exclude: /node_modules/,
+        },
+        {
+          enforce: "pre",
+          test: /\.js$/,
+          loader: "source-map-loader",
+        },
+        {
+          test: /\.css$/i,
+          use: ["style-loader", "css-loader"],
+        },
+        {
+          test: /\.s[ac]ss$/i,
+          use: [
+            // Creates `style` nodes from JS strings
+            "style-loader",
+            // Translates CSS into CommonJS
+            "css-loader",
+            // Compiles Sass to CSS
+            "sass-loader",
+          ],
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/i,
+          use: [
+            "file-loader?hash=sha512&digest=hex&name=img/[contenthash].[ext]",
+            "image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false",
+          ],
+        },
+      ],
+    },
+    resolve: {
+      extensions: ["*", ".ts", ".tsx", ".js", ".jsx", ".json"],
+      aliasFields: ["browser", "browser.esm"],
+    },
+    mode: process.env.NODE_ENV,
+    devServer: {
+      hot: true,
+      port: 3050,
+      open: true,
+      proxy: {
+        "/api/**": {
+          target: "http://localhost:8050",
+          secure: false,
+          changeOrigin: true,
+        },
+      },
+    },
+    optimization: {
+      usedExports: false,
+    },
+    plugins: [
+      // new BundleAnalyzerPlugin(),
+      new CopyPlugin({
+        patterns: [{ from: "./src/client/assets/img/", to: "img/" }],
+        options: {
+          concurrency: 100,
+        },
+      }),
+      isDevelopment && new ReactRefreshWebpackPlugin(),
+      new HtmlWebpackPlugin({
+        template: "./public/index.html",
+        favicon: "./public/favicon.ico",
+        title: "express-typescript-react",
+      }),
+      new webpack.DefinePlugin({
+        "process.env.UNDERLYING_HOSTNAME": JSON.stringify(
+          process.env.UNDERLYING_HOSTNAME,
+        ),
+      }),
+      new MiniCssExtractPlugin({
+        filename: "./css/[name].css",
+        chunkFilename: "./css/[id].css",
+      }),
+    ].filter(Boolean),
+  };
+};