Skip to content
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

Allow to override host/port for dev server #4468

Closed
mweibel opened this issue May 15, 2018 · 18 comments
Closed

Allow to override host/port for dev server #4468

mweibel opened this issue May 15, 2018 · 18 comments
Labels

Comments

@mweibel
Copy link

@mweibel mweibel commented May 15, 2018

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:

  1. create a new CRA app
  2. run yarn start / npm start
  3. 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>
  1. use a static HTML server like serve for that directory and access it.
  2. you'll notice the react app gets served correctly, webpack-dev-server related requests fail because they go to the wrong host/port combination.
@miraage
Copy link
Contributor

@miraage miraage commented May 16, 2018

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

@mweibel
Copy link
Author

@mweibel mweibel commented May 17, 2018

@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
Copy link

@ctrlShiftBryan ctrlShiftBryan commented May 17, 2018

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

@jylin
Copy link

@jylin jylin commented Aug 12, 2018

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
Copy link

@ryanmcgrath ryanmcgrath commented Sep 7, 2018

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.

@Timer Timer modified the milestones: 2.0.x, 2.x Sep 26, 2018
@wheelibin
Copy link

@wheelibin wheelibin commented Sep 28, 2018

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.

@Timer Timer removed this from the 2.x milestone Nov 2, 2018
@stale
Copy link

@stale stale bot commented Dec 2, 2018

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 Dec 2, 2018
@felixbumm
Copy link

@felixbumm felixbumm commented Dec 6, 2018

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.

@stale stale bot removed the stale label Dec 6, 2018
@hellocontrol-bng
Copy link

@hellocontrol-bng hellocontrol-bng commented Dec 28, 2018

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
Copy link

@ramezkabbani ramezkabbani commented Jan 23, 2019

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
Copy link

@n6g7 n6g7 commented Jan 28, 2019

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
Copy link

@stale stale bot commented Feb 27, 2019

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 Feb 27, 2019
@n6g7
Copy link

@n6g7 n6g7 commented Feb 27, 2019

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
Copy link

@stale stale bot commented Mar 29, 2019

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 Mar 29, 2019
@stale
Copy link

@stale stale bot commented Apr 3, 2019

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 Apr 3, 2019
@uidev547
Copy link

@uidev547 uidev547 commented Apr 8, 2019

+1, Needed to have configuration for pot and host

@n6g7
Copy link

@n6g7 n6g7 commented Apr 8, 2019

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
Copy link
Contributor

@miraage miraage commented Apr 8, 2019

@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

@lock lock bot locked and limited conversation to collaborators Apr 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.