Allow to override host/port for dev server #4468

mweibel · 2018-05-15T16:04:24Z

Is this a bug report?

No

This is related to #3814

We embedded a CRA-created app within another, larger app and would like to be able to adjust the host/port combination the webpack dev server/client use to connect to each other.

Our use case: the CRA-created app is a new frontend for a part of an existing application and requires authentication to access. Authentication is done via a session / cookie and therefore requests from the CRA-created app are required to send the session cookie alongside. This can be achieved in other ways than living on the same host/port combination as the "host" application but just serving it directly from the "host" application is certainly the easiest way when you don't have an existing SSO endpoint.

The problem: We run the dev server alongside the "host" application. We access /static/js/bundle.js via http://localhost:3000/static/js/bundle.js in an HTML file served by the "host" application (e.g. on host/port example.com:80). When accessing that HTML file served by the host application, the JS is loaded successfully. It then tries to connect to the webpack dev server on http://example.com/sockjs-node/... which is not working obviously because the dev server is running on localhost:3000.

We can successfully develop using that setup, just the dev server/hot reloading is not working.

I assume this would need one adjustement in react-dev-scripts to accept an env variable to connect to the dev server. Maybe we also need to adjust something based on an env variable in the dev webpack config.

Is this feature out of scope for CRA or would you be open for a PR?

A minimal reproducible example to show this:

create a new CRA app
run yarn start / npm start
create somewhere a new directory with just an index.html containing the following:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script type="text/javascript" src="http://localhost:3000/static/js/bundle.js"></script></body>
</html>

use a static HTML server like serve for that directory and access it.
you'll notice the react app gets served correctly, webpack-dev-server related requests fail because they go to the wrong host/port combination.

The text was updated successfully, but these errors were encountered:

miraage · 2018-05-16T09:11:58Z

There are Advanced Configuration Docs.
Take a look at HOST and PORT.

mweibel · 2018-05-17T08:36:45Z

@miraage I'm aware of HOST and PORT but that doesn't help in this case.
It could be you misunderstood the issue description, I'll try to explain it differently:

CRA-App is started using npm start listening on http://localhost:3000
Host-App is started, listening on http://example.local
Browser accesses http://example.local/cra-app which contains the HTML I posted above
Browser gets bundle.js from CRA dev server (http://localhost:3000/static/js/bundle.js)
After the bundle is downloaded, it tries to establish a websocket (sockjs) connection to window.location.hostname / window.location.port which is in this case example.local and port 80

Therefore the bundle tries to connect to the wrong host/port combination because the dev server only listens on localhost:3000.

Is this now more easily understandable?

ctrlShiftBryan · 2018-05-17T16:41:36Z

Running into the exact same problem where I need to have SocketJS connect to something other than what is found in window.location.

jylin · 2018-08-12T18:44:45Z

Running into this issue as well with a similar setup. If I just go into "node_modules" and edit webpackHotDevClient.js to fix the websocket port, then it works. You get basically the same thing as the auto-reloading page from "npm start" except servable from a backend app (it also means you can template the index.html with a backend framework).

I think ideally the port (and maybe host) that I modified locally in webpackHotDevClient.js would be configurable.

ryanmcgrath · 2018-09-07T18:10:53Z

I would love to know why this is still an issue, as this isn't the only issue open for it.

The logic thrown about in that other issue astounds me; exposing a defaulted port/host combo for this will in no way make weird or otherwise unwanted compromises for end-users. I've worked with enough people where ejecting is the norm, and this is consistently a pain point that nobody seems to want to press CRA about much because they've indicated it won't change.

wheelibin · 2018-09-28T06:40:31Z

Just wanted to leave another vote for this feature.

I'm integrating a CRA app into a .NET MVC app, so like others I am running the app from a different port.

This wouldn't even have to be configurable, the port in webpackHotDevClient.js just needs to use the same port as the dev server, then it would continue to work for the 99% of users who don't care about this, and would work for those of us trying to integrate CRA apps into another app.

stale · 2018-12-02T21:56:52Z

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.

felixbumm · 2018-12-06T13:32:29Z

We had the same issue as we would integrate a CRA app into another application through an iframe. I don't really understand why this rather easy fix can't be integrated.

hellocontrol-bng · 2018-12-28T00:17:20Z

We are running into this issue as well. In our case, it is because we are running two separate projects on the same domain, and the one using this feature is on a subpath using a reverse proxy. ProjectA runs on http://mysite.local and ProjectB (which uses CRA) runs on http://mysite.local/sub, which is reverse proxied to localhost:9090. I would love to be able to tell webpackHotDevClient to use localhost:9090 as the hostname/port.

ramezkabbani · 2019-01-23T17:45:49Z

This feature clearly has interest, and doesn't add complexity. What are the objections with implementing it?

I think ideally the port (and maybe host) that I modified locally in webpackHotDevClient.js would be configurable.

@jylin I edited the port and that worked initially, but if I update my code the second request is back to localhost:3000. Did you have to edit anything other than these lines?

n6g7 · 2019-01-28T10:44:40Z

Running into this issue as well. For reference webpack-dev-server's client has a nice solution to this: it uses the host/port in the url of the <script> tag that loaded the bundle.

Could we do something similar here?

stale · 2019-02-27T11:14:18Z

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.

n6g7 · 2019-02-27T14:43:30Z

For reference webpack-dev-server's client has a nice solution to this: it uses the host/port in the url of the <script> tag that loaded the bundle.

Happy to send a PR to do something similar here, but I'd like the approach to be approved by a maintainer first. :)

stale · 2019-03-29T14:45:57Z

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 · 2019-04-03T15:02:05Z

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.

uidev547 · 2019-04-08T10:56:55Z

+1, Needed to have configuration for pot and host

n6g7 · 2019-04-08T13:49:34Z

I've opened a PR here: #6724 but no feedback yet. I don't know how to get feedback / who should review it and nothing about this in the contribution guidelines.
@miraage can you help?

miraage · 2019-04-08T14:24:06Z

@n6g7 i'm just a fellow contributor. I'd recommend you to ask somebody from https://github.com/facebook/create-react-app/blob/master/.github/CODEOWNERS#L1

Timer mentioned this issue May 24, 2018

Service Controller not rendering #4506

Closed

Timer added this to the 2.0.0 milestone May 24, 2018

viankakrisna mentioned this issue Jun 1, 2018

enable manifest plugin on dev #4014

Merged

Timer modified the milestones: 2.0.x, 2.x Sep 26, 2018

Timer removed this from the 2.x milestone Nov 2, 2018

stale bot added the stale label Dec 2, 2018

stale bot removed the stale label Dec 6, 2018

stale bot added the stale label Feb 27, 2019

stale bot removed the stale label Feb 27, 2019

n6g7 mentioned this issue Mar 27, 2019

Use current script URL when connecting to WS server. #6724

Open

stale bot added the stale label Mar 29, 2019

stale bot closed this as completed Apr 3, 2019

lock bot locked and limited conversation to collaborators Apr 13, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow to override host/port for dev server #4468

Allow to override host/port for dev server #4468

mweibel commented May 15, 2018 •

edited

Loading

miraage commented May 16, 2018

mweibel commented May 17, 2018 •

edited

Loading

ctrlShiftBryan commented May 17, 2018

jylin commented Aug 12, 2018

ryanmcgrath commented Sep 7, 2018

wheelibin commented Sep 28, 2018

stale bot commented Dec 2, 2018

felixbumm commented Dec 6, 2018

hellocontrol-bng commented Dec 28, 2018

ramezkabbani commented Jan 23, 2019 •

edited

Loading

n6g7 commented Jan 28, 2019 •

edited

Loading

stale bot commented Feb 27, 2019

n6g7 commented Feb 27, 2019

stale bot commented Mar 29, 2019

stale bot commented Apr 3, 2019

uidev547 commented Apr 8, 2019

n6g7 commented Apr 8, 2019

miraage commented Apr 8, 2019

Allow to override host/port for dev server #4468

Allow to override host/port for dev server #4468

Comments

mweibel commented May 15, 2018 • edited Loading

Is this a bug report?

miraage commented May 16, 2018

mweibel commented May 17, 2018 • edited Loading

ctrlShiftBryan commented May 17, 2018

jylin commented Aug 12, 2018

ryanmcgrath commented Sep 7, 2018

wheelibin commented Sep 28, 2018

stale bot commented Dec 2, 2018

felixbumm commented Dec 6, 2018

hellocontrol-bng commented Dec 28, 2018

ramezkabbani commented Jan 23, 2019 • edited Loading

n6g7 commented Jan 28, 2019 • edited Loading

stale bot commented Feb 27, 2019

n6g7 commented Feb 27, 2019

stale bot commented Mar 29, 2019

stale bot commented Apr 3, 2019

uidev547 commented Apr 8, 2019

n6g7 commented Apr 8, 2019

miraage commented Apr 8, 2019

mweibel commented May 15, 2018 •

edited

Loading

mweibel commented May 17, 2018 •

edited

Loading

ramezkabbani commented Jan 23, 2019 •

edited

Loading

n6g7 commented Jan 28, 2019 •

edited

Loading