CODEWITHSUNDEEP
reactjsdockerexpresssocket.io
Linsane
Linsane

Reputation: 358

Running React & Express in Docker without exposing multiple Ports

We are currently working on this project: Brainwriter

It's a React-Frontend with an Express-Server as Backend, which is using a postgres-database.

Currently I am running the project inside docker on my server. The Frontend runs on Port 3000, while the Backend runs on Port 3001. Ideally I'd like to only expose the Frontend-Port, but in its current state, when I stop exposing Port 3001, the Frontend cannot access the Backend anymore.

As I'm kinda new to Web-Dev & Docker as a whole I cannot figure out wheter the issue lies within my docker configuration or if it is a React-Express-Problem.

Upvotes: 0

Views: 425

Answers (1)

nischay goyal
nischay goyal

Reputation: 3480

It's a React-Express problem as currently, you are running both servers separately (React on Port 3000 and Express on port 30001). and that is the reason you need to expose two different ports to access the services and for the frontend to access the backend.

To run it on 1 port, I would suggest, serve your React static files via express itself and then you don't have to expose 2 different ports. Only expose Express and that can serve the react application as well.

Below is the express method which can be used to serve your static files.

app.use(express.static(path.join(__dirname, '$PATH_OF_STATIC_FILES')));

where $PATH_OF_STATIC_FILES can be public folder or client folder , basically where you will generate and keep the bundle.js and index.html and other static assets.

Have a look at the below articles, if you want a deep dive.

Ref:- https://expressjs.com/en/starter/static-files.html (Express static Files)

Ref:- https://flaviocopes.com/how-to-serve-react-from-same-origin/ (React with Express)

Upvotes: 1

Related Questions