%PUBLIC_URL% in development #6280

ericclemmons · 2019-01-26T04:00:12Z

In response to #6135 (and possibly replacing #4158), I'm attempting to enable support for homepage in development as well.

This way, development matches production URLs, which is especially necessary when using CRA as part of a larger app, or behind a proxy.

I've been able to record a video of this working:

https://gfycat.com/AcclaimedEssentialAlabamamapturtle

I could use some help on how I could further test this, & to what degree.

ericclemmons · 2019-01-31T04:07:35Z

Aha! Looks like I can duplicate the tests in create-react-app/test/fixtures/relative-paths to include this example.

iamandrewluca · 2019-02-06T08:18:18Z

@ericclemmons with this PR on npm run start this will open localhost:3000/homepage instead of only localhost:3000 ?
Thanks!

ericclemmons · 2019-02-06T10:10:07Z

Correct.

…

wmpay · 2019-02-08T15:55:47Z

Need any help getting this merged? I currently need this for my development environment. In production we have multiple apps being served from different folders, and I would like my development environment to mimic that. e.g. localhost/admin

nhagen · 2019-02-08T15:59:56Z

We've been waiting for this for a long time. Also happy to help if there are specific to-dos left to work on. Do we know whats causing the build failure?

ericclemmons · 2019-02-08T16:04:22Z

I need help from contributors to know if this is ready to merge, or what's missing. The failed build seems to be sporadic in CI due to timeouts with NPM. I don't know what else to do besides wait for approval...

raix · 2019-02-28T12:25:19Z

@ericclemmons can you try merging in master both to resolve the merge conflict and rerun the build (if it's npm hickups maybe add - travis_retry yarn)

And yes, we would also like to see this feature in development as it enables us to have near 1:1 mapping with our production environment when developing

raix · 2019-03-05T14:54:29Z

@ericclemmons let me know if you need any help on this pull request

mhornbacher · 2019-03-06T20:54:39Z

@raix, @ericclemmons is there anything I can do to help to make this feature a reality?

Is the entire bottleneck the failing tests?

Flydiverny · 2019-04-05T00:35:42Z

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

@@ -59,19 +59,17 @@ module.exports = function(webpackEnv) {
  // Webpack uses `publicPath` to determine where the app is being served from.
  // It requires a trailing slash, or the file assets will get an incorrect path.
  // In development, we always serve from the root. This makes config easier.


I suppose the last part of the comment isn't true after this PR? :D

Suggested change

// In development, we always serve from the root. This makes config easier.

Flydiverny · 2019-04-05T00:36:25Z

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

@@ -68,7 +68,7 @@ module.exports = function(proxy, allowedHost) {
    hot: true,
    // It is important to tell WebpackDevServer to use the same "root" path
    // as we specified in the config. In development, we always serve from /.


Last part of the comment here as well

Suggested change

// as we specified in the config. In development, we always serve from /.

// as we specified in the config.

ericclemmons · 2019-04-05T00:49:04Z

I'm unavailable for the next week, so if a contributor can append these commits, I'd appreciate it.

raix · 2019-04-29T13:13:57Z

@ericclemmons do you need help addressing review comments? or are you waiting for more reviewers to join?

ArnaudBarre · 2019-04-29T15:54:26Z

I tested these changes (on top of v3 release). It works well but it's tricky to get the assets in public works well. If your homepage (or PUBLIC_URL in my case is /project-1), you need to have your favicon.ico in public/project-1/ for dev, but public/ for build.

It's good if you want to start multiple dev instance with different assets. But not sure it's the main use case and it requires some cp/mv before yarn build.

May be it can be simplify if we differentiate publicPath from publicUrl in dev env, but I'm not sure and I didn't succeed.

Also some comment could be updated in webpack.config.js:
L. 175: // We use "/" in development.
L. 556:

// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
// In development, this will be an empty string.

raix · 2019-04-29T18:01:59Z

@ArnaudBarre I see, so we actually have two scenarios to cater for:

The development server is behind a proxy that maps paths to different services
- The assets should be served from root eg. "publicPath=/"
- Urls / require / HMR should use the "public" url
The development server is using a proxy to access the backend and rest of the system
- The development should only serve assets from the "publicPath=publicUrl" - everything else should be passed on using the proxy config
- Urls / require / HMR should use the the "public" url

We might actually ending up using both since we some times do development in containers and other times use the development server to proxy to the cluster.

jtblanche · 2019-05-01T03:44:21Z

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

@@ -68,7 +68,7 @@ module.exports = function(proxy, allowedHost) {
    hot: true,
    // It is important to tell WebpackDevServer to use the same "root" path
    // as we specified in the config. In development, we always serve from /.
-    publicPath: '/',
+    publicPath: paths.servedPath.slice(0, -1),


I have been messing around with this locally and I have found that
further down in this file needs to be updated as well, something similar to:

historyApiFallback: { // Paths with dots should still use the history fallback. // See https://github.com/facebook/create-react-app/issues/387. disableDotRule: true, index: paths.servedPath, },

otherwise when you go to pages other than the home page with react router setup and refresh it will fail to load files.

tbhag · 2019-05-09T16:23:16Z

I suppose it may be complex to handle the two use cases (in near term) but perhaps this PR is a good first step to get out? We've forked this PR at my company because we really needed to set PUBLIC_URL in development. Currently stress testing but seems to be working just fine. It's kinda like the same as it was with a little more control in dev

brunodahora · 2019-05-15T13:50:27Z

Hey guys, we need exact this to be able to use CRA in our projects.
How is the status?
Can we help with something?

margobaxter · 2019-05-20T13:56:08Z

I would like to be able to use this in my project. What's the status? Can we get this merged?

schemburkar · 2019-05-20T14:12:25Z

Same here, would like to use this in its current form as well.

…

________________________________ From: Margo Baxter <[email protected]> Sent: Monday, May 20, 2019 7:27:37 PM To: facebook/create-react-app Cc: Shubhan Chemburkar; Manual Subject: Re: [facebook/create-react-app] %PUBLIC_URL% in development (#6280) I would like to be able to use this in my project. What's the status? Can we get this merged? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#6280?email_source=notifications&email_token=AAYDKM4CVJXO5TO2ZBQXXHLPWKU5DA5CNFSM4GSP4ON2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVY47YQ#issuecomment-493998050>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AAYDKM35MGCFVACORYYYTK3PWKU5DANCNFSM4GSP4ONQ>.

jiahuay · 2019-05-20T21:50:15Z

I also want to be able to use this in my project. What is blocking this pull request from being merged? Anything we can help?

omninonsense · 2019-05-22T16:12:15Z

Another thing that might be useful to make the /sockjs-node path configurable, this will require changing a few other things (react-dev-utils comes to mind, and possibly others). The comment in react-dev-utils/webpackHotDevClient.js:66 says it's hard-coded in webpack-dev-server, but that is no longer the case (according to this).

I guess the most convenient way would be through an environment variable, (WEBPACK_DEV_SOCKJS_PATH, or just SOCKJS_PATH), since it probably doesn't need to be inferred from homepage.

The reason I am suggesting this is because in more complex development setups that mimic production it's not always possible to access to /sockjs-node (like using a local kubernetes cluster with an ingress controller).

Edit: Although, this suggestion might be better suited for another PR.

menocomp · 2019-06-04T12:09:49Z

Is that fork going to be merged one day? I can not wait for getting public-url to work in development to mimic the same behaviour as in production.

brettwinterflood · 2019-06-10T10:49:28Z

Let's close the loop and merge!

jannikkeye · 2019-06-18T12:31:30Z

As there have already been two approvals for reviews, is this now going to be merged any time soon? I encountered this issue now in a serverless environment using now.sh. Local development is hindered by CRA not supporting PUBLIC_PATH under development environment.

tim-phillips · 2019-06-19T19:41:53Z

Listen, anyone can submit a review, so I would take reviews from members outside the team and especially non-contributors with a grain of salt.

With that said, there are still unresolved comments, one of which mentions that this PR breaks react-router.

ericclemmons · 2019-06-19T20:21:36Z

If anyone is interested in funding my time to get this PR resolved, let me know. I don't have any free hours remaining since I created this. :(

…

On Wed, Jun 19, 2019, 12:43 PM Tim Phillips ***@***.***> wrote: Listen, anyone can submit a review, so I would take reviews from members outside the team and especially non-contributors with a grain of salt. With that said, there are still unresolved comments, one of which mentions that this PR breaks react-router. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6280?email_source=notifications&email_token=AAADWTWQJJLAE62BW6WW4BTP3KD5RA5CNFSM4GSP4ON2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYDCGII#issuecomment-503718689>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAADWTX3LLRQP7Y3OB6M4TLP3KD5RANCNFSM4GSP4ONQ> .

raix · 2019-06-20T15:13:44Z

@ericclemmons If you or the mainainers of CRA don't have the time to fix the comments - we could create a new pull-request and get this ready - but I would like to have a "go" from one of the maintainers that they actually want this change in.. cc @iansu

It's fair enough if CRA project is only meant as a helping hand to newcommers to get started with react and not for advanced usage/developers/containers etc.

@tim-phillips I agree that the code owners should review - but the react router issue is a react router issue - in the sense that it's solvable by the developer? eg. you could set the base url to match what ever your PUBLIC_URL is.

iamandrewluca · 2019-06-20T15:34:29Z

I always use this code to initialize router history

const history = createBrowserHistory({
  basename: process.env.PUBLIC_URL
})

iamandrewluca · 2019-06-21T07:57:17Z

I have the time to take care of this. I made a new PR with all this changes, and review changes.
#7259

ianschmitz · 2019-06-22T16:40:31Z

Closing in favor of #7259

facebook-github-bot added the CLA Signed label Jan 26, 2019

This was referenced Jan 26, 2019

html-webpack-plugin-for-multihtml .has a bug in webpack-dev-server jantimon/html-webpack-plugin#1145

Closed

Template variables not being replaced when publicPath is not "/" jantimon/html-webpack-plugin#1146

Closed

serve app under homepage #4158

Closed

ericclemmons force-pushed the PUBLIC_URL-in-development branch from 4ed8789 to b40888e Compare January 31, 2019 03:46

ianschmitz added the tag: enhancement label Feb 9, 2019

ianschmitz added this to the 2.1.x milestone Feb 9, 2019

ericclemmons requested review from amyrlam, bugzpodder, gaearon, ianschmitz, iansu, mrmckeb, petetnt and Timer as code owners March 10, 2019 03:17

ericclemmons added 6 commits March 9, 2019 19:19

Add example "homepage" (to be removed later)

9b7d2a7

Set publicPath to paths.servedPath for all environments

115135b

Add note about bug with webpackDevServer + html plugin

500eee7

Use publicUrl for all environments

19b4218

webpackDevServer uses paths.servedPath

2dacd86

Support custom pathname in WebpackDevServerUtils.prepareUrls

4091c07

Flydiverny reviewed Apr 5, 2019

View reviewed changes

iansu modified the milestones: 3.0, 3.1 Apr 22, 2019

jtblanche suggested changes May 1, 2019

View reviewed changes

iansu mentioned this pull request May 6, 2019

support PUBLIC_URL during development as well #6135

Closed

dorianamouroux approved these changes Jun 8, 2019

View reviewed changes

leonardodino mentioned this pull request Jun 11, 2019

chore(docs): Add --prefix-paths option to gatsby develop docs gatsbyjs/gatsby#14319

Closed

brettwinterflood approved these changes Jun 11, 2019

View reviewed changes

iamandrewluca mentioned this pull request Jun 21, 2019

feat(react-scripts): allow PUBLIC_URL in develoment mode #7259

Merged

14 tasks

ianschmitz closed this Jun 22, 2019

lock bot locked and limited conversation to collaborators Jun 27, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

%PUBLIC_URL% in development #6280

%PUBLIC_URL% in development #6280

ericclemmons commented Jan 26, 2019 •

edited

Loading

ericclemmons commented Jan 31, 2019

iamandrewluca commented Feb 6, 2019

ericclemmons commented Feb 6, 2019 via email

wmpay commented Feb 8, 2019

nhagen commented Feb 8, 2019

ericclemmons commented Feb 8, 2019 via email

raix commented Feb 28, 2019

raix commented Mar 5, 2019

mhornbacher commented Mar 6, 2019

Flydiverny Apr 5, 2019

Flydiverny Apr 9, 2019

Flydiverny Apr 5, 2019

Flydiverny Apr 9, 2019

ericclemmons commented Apr 5, 2019 via email

raix commented Apr 29, 2019

ArnaudBarre commented Apr 29, 2019 •

edited

Loading

raix commented Apr 29, 2019

jtblanche May 1, 2019

tbhag commented May 9, 2019 •

edited

Loading

brunodahora commented May 15, 2019

margobaxter commented May 20, 2019

schemburkar commented May 20, 2019 via email

jiahuay commented May 20, 2019 •

edited

Loading

omninonsense commented May 22, 2019 •

edited

Loading

menocomp commented Jun 4, 2019

brettwinterflood commented Jun 10, 2019

jannikkeye commented Jun 18, 2019

tim-phillips commented Jun 19, 2019

ericclemmons commented Jun 19, 2019 via email

raix commented Jun 20, 2019

iamandrewluca commented Jun 20, 2019 •

edited

Loading

iamandrewluca commented Jun 21, 2019 •

edited

Loading

ianschmitz commented Jun 22, 2019

	// as we specified in the config. In development, we always serve from /.
	// as we specified in the config.

%PUBLIC_URL% in development #6280

%PUBLIC_URL% in development #6280

Conversation

ericclemmons commented Jan 26, 2019 • edited Loading

ericclemmons commented Jan 31, 2019

iamandrewluca commented Feb 6, 2019

ericclemmons commented Feb 6, 2019 via email

wmpay commented Feb 8, 2019

nhagen commented Feb 8, 2019

ericclemmons commented Feb 8, 2019 via email

raix commented Feb 28, 2019

raix commented Mar 5, 2019

mhornbacher commented Mar 6, 2019

Flydiverny Apr 5, 2019

Choose a reason for hiding this comment

Flydiverny Apr 9, 2019

Choose a reason for hiding this comment

Flydiverny Apr 5, 2019

Choose a reason for hiding this comment

Flydiverny Apr 9, 2019

Choose a reason for hiding this comment

ericclemmons commented Apr 5, 2019 via email

raix commented Apr 29, 2019

ArnaudBarre commented Apr 29, 2019 • edited Loading

raix commented Apr 29, 2019

jtblanche May 1, 2019

Choose a reason for hiding this comment

tbhag commented May 9, 2019 • edited Loading

brunodahora commented May 15, 2019

margobaxter commented May 20, 2019

schemburkar commented May 20, 2019 via email

jiahuay commented May 20, 2019 • edited Loading

omninonsense commented May 22, 2019 • edited Loading

menocomp commented Jun 4, 2019

brettwinterflood commented Jun 10, 2019

jannikkeye commented Jun 18, 2019

tim-phillips commented Jun 19, 2019

ericclemmons commented Jun 19, 2019 via email

raix commented Jun 20, 2019

iamandrewluca commented Jun 20, 2019 • edited Loading

iamandrewluca commented Jun 21, 2019 • edited Loading

ianschmitz commented Jun 22, 2019

ericclemmons commented Jan 26, 2019 •

edited

Loading

ArnaudBarre commented Apr 29, 2019 •

edited

Loading

tbhag commented May 9, 2019 •

edited

Loading

jiahuay commented May 20, 2019 •

edited

Loading

omninonsense commented May 22, 2019 •

edited

Loading

iamandrewluca commented Jun 20, 2019 •

edited

Loading

iamandrewluca commented Jun 21, 2019 •

edited

Loading