proxying public directory in development only

Author: kellyrmilligan

packages/react-scripts/config/webpack.config.dev.js

@@ -31,8 +31,7 @@ if (publicPath === './') {
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
-const publicUrl = publicPath.slice(0, -1);
-
+const publicUrl = paths.servedPath.slice(0, -1) + '/assets';
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl === '.' ? '' : publicUrl);
 // This is the development configuration.

packages/react-scripts/config/webpackDevServer.config.js

@@ -15,6 +15,7 @@ const ignoredFiles = require('react-dev-utils/ignoredFiles');
 const url = require('url');
 const config = require('./webpack.config.dev');
 const paths = require('./paths');
+const express = require('express');
 
 const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 const host = process.env.HOST || '0.0.0.0';
@@ -104,6 +105,10 @@ module.exports = function(proxy, allowedHost) {
       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
       app.use(noopServiceWorkerMiddleware(servedPathPathname));
       app.use(serveAppMiddleware(servedPathPathname));
+      app.use(
+        `${config.output.publicPath.slice(0, -1)}/assets`,
+        express.static(paths.appPublic)
+      );
     },
   };
 };