Create-react-app: Specify homepage based on environment?

[spolakh]

Is this a bug report?

No.

Hi, all. I'm wondering what's the reason to have homepage be specified as the top-level parameter of package.json rather than allow it to be set with environment variable through a command line or .env.* files? My specific usecase is this:

I have two environments - staging and prod - serving two versions of my app with a following url scheme: proxy.myhost.com/my-app-staging and proxy.myhost.com/my-app-prod (the proxy machine aggregates a lot of apps and having a subdomain for each is not feasible). I build them by invoking either yarn build-staging or yarn build-prod, but the problem is that there is no way to specify homepage based on which script I am running. I was imagining defining "build-staging": "HOMEPAGE=/my-app-staging <rest of the build command>", but it doesn't seem to be possible right now?

I'm also using react-router, so setting "homepage": "." is not an option for me. (it results in client trying to request proxy.myhost.com/my-app-staging/some-dynamic-route/static/css/main.css upon navigating to a deep link).

Right now I'm just awk'ing the package.json on every build which I hardly can call a solution.

[miraage]

Have you tried to use PUBLIC_URL environment variable?

[spolakh]

@miraage thanks for chiming in! I think I did not specify the exact problem clear: when CRA builds index.html it appends the paths to js and css bundles based on homepage (which PUBLIC_URL is sourced from), right?

So here are the options that I currently have (homepage -> resulting path to js bundle when navigating directly to proxy.myhost.com/my-app-staging/some-dynamic-path):

1. Don't set homepage at all (in effect the same as set it to /) -> proxy.myhost.com/static/js/main.js - fails because proxy doesn't know which app to request main.js from
2. . -> proxy.myhost.com/my-app-staging/some-dynamic-path/static/js/main.js - fails because it's an invalid nav path
3. proxy.myhost.com/my-app-staging -> proxy.myhost.com/my-app-staging/static/js/main.js - works, but then there is no way to build prod version of the app from the same json config (it will point to staging static resources).

Unless I'm not seeing what you are proposing?

[theZieger]

I guess @miraage was trying to give you the hint to do something like this?

"scripts": {
    "build": "react-scripts build",
    "build_staging": "PUBLIC_URL=https://proxy.myhost.com/my-app-staging/ react-scripts build",
  },

[stale[bot]]

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[bot]]

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.