Description
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.htmlcontaining 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
servefor 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.