Skip to content

Problem setting relative PUBLIC_URL in dev mode #8623

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
CaptainChemist opened this issue Mar 9, 2020 · 2 comments
Closed

Problem setting relative PUBLIC_URL in dev mode #8623

CaptainChemist opened this issue Mar 9, 2020 · 2 comments

Comments

@CaptainChemist
Copy link

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.

@stale
Copy link

stale bot commented Apr 8, 2020

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

@stale stale bot added the stale label Apr 8, 2020
@stale
Copy link

stale bot commented Apr 13, 2020

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

@stale stale bot closed this as completed Apr 13, 2020
@lock lock bot locked and limited conversation to collaborators Apr 18, 2020
nhooyr added a commit to nhooyr/create-react-app that referenced this issue Feb 4, 2021
nhooyr added a commit to nhooyr/create-react-app that referenced this issue Feb 4, 2021
nhooyr added a commit to nhooyr/create-react-app that referenced this issue Feb 4, 2021
As long as client side routing isn't actively used, a relative
$PUBLIC_URL should work correctly in both development and production.
There's no reason it should be limited to production.

Closes facebook#8623

Also see coder/code-server#2565
nhooyr added a commit to nhooyr/create-react-app that referenced this issue Feb 4, 2021
As long as client side routing isn't actively used, a relative
$PUBLIC_URL should work correctly in both development and production.
There's no reason it should be limited to production.

Closes facebook#8623

Also see coder/code-server#2565
nhooyr added a commit to nhooyr/create-react-app that referenced this issue Feb 5, 2021
As long as client side routing isn't used, a relative $PUBLIC_URL should
work correctly in both development and production.
There's no reason it should be limited to production.

Closes facebook#8623

Also see coder/code-server#2565
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant