CODEWITHSUNDEEP
node.jsdockerreverse-proxydevelopment-environment
Starks
Starks

Reputation: 37

How to Dockerise front-end application to communicate with already dockerised api application

Currently, I am developing an application that makes use of a fully dockerised Node API service (which is served locally by Docker Nginx) and a simple React front-end which is served locally using PHP valet.

Running docker-compose up, builds the dockerized application successfully hosted on Nginx on port 80 and proxy passes requests to the node API on port 9999.

The problem that I am having is getting the react front-end to communicate with the dockerised node API.

Ideally I would like to either; move the dockerized Node api service to be served by PHP valet or move the front-end webapp to also be served by the docker nginx service

How can I fully dockerize the front-end and back-end services together so that they can talk to each other (ideally both hosted on port 80) or alternatively suggest how I can use Valet or MAMP together with containerised Node API.

Upvotes: 3

Views: 444

Answers (2)

davidxxx
davidxxx

Reputation: 131456

How can I fully dockerize the front-end and back-end services together so that they can talk to each other (ideally both hosted on port 80) or alternatively suggest how I can use Valet or MAMP together with containerised node API.

With or without Docker, you will be confronted to same origin policy for frontend requests to the backend (XMLHttpRequest and some other requests) since two URLs have the same origin if the protocol, port and host are the same.

If the two apps were containers, hosts would differ by design since these will be two distinct containers. And if you kept the frontend app on the host, it would be also the case.

So in any case, you should enable CORS in the backend side (NodeJS) for at least requests of the frontend host. From the frontend side, nothing should be needed since CORS is a browser stuff : it sends pre-flights requests to the target host to get resource sharing agreement.

About make the frontend a Docker container, I think that if the frontend is designed to work with the Node backend, you should probably also make that a docker image/container and use docker-compose to manage them : it will make them more simple to manage/maintain.

Upvotes: 2

Josh Wulf
Josh Wulf

Reputation: 4877

Build the front-end to static HTML and serve it from the backend from the static directory.

The React front-end is loaded on a user's machine and executes there in their browser. It communicates to the server over HTTP(S).

How are you serving the React app now? A React app is just plain text files that are served over HTTP.

Upvotes: 0

Related Questions