Improve "make run-https" asset workflow (#5835)

* Improve "make run-https" asset workflow

**Why**:

- To prevent caching in development with the Rails public file server
- To avoid writing webpack-dev-server URLs into the asset manifest when the app is requested across the network
- To automatically recompile JavaScript while running "make run-https"

* Keep webpack port consideration

**Why**: So as not to break assets precompilation

* Flip webpack watch and webpack serve by HTTPS env

Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com>

Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com>

Makefile

@@ -98,7 +98,7 @@ run: ## Runs the development server
 	foreman start -p $(PORT)
 
 run-https: tmp/$(HOST)-$(PORT).key tmp/$(HOST)-$(PORT).crt ## Runs the development server with HTTPS
-	HTTPS=on rails s -b "ssl://$(HOST):$(PORT)?key=tmp/$(HOST)-$(PORT).key&cert=tmp/$(HOST)-$(PORT).crt"
+	HTTPS=on FOREMAN_HOST="ssl://$(HOST):$(PORT)?key=tmp/$(HOST)-$(PORT).key&cert=tmp/$(HOST)-$(PORT).crt" foreman start -p $(PORT)
 
 normalize_yaml: ## Normalizes YAML files (alphabetizes keys, fixes line length, smart quotes)
 	yarn normalize-yaml .rubocop.yml --disable-sort-keys --disable-smart-punctuation

Procfile

@@ -1,4 +1,4 @@
-web: WEBPACK_PORT=${WEBPACK_PORT:-3035} bundle exec rackup config.ru --port ${PORT:-3000} --host ${HOST:-localhost}
+web: WEBPACK_PORT=${WEBPACK_PORT:-3035} bundle exec rackup config.ru --port ${PORT:-3000} --host ${FOREMAN_HOST:-localhost}
 worker: bundle exec good_job start
 mailcatcher: mailcatcher -f
-js: WEBPACK_PORT=${WEBPACK_PORT:-3035} yarn webpack serve
+js: WEBPACK_PORT=${WEBPACK_PORT:-3035} yarn webpack $([ -n "$HTTPS" ] && echo "--watch" || echo "serve") 

config/environments/development.rb

@@ -44,6 +44,10 @@
     config.action_controller.perform_caching = false
 
     config.cache_store = :null_store
+    config.public_file_server.headers = {
+      'Cache-Control' => 'public, no-cache, must-revalidate',
+      'Vary' => '*',
+    }
   end
 
   # Bullet gem config

webpack.config.js

@@ -4,6 +4,8 @@ const WebpackAssetsManifest = require('webpack-assets-manifest');
 const RailsI18nWebpackPlugin = require('@18f/identity-rails-i18n-webpack-plugin');
 
 const env = process.env.NODE_ENV || process.env.RAILS_ENV || 'development';
+const host = process.env.HOST || 'localhost';
+const isLocalhost = host === 'localhost';
 const isProductionEnv = env === 'production';
 const isTestEnv = env === 'test';
 const mode = isProductionEnv ? 'production' : 'development';
@@ -16,7 +18,7 @@ module.exports = /** @type {import('webpack').Configuration} */ ({
   mode,
   devtool: isProductionEnv ? false : 'eval-source-map',
   target: ['web', 'es5'],
-  devServer: devServerPort && {
+  devServer: {
     static: {
       directory: './public',
       watch: false,
@@ -34,7 +36,8 @@ module.exports = /** @type {import('webpack').Configuration} */ ({
     chunkFilename: `js/[name].chunk${hashSuffix}.js`,
     sourceMapFilename: `js/[name]${hashSuffix}.js.map`,
     path: resolve(__dirname, 'public/packs'),
-    publicPath: devServerPort ? `http://localhost:${devServerPort}/packs/` : '/packs/',
+    publicPath:
+      devServerPort && isLocalhost ? `http://localhost:${devServerPort}/packs/` : '/packs/',
   },
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],