running react and node in a single docker file without docker-compose.yml file

Question

i have a sample project using reactjs and nodejs below is the folder structure.

movielisting
   Dockerfile
   client
     package.json
     package.lock.json
     ... other create-react-app folders like src..
   server
     index.js

I start this project by npm run start - client folder and nodemon index.js - server folder. All my api's are written in server folder. My client is running in port 3000 and server is running in port 4000, i have added proxy in package.json of client like below

"proxy": "http://localhost:4000"

So what i am trying to achieve in Dockerfile is i want to start application by running this Dockerfile

1) i need to create the build of client by running npm run build
2) copy to the workdir inside the container
3) copy all server folder
4) npm install for the server folder
5) proxy the application

how can i do this one ? should i need to write some code in nodejs to serve the build index.html file

also how can i run the Dockerfile command to run the application.

Any help appreciated !!!

Mostafa Hussein · Accepted Answer · 2019-03-04 09:19:58Z

1

In order to build both frontend and backend into single image. you need to do the following:

For the frontend application it needs to be built in order to serve it as a static file

For the backend application it needs to be running inside the container and exposed publically so the frontend can reach it from the browser as using localhost:4000 will end up calling the user's localhost not the container's localhost

Finally you need to use something like supervisor as a service manager in order to run multiple service in single container. You might need to check the following

As an example you might check the following:

FROM node:10.15.1-alpine

COPY . /home/movielisting
#Prepare the client
WORKDIR /home/movielisting/client
RUN npm install --no-cache && npm run build && npm install -g serve

#Prepare the server
WORKDIR /home/movielisting/server
RUN npm install --no-cache

EXPOSE 4000 

CMD [ "npm", "start", "index.js" ]

You might need to check the following links:

ReactApp Static Server Deployment

edited Mar 4, 2019 at 9:19

answered Feb 26, 2019 at 13:12

Mostafa Hussein

12.2k3 gold badges43 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mostafa Hussein Over a year ago

@DILEEPTHOMAS I have updated my answer, please check it

Collectives™ on Stack Overflow

running react and node in a single docker file without docker-compose.yml file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related