Add the server and proxy setup to vite.config.js

Without it, we can't access the vite dev server from outside docker. Use * instead of the file: path for the shared package, so that changes are picked up immediately. Use the correct comboBox import instead of using a relative path to node_modules. Change convertToPropType.js to ESM. Add shared to the workspaces array. Tell prettier to ignore vite.config.js.
sfbrigade · Mar 23, 2023 · cbb8e9d · cbb8e9d
1 parent 2ddcbbf
commit cbb8e9d
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 254 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,5 +1,7 @@
 # Ignore artifacts:
 build
 
+client/vite.config.js
+
 user-guides/guides
 user-guides/build
diff --git a/client/package.json b/client/package.json
@@ -24,12 +24,15 @@
     "react-use-websocket": "^2.9.1",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
-    "shared": "file:../shared",
+    "shared": "*",
     "use-sound": "^4.0.1",
     "uswds": "^2.13.3",
     "vite": "^4.2.1",
     "vite-plugin-svgr": "^2.4.0"
   },
+  "devDependencies": {
+    "esbuild": "^0.17.12"
+  },
   "scripts": {
     "start": "vite serve",
     "build": "vite build",
@@ -112,8 +115,5 @@
       "build",
       "node_modules"
     ]
-  },
-  "devDependencies": {
-    "esbuild": "^0.17.12"
   }
 }
diff --git a/client/src/Components/FormComboBox.js b/client/src/Components/FormComboBox.js
@@ -1,14 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import * as uswdsComponents from '../../../node_modules/uswds/src/js/components';
-//import { comboBox } from '../../../node_modules/uswds/src/js/components';
+import { comboBox } from 'uswds/src/js/components';
 
 import { ValidationState } from '../Models/PatientFieldData';
 import ValidationMessage from './ValidationMessage';
 
-const { comboBox } = uswdsComponents;
-
 /**
  * Normally, the USWDS ComboBox ONLY allows selection of a value from the options list. The
  * text input is used only as a typeahead search filter.

diff --git a/client/src/utils/convertToPropType.js b/client/src/utils/convertToPropType.js
@@ -1,4 +1,4 @@
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
 
 const PropTypeLookup = {
   text: 'string',
@@ -7,7 +7,7 @@ const PropTypeLookup = {
   boolean: 'bool',
 };
 
-module.exports = function convertToPropType(field) {
+export function convertToPropType(field) {
   const { name, type, isParam, typeArgs, required } = field;
   // if the field isn't something we want to convert to a propType, then return an empty array so
   // getFieldHash() won't include this field
@@ -29,4 +29,4 @@ module.exports = function convertToPropType(field) {
   }
 
   return result;
-};
+}
diff --git a/client/vite.config.js b/client/vite.config.js
@@ -1,26 +1,53 @@
-//import path from "node:path";
-//import process from "node:process";
-import fs from "node:fs";
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import svgr from "vite-plugin-svgr";
-import * as esbuild from "esbuild";
+import fs from 'node:fs';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
+import * as esbuild from 'esbuild';
 
 const SourceJSPattern = /\/src\/.*\.js$/;
+
+// this plugin will force Vite to look for JSX in all .js files while building the production
+// bundler, so we don't have to rename every single file
 const rollupPlugin = (matchers) => ({
-  name: "js-in-jsx",
+  name: 'js-in-jsx',
   load(id) {
-    if (matchers.some(matcher => matcher.test(id))) {
-      const file = fs.readFileSync(id, { encoding: "utf-8" });
-      return esbuild.transformSync(file, { loader: "jsx" });
+    if (matchers.some((matcher) => matcher.test(id))) {
+      const file = fs.readFileSync(id, { encoding: 'utf-8' });
+      return esbuild.transformSync(file, { loader: 'jsx' });
     }
-  }
+  },
 });
 
+// proxy these routes to the server running on port 4000.  this takes the place
+// of setupProxy.js in webpack.
+const proxy = ['/api', '/auth', '/libraries', '/wss'].reduce(
+  (result, route) => ({
+    ...result,
+    [route]: {
+      target: 'http://localhost:4000',
+      changeOrigin: true,
+      ws: true,
+    },
+  }),
+  {}
+);
+
 export default defineConfig({
+  server: {
+    // vite defaults to an unused port, so force it to 3000
+    port: 3000,
+    // if port 3000 is being used, then quit (though it's not clear this actually works)
+    strict: true,
+    // no idea why this is necessary, but without it, the Vite dev server isn't reachable
+    // from a browser on the host machine
+    host: true,
+    proxy,
+  },
   plugins: [
+    // raw SVG icons are imported in some places, so add a plugin so they get
+    // wrapped in a React component like in webpack
     svgr(),
-    react()
+    react(),
   ],
   build: {
     rollupOptions: {
@@ -34,88 +61,21 @@ export default defineConfig({
   },
   optimizeDeps: {
     include: [
-      "uswds",
-      "../shared/metadata"
+      'uswds',
+      '../shared/metadata',
+      '../shared/constants'
     ],
     esbuildOptions: {
       loader: {
-        ".js": "jsx",
+        '.js': 'jsx',
       },
     },
   },
   esbuild: {
-    loader: "jsx",
+    // point the JSX parser at all .js files, so we don't have to rename them all to .jsx
+    loader: 'jsx',
     include: [SourceJSPattern],
+    // we have to explicitly include this empty exclude key, for some reason
     exclude: [],
   },
 });
-
-
-
-//export default defineConfig({
-//  plugins: [
-////    {
-////      name: 'load-js-files-as-jsx',
-////      async load(id) {
-////        if (!id.match(/src\/.*\.js$/)) {
-////          return;
-////        }
-////
-////        const file = await fs.readFile(id, 'utf-8');
-////        return esbuild.transformSync(file, { loader: 'jsx' });
-////      },
-////    },
-//    react(),
-//  ],
-//  esbuild: {
-//    loader: 'jsx',
-//    include: /src\/.*\.js$/,
-//    exclude: [],
-//  },
-//  optimizeDeps: {
-//    esbuildOptions: {
-//      plugins: [
-//        {
-//          name: "load-js-files-as-jsx",
-//          setup(build) {
-//            build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
-//              loader: "jsx",
-//              contents: await fs.readFile(args.path, "utf8"),
-//            }));
-//          },
-//        },
-//      ],
-//    },
-////      loader: {
-////        '.js': 'jsx',
-////        '.ts': 'tsx',
-////      },
-//  },
-////  root: "src",
-////  publicDir: "../public",
-////  build: {
-////    outDir: "../dist"
-////  },
-////  resolve: {
-////    alias: { "/src": path.resolve(process.cwd(), "src") }
-////  },
-//});
-
-
-//const jsxInJs = {
-//  build: {
-//    rollupOptions: {
-//      plugins: (matchers) => [rollupPlugin(matchers)],
-//    },
-//    commonjsOptions: {
-//      transformMixedEsModules: true,
-//    },
-//  },
-//  optimizeDeps: {
-//    esbuildOptions: {
-//      loader: {
-//        '.js': 'jsx',
-//      },
-//    },
-//  },
-//};
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "workspaces": [
     "client",
     "server",
+    "shared",
     "e2e",
     "user-guides"
   ],

diff --git a/server/package.json b/server/package.json
@@ -25,7 +25,7 @@
     "sequelize-auto": "^0.5.4",
     "sequelize-cli": "^6.4.1",
     "sequelize-fixtures": "^1.2.0",
-    "shared": "file:../shared",
+    "shared": "*",
     "supertest": "^4.0.2",
     "supertest-session": "^4.1.0",
     "utf-8-validate": "^5.0.9",