Description
I know that there was a new feature request for being able to set the PUBLIC_URL in development mode, but I have not been able to get it to work and when I have delved into the source code, I think there is an issue with how getPublicUrlOrPath function from react-dev-utils is being called which would not allow the relative pathing to work while it is in development mode.
From the react-scripts/config/path.js file the following definition is how the contentBasePublicPath gets defined from the webpackDevServer.config.js file:
const publicUrlOrPath = getPublicUrlOrPath(
process.env.NODE_ENV === 'development',
require(resolveApp('package.json')).homepage,
process.env.PUBLIC_URL
);
For the purposes of this explanation, let's assume that the package.json homepage and PUBLIC_URL are the same and defined as ./. When using react-scripts start, NODE_ENV is always equal to development so this first parameter will always be true.
Looking at the getPublicUrlOrPath.js file, we see that since we are defining PUBLIC_URL, we will execute this first block of code:
if (envPublicUrl) {
// ensure last slash exists
envPublicUrl = envPublicUrl.endsWith('/')
? envPublicUrl
: envPublicUrl + '/';
// validate if `envPublicUrl` is a URL or path like
// `stubDomain` is ignored if `envPublicUrl` contains a domain
const validPublicUrl = new URL(envPublicUrl, stubDomain);
return isEnvDevelopment
? envPublicUrl.startsWith('.')
? '/'
: validPublicUrl.pathname
: // Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
envPublicUrl;
}
The issue with this block of code, is that it will always return / in this configuration because isEnvDevelopment will be true as mentioned above, and since we defined our PUBLIC_URL as ./, the second part of the ternary operator will also evaluate to true which which will return /.
This same problem also occurs even if you don't define the PUBLIC_URL as shown in the second block of this function:
if (homepage) {
// strip last slash if exists
homepage = homepage.endsWith('/') ? homepage : homepage + '/';
// validate if `homepage` is a URL or path like and use just pathname
const validHomepagePathname = new URL(homepage, stubDomain).pathname;
return isEnvDevelopment
? homepage.startsWith('.')
? '/'
: validHomepagePathname
: // Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
homepage.startsWith('.')
? homepage
: validHomepagePathname;
}
You can see that if isEnvDevelopement is true and the homepage starts with . then it returns /, so the behavior will be the same here as well.
So in summary although work was done in 3.4.0 to allow setting PUBLIC_URL in development, I can't get that behavior to work using the relative path . as you'd expect.