<p>I'm rather new to working with docker, so it's very possible I just have no idea what I am doing. I have a react frontend that connects to a loopback server. When running them locally, I have the package.json file setup to where I just run &quot;npm start&quot; from the base project directory, and both sides of the application run with one on port 3000 and the other at port 3001. This works well locally, and when I try to hit any API from the frontend, I just need to aim towards localhost:3001/.</p>
<p>I wanted to put them together in a container to sort of match how I have it setup locally, but obviously the path I'm using to communicate between them wont work anymore if that's the case since &quot;localhost&quot; will just look at the users localhost as opposed to the instance in the container. Is there way to keep these two running services on a singular container and have communication between them? I only need the port for one of them (the react frontend) to be exposed to users as that's the only part of the application they would be directly interacting with. Is this type of functionality only possible by making each its' own container and then communicating that way? If possible, I'd like to avoid that.</p>
<p>I've tried searching this up, and I'm sure it's out there somewhere, but I don't think I know enough about docker to properly express what I'm searching for. I'd appreciate anyone with some experience helping me out if possible. Thanks!</p>

Keanu 
<p>This architecture will be easier to handle if the same host/port serves both the front- and back-ends.  In your front-end code you can make calls to relative URLs like <code>/api/things</code> and it will use the same <code>host:port</code>; this saves you from having to recompile the code per deployment and addresses some CORS-related frustrations.</p>
<p>There's essentially three ways to do this:</p>
<ol>
<li><p>Use a tool like <a href="https://webpack.js.org" rel="nofollow noreferrer">Webpack</a> to compile the front-end to static files.  (If you're using <a href="https://create-react-app.dev" rel="nofollow noreferrer">Create React App</a>, <a href="https://create-react-app.dev/docs/production-build" rel="nofollow noreferrer">run <code>npm run build</code> or <code>yarn build</code></a>.)  Have the back-end code serve these files directly.  Don't run a &quot;front-end server&quot;.  In a Docker context, there would just be one container (the back-end) and the UI code might be built in a multi-stage Dockerfile.</p>
</li>
<li><p>Configure the Webpack dev server to <a href="https://webpack.js.org/configuration/dev-server/#devserverproxy" rel="nofollow noreferrer"><code>proxy</code></a> a URL path to the back-end server.  (Or in CRA, <a href="https://create-react-app.dev/docs/proxying-api-requests-in-development" rel="nofollow noreferrer">add a <code>&quot;proxy&quot;</code> setting to <code>package.json</code></a>.)  In a Docker context, the browser would connect to this dev server, and the proxy address would get set to <code>http://backend:3000</code> using the Docker-internal name.</p>
</li>
<li><p>Set up a reverse proxy (frequently <a href="http://nginx.org" rel="nofollow noreferrer">Nginx</a>) to route <code>/api</code> to <code>http://backend:3000</code> and route other paths to <code>http://frontend:3000</code>.  In a Docker context, you would be running three containers: the browser would connect to this proxy, and the proxy would use the Docker-internal names for the other two services.</p>
</li>
</ol>
<p>As you note in the question, the browser is an important player in this setup.  The browser (and therefore <code>fetch</code> or <code>XMLHttpRequest</code> calls from your React application) can never directly call the Docker-internal host names.  It must connect to the host name of the server running the containers (which can be <code>localhost</code> if the browser and containers are on the same system) and a published port number (<code>docker run -p</code>, Docker Compose <code>ports:</code>).</p>
<p>You should generally run one process per container.  Trying to run a React dev server and a back-end server in the same container won't really simplify things, because the browser is what will be making calls to the back-end.  If you use one of the proxying solutions described here, you can route everything into a single published container, and the other containers don't need to publish ports; they can exist only within the Docker system and be reachable only via the proxy.</p>
