Merge pull request #4655 from cloud-gov/chore-decouple-local-app-buil…

…ds-4649

chore: Decouple local app frontend build #4649

.gitignore

@@ -17,6 +17,8 @@ public/img/*
 public/uswds3/*
 !public/uswds3/.keep
 public/fonts/*
+public/bundle.js
+public/report.js
 webpack-manifest.json
 webpackAssets
 public/stats.json

api/init/index.js

@@ -14,7 +14,6 @@ const adminApi = require('../admin');
 const externalAuth = require('../external-auth');
 const {
   cacheControl,
-  devMiddleware,
   errorHandler,
   parseJson,
   xssProtection,
@@ -25,8 +24,6 @@ const passport = require('../services/passport');
 const router = require('../routers');
 const sessionConfig = require('./sessionConfig');
 
-const { NODE_ENV } = process.env;
-
 function randomNonce(_, res, next) {
   res.locals.cspNonce = crypto.randomBytes(16).toString('hex');
   next();
@@ -39,12 +36,6 @@ function configureViews(app) {
   });
 }
 
-function maybeUseDevMiddleware(app) {
-  if (NODE_ENV === 'development') {
-    app.use(devMiddleware());
-  }
-}
-
 function setUserInLocals(req, res, next) {
   res.locals.user = req.user;
   return next();
@@ -84,7 +75,6 @@ function init(app) {
   const main = express();
   main.disable('x-powered-by');
   configureViews(main);
-  maybeUseDevMiddleware(main);
   main.use(session(sessionConfig));
   main.use(passport.initialize());
   main.use(passport.session());

api/middlewares/index.js

@@ -1,7 +1,6 @@
 const authorize = require('./authorize');
 const cacheControl = require('./cache-control');
 const csrfProtection = require('./csrf-protection');
-const devMiddleware = require('./dev-middleware');
 const ensureAuthenticated = require('./ensure-authenticated');
 const ensureOrigin = require('./ensure-origin');
 const errorHandler = require('./error-handler');
@@ -15,7 +14,6 @@ module.exports = {
   authorize,
   cacheControl,
   csrfProtection,
-  devMiddleware,
   ensureAuthenticated,
   ensureOrigin,
   errorHandler,

package.json

@@ -71,7 +71,9 @@
     "start-bull-board:cg": "node -r ./api/bull-board/cfEnv.js ./api/bull-board/index.js",
     "start-bull-board:local": "DOTENV_CONFIG_PATH=./api/bull-board/.env node -r dotenv/config ./api/bull-board/index.js",
     "debug": "node --inspect index.js",
-    "watch": "NODE_ENV=development nodemon index.js --config nodemon.json",
+    "watch:api": "nodemon index.js --config nodemon.json",
+    "watch:frontend": "webpack --config webpack.config.js --watch",
+    "watch": "NODE_ENV=development concurrently \"yarn watch:api\" \"yarn watch:frontend\"",
     "test": "yarn test:prepare && yarn test:server && yarn test:rtl",
     "test:cleandb": "NODE_ENV=test node migrate.js reset",
     "test:cover": "yarn test:prepare && yarn test:server:cover && yarn test:client:cover",
@@ -84,12 +86,12 @@
     "test:server:file": "NODE_ENV=test JWT_SECRET=shh USER_AUDITOR=user_auditor mocha --exit --timeout 2500 test/api/bootstrap.test.js",
     "test:server:watch": "NODE_ENV=test JWT_SECRET=shh USER_AUDITOR=user_auditor mocha --timeout 2500 --recursive ./test/api -w",
     "test:client:watch": "NODE_ENV=test mocha --require @babel/register --recursive \"./test/frontend/**/*.{js,jsx}\" -w",
+    "test:rtl": "jest --testRegex='[^t]/frontend/.*\\.test\\.jsx' --coverage=true --collectCoverageFrom='frontend/**/*.jsx'",
     "lint": "eslint",
     "format": "prettier . --write",
     "format:check": "prettier . --check",
     "format:lint": "yarn format && yarn lint",
     "format:check:lint": "yarn format:check && yarn lint",
-    "test:rtl": "jest --testRegex='[^t]/frontend/.*\\.test\\.jsx' --coverage=true --collectCoverageFrom='frontend/**/*.jsx'",
     "migrate:create": "node migrate.js create",
     "migrate:up": "node migrate.js up || true",
     "migrate:down": "node migrate.js down",
@@ -142,6 +144,7 @@
     "chai": "^4.3.10",
     "chai-as-promised": "^7.1.1",
     "chai-fetch-mock": "^3.0.0",
+    "concurrently": "^9.1.0",
     "cookie": "^0.4.1",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.8.1",
@@ -204,8 +207,6 @@
     "webpack": "^5.91.0",
     "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-middleware": "^7.1.1",
-    "webpack-dev-server": "^5.1.0",
     "webpack-manifest-plugin": "^5.0.0"
   },
   "engines": {

webpack.config.js

@@ -9,22 +9,14 @@ const { getFeatureFlags } = require('./webpack-utils');
 
 const { NODE_ENV } = process.env;
 const isDev = NODE_ENV === 'development';
-const outputPath = isDev ? 'dist' : 'public';
+const outputPath = 'public';
 const jsDirectory = isDev ? '' : 'js/';
 const resourceFilename = isDev
   ? 'images/[name][ext]'
   : 'images/[name].[contenthash][ext]';
 const mode = isDev ? NODE_ENV : 'production';
 const devtool = isDev ? 'inline-source-map' : undefined;
 const stats = isDev ? 'minimal' : 'none';
-const devServer = isDev
-  ? {
-      static: {
-        directory: path.join(__dirname, 'dist'),
-        publicPath: '/',
-      },
-    }
-  : {};
 
 // Decide on how to use this later.
 // const bundleAnalyzer = isDev && new BundleAnalyzerPlugin({
@@ -111,7 +103,6 @@ module.exports = {
     report: './frontend/mainReport.jsx',
   },
   devtool,
-  devServer,
   stats,
   output: {
     filename: `${jsDirectory}[name].js`,